WPF中的Jquery转盘

本文关键字：转盘 Jquery 中的 WPF | 更新日期: 2023-09-27 18:26:12

我想像这里一样在WPF中创建转盘。（左右按钮不计算，只有子弹）

我已经找到了许多如何在WPF中创建旋转木马的解决方案，但这并不是我所需要的。我有图像的列表框：

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

我不知道如何在它们之间创建"关系"——当我点击项目符号时，应该会显示具有相同索引的图像。

WPF中的Jquery转盘

简单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-我们的子弹。我不删除选择边框，但它只是一个示例。

Image绑定到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;
    }
}

正如我所测试的，它的工作非常完美。

相关文章：