1

大学のプロジェクトの 1 つに WPF ListBox フォト アルバムを作成したいと考えています。

DataTemplate/ListBox スタイルを設計して、写真がごちゃ混ぜになったように見えるようにする必要があります。

画像はこちら

代替テキスト

図面を参考に、

  • 項目 1) は表示されません
  • アイテム 2) はスタックの一番後ろにあります
  • 項目 3) 2 と 4 の中間
  • 項目 4) に焦点が当てられています
  • 項目 5) は表示されません

アイテムを回転させたり重ねたりするのに最も苦労しています。最も難しいのは、フォーカスのあるアイテムを一番上に表示することです。

私はまだ C# をマスターしていないので、Visual Basic を使用しています。そのため、例が VB であるか、主に WPF を使用できると便利です。

4

1 に答える 1

0

アイテムを回転させるには、Transformsの使用を検討する必要があります。この場合に最も関連するのは Rotate Transform です。また、ランダムに分散した外観を与えるために、ObjectDataProviderを使用して別の場所で角度を生成できます。

私は VB を知りませんが、これに関連する唯一の C# は非常に単純で、簡単に転送できるはずです。

画像リソース パスに簡単に切り替えることができる、Colors のような単純なものを使用してみましょう。ここでは、Colors の ObservableCollection と、角度を生成するために使用する別のクラスを取得しています。これは、各アイテムを回転させるために使用する 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>

UI にはまだ少し作業が必要ですが、アイテムのローテーションに役立つはずです。

于 2009-06-15T16:25:55.057 に答える