Jquery carousel in WPF

Question

I want to create carousel in WPF like here. (left and right buttons not counted, just bullets)

I've found many solutions how to create carousel in WPF, but it isn't exactly what i need. I have listBox of images:

<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>

and slider bullets:

<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>

I don't know how to create "relation" between them - when I click on bullet, image with same index should be shown.

Answer 1

Simple XAML. What i mean in comment:

<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>

Image - where we can see our image. ListBox - our bullets. I don't remove selection borders, but it's just a sample.

Image is binded to SelectedItem.Image property, so our context must be something with this property.

About manipulation. I'm using ListCollectionView as DataContext and OnManipulationCompleted event.

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;
    }
}

As I have tested, it's work perfectly.