This is a migrated thread and some comments may be shown as answers.

Scrolling not working on tileview

1 Answer 179 Views
TileView
This is a migrated thread and some comments may be shown as answers.
DUSTIN
Top achievements
Rank 1
DUSTIN asked on 26 Apr 2012, 08:57 PM
I'm using a tileview to show a list of images with the ability to reorder and delete images as needed.  The image of what it looks like is attached.

Currently, when I delete an image (which I do by removing an item from the collection) it sets the viewer all the way back to the left and there is no way to programmatically(c#) scroll back to the right where the image was deleted from.

So what I need to understand is how do I set the scroll position of the radtileview?

Here's my view code.
                   
<telerik:RadTileView x:Name="ListView1" MaxRows="1" MaximizeMode="Zero" ScrollBarVisibility="Visible" ColumnWidth="Auto" Height="210"
    TileDragEnded="RadTileView1_TileDragEnded" ItemContainerStyle="{DynamicResource RadTileViewItemStyle}"
    HorizontalContentAlignment="Left"
    SelectionChanged="ListView1_SelectionChanged"  IsItemDraggingEnabled="True"
    IsSelectionEnabled="True"  IsAutoScrollingEnabled="True">                       
    <telerik:RadTileView.ContentTemplate   >                           
        <DataTemplate   >
            <Grid Margin="10,0,10,0" HorizontalAlignment="Left"    >                          
                 <Border  BorderThickness="1" Margin="-2" Background="Transparent" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" >
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="10"></DropShadowEffect>
                    </Border.Effect>
                    <Image  Height="Auto" Width="Auto"  VerticalAlignment="Top"    Source="{Binding ThumbnailImageControl}"  />
                </Border>
            </Grid>
        </DataTemplate>
         
    </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>


Here's the style referenced:
<Style x:Key="RadTileViewItemStyle" TargetType="{x:Type telerik:RadTileViewItem}"  >
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:RadTileViewItem}" >
                <Border x:Name="GripBarElement" Background="Transparent" Width="Auto"  HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Grid Margin="5"   HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="ContentElement" MouseDown="img_MouseDown"
                                            Grid.Row="1" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"  />
                        <Grid x:Name="ContentCacheHost" Grid.Row="0" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        <Grid MinHeight="23"  Grid.Row="0">
                            <Button Content="X" Height="23" Margin="0,0,0,0"
                                Width="23" Click="btnDelete_Click"
                                Name="btnDelete"
                                Tag="{Binding FilePath}"  MouseEnter="btnDelete_MouseEnter" MouseLeave="btnDelete_MouseLeave"
                                Foreground="White"  FontSize="14" FontWeight="Bold" Opacity=".4"
                                VerticalAlignment="Top" HorizontalAlignment="Left" >
                                <Button.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#00AF69" Offset="0" />
                                        <GradientStop Color="#138D5D" Offset="1" />
                                    </LinearGradientBrush>
                                </Button.Background>
                            </Button>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Here's how I bind:
public ObservableCollection<StaticObjects.BmpImage> BitmapImageList { get; set; }

ListView1.ItemsSource = BitmapImageList;

I thought this would work but no luck            
if (currentselectedindex > 0)
{
    ListView1.SelectedIndex = currentselectedindex - 1;
    ListView1.BringIntoView(ListView1.Items[currentselectedindex]);
}

Here's another clue in the delete any ideas?
    void btnDelete_Click(object sender, RoutedEventArgs e)
    {
        Button btn = (Button)sender;
        string filepath = btn.Tag.ToString();
 
        StaticObjects.BmpImage bmp = BitmapImageList.Where(p => p.FilePath == btn.Tag).SingleOrDefault();
 
        int currentidex = ListView1.Items.IndexOf(bmp);
 
        bmp.Dispose();
        BitmapImageList.Remove(bmp);
}

1 Answer, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 27 Apr 2012, 02:35 PM
Hello Dustin,
Thank you for the feedback, unfortunately I wasn't able to reproduce your problem. I used your code snippets to create a sample project and when I tested it everything seemed to work correctly. At the moment there are two ways to scroll in the RadTileView
- use the BringIntoView method (as you've tried)
- find the ScrollViewer in the RadTileView and manually change its horizontal offset:
this.ListView1.ChildrenOfType<ScrollViewer>().FirstOrDefault().ScrollToHorizontalOffset(700d);
I've attached the sample project that I used for testing so could you please examine it and see what are the differences with yours?
If you need further assistance please feel free to ask.

Regards,
Zarko
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
TileView
Asked by
DUSTIN
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Share this question
or