How can I create wpf Carousel withmy listview items?

Question

Hi All,

I have horizontal wpf listview

 <ListView Name="indexList" ItemsSource="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Transparent" Background="CadetBlue" Width="450">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <StackPanel Grid.Row="0" Grid.Column="0" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                                    <TextBlock>
                               <ContentControl Content="{Binding Field1}" FontSize="10" Foreground="GhostWhite" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Top"></ContentControl>
                                    </TextBlock>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                                    <TextBlock>
                            <ContentControl Content="{Binding Field2}" FontSize="9" Foreground="Bisque" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></ContentControl>
                                    </TextBlock>
                                    <TextBlock>
                            <ContentControl Content="{Binding Field3}" FontSize="9" Foreground="Coral" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></ContentControl>
                                    </TextBlock>
                                </StackPanel>
                                <StackPanel Orientation="Vertical" Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Center">
                                    <Separator></Separator>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

I want to scroll all items on left/right button click. So that when i clicked on Prev/Left button listview items moves to left and on Right/Next button click listview items moves to right.

Like jQuery Carousel

Answer 1

When the Prev/Left button is clicked, call ScrollViewer.LineLeft().

When the Right/Next button is clicked, call ScrollViewer.LineRight().

The simplest way to access the ScrollViewer in a ListView is to do a top-down search of the visual tree, for example:

var scrollViewer = SearchVisualTree<ScrollViewer>(listView);

private T SearchVisualTree<T>(Visual vis) where T:Visual
{
  if(vis==null) return null;
  var range = Enumerable.Range(0, VisualTreeHelper.GetChildrenCount(vis));
  return (
    from i in range
    let child = VisualTreeHelper.GetChild(vis, i) as T
    where child!=null
    select child
  ).Concat(
    from j in range
    let descendant = SearchVisualTree<T>(VisualTreeHelper.GetChild(vis, j) as Visual)
    where descendant!=null
    select descendant
  ).FirstOrDefault();
}