Jouery carousel in WPF

Question

Я хочу создать карусель в WPF, как here. (левая и правая кнопки не учитываются, только пули)

Я нашел много решений, как создать карусель в WPF, но это не совсем то, что мне нужно. У меня есть ListBox изображений:

<ListBox Name="productImages" HorizontalAlignment="Center" VerticalAlignment="Center" IsSynchronizedWithCurrentItem="True" ItemsPanel="{StaticResource HorizontalItemsPanel}" ItemsSource="{Binding Source={StaticResource ImagesCollectionView}}" ItemContainerStyle="{StaticResource ProductImageContainerStyle}"> 
    <ListBox.GroupStyle> 
    <GroupStyle Panel="{StaticResource HorizontalItemsPanel}" /> 
    </ListBox.GroupStyle> 
</ListBox> 

и ползун пули:

<ListBox BorderThickness="0" Grid.Row="1" Height="20" VerticalAlignment="Top" Background="#66000000"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" /> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemContainerStyle> 
      <Style TargetType="ListBoxItem"> 
       <Setter Property="Margin" Value="0" /> 
      </Style> 
     </ListBox.ItemContainerStyle> 

     <ListBoxItem> 
      <Border Background="#4CFFFFFF" Width="6" Height="6" CornerRadius="3"></Border> 
     </ListBoxItem> 
     <ListBoxItem> 
      <Border Background="#FFFFFF" Width="6" Height="6" CornerRadius="3"></Border> 
     </ListBoxItem> 
     <ListBoxItem> 
      <Border Background="#4CFFFFFF" Width="6" Height="6" CornerRadius="3"></Border> 
     </ListBoxItem> 
     <ListBoxItem> 
      <Border Background="#4CFFFFFF" Width="6" Height="6" CornerRadius="3"></Border> 
     </ListBoxItem> 
    </ListBox> 

я не знаю, как создать «отношения» между ними - когда я нажимаю на пули, изображение с таким же индексом должен будет показано.

Answer 1

Простой XAML. Что я имею в виду в комментарии:

<Grid> 
    <Image Source="{Binding SelectedItem, ElementName=Images}" IsManipulationEnabled="True" ManipulationCompleted="UIElement_OnManipulationCompleted" /> 
    <ListBox Name="Images" ItemsSource="{Binding}" Margin="20" IsSynchronizedWithCurrentItem="True" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Transparent" BorderThickness="0" HorizontalContentAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Orientation="Horizontal" Background="Transparent" HorizontalAlignment="Center"/> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Ellipse Width="15" Height="15" Fill="LightGray"/> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</Grid> 

Изображение - где мы можем видеть наше изображение. ListBox - наши пули. Я не удаляю границы выделения, но это всего лишь образец.

Изображение привязано к свойству SelectedItem.Image, поэтому наш контекст должен быть чем-то с этим свойством.

Об операции. Я использую ListCollectionView как событие DataContext и OnManipulationCompleted.

private ListCollectionView Context { get; } 

private void UIElement_OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e) 
{ 
    if (e.TotalManipulation.Translation.X < 5) 
    { 
     if (Context.CurrentPosition == 0) 
      Context.MoveCurrentToLast(); 
     else 
      Context.MoveCurrentToPrevious(); 
     e.Handled = true; 
    } 
    else if (e.TotalManipulation.Translation.X > 5) 
    { 
     if (Context.CurrentPosition == Context.Count) 
      Context.MoveCurrentToFirst(); 
     else 
      Context.MoveCurrentToNext(); 
     e.Handled = true; 
    } 
} 

Как я протестировал, он отлично работает.