Question

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

我需要设计一个DataTemplate / ListBox样式，因此它看起来像堆栈混乱的照片，即最上面的一个是焦点/选中的项目（见下图）。

Image here

参考图纸，

第1项）未显示
第2项）位于堆栈的后面
项目3）在2和4的中间
第4项）是焦点
第5项）未显示

我最难以让物品旋转和重叠，最困难的任务是让焦点的物品显示在顶部。

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

Answer 1

要使项目旋转，您应该查看使用Transforms。在这种情况下最相关的那个是旋转变换，也是为了给它随机分散的外观，我们可以使用ObjectDataProvider并在其他地方生成我们的角度。

我不懂VB，但是这里涉及的唯一C＃非常简单，而且应该很容易转移。

让我们使用像Colors这样简单的东西，可以很容易地切换到图像资源路径。这里我们有一个ObservableCollection我们的Colors，还有一个单独的类，我们将用它来生成角度，它要做的就是返回0到360之间的数字，我们将使用它来旋转每个项目。

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

在XAML中，我们现在可以创建一个可用于生成角度的资源。

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

现在，我们只需要创建一些东西来显示我们的项目。我们可以将它们放在ListBox中并添加数据模板来设置每个颜色项的背景，以及应用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>

用户界面仍然需要一些工作，但这应该有助于项目的轮换。

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

1 个答案: