wpf - 如何以 WPF 列表框样式旋转项目？

Question

我想为我的一个大学项目制作一个 WPF ListBox 相册。

我需要设计一个 DataTemplate/ListBox 样式，使它看起来像一堆乱七八糟的照片，即最上面的一个是焦点/选定的项目（见下图）。

图片在这里

参考图纸，

• 项目 1) 未显示
• 项目 2) 在堆栈的后面
• item 3) 在 2 和 4 中间
• 项目 4) 是焦点
• 第 5) 项未显示

让项目旋转和重叠最困难，最困难的任务是让焦点项目显示在顶部。

我正在使用 Visual Basic，因为我还没有掌握 C#，所以如果示例可以在 VB 中或主要使用 WPF，那将很有用。

Answer 1

To get the items to rotate, you should look at using Transforms. The one that is most relevant in this case is the Rotate Transform, also to give it that random scattered apperance, we can use an ObjectDataProvider and generate our angles somewhere else.

I don't know VB, but the only C# involved in this is pretty simple, and should be easily transferable.

Lets just use something simple like Colors, which can easily be switched over to image resource paths. Here we've got an ObservableCollection of our Colors, and also a separate class that we will use to generate angles, all it's going to do is return a number between 0 and 360, which we will use to rotate each item.

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        Colors = new ObservableCollection<string>();
        Colors.Add("Red");
        Colors.Add("Blue");
        Colors.Add("Green");
        Colors.Add("Yellow");

        this.DataContext = this;
    }

    public ObservableCollection<string> Colors
    {
        get;
        set;
    }
}

public class AngleService
{
    private static Random rand = new Random();

    public int GetAngle()
    {
        return rand.Next(0, 90);
    }
}

In the XAML, we can now create a resource that can be used to generate the angles.

<Window.Resources>
    <local:AngleService x:Key="Local_AngleService" />
    <ObjectDataProvider x:Key="Local_AngleProvider"
                        x:Shared="False"
                        ObjectInstance="{StaticResource Local_AngleService}"
                        MethodName="GetAngle" />
</Window.Resources>

Now, we just need to create something to display our items. We can put them in a ListBox and add a data template to set the background for each color item, as well as apply the RotateTransform.

<ListBox ItemsSource="{Binding Colors}"
         VerticalContentAlignment="Center"
         HorizontalContentAlignment="Center">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border x:Name="uiItemBorder"
                    BorderBrush="Black"
                    BorderThickness="2"
                    CornerRadius="3"
                    Background="{Binding}"
                    Width="50"
                    Height="50">
                <TextBlock Text="{Binding}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center" />
                <Border.RenderTransform>
                    <RotateTransform Angle="{Binding Source={StaticResource Local_AngleProvider}}" />
                </Border.RenderTransform>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The UI still needs a bit of work from there, but that should help out with the rotation of the items.