WPFのItemsControlを設定して、各要素を一意の場所に表示するにはどうすればよいですか？

Question

私はBlackJackプログラムを構築していますが、現在は手元のディスプレイで作業しています。

私はPlayerSeat UserControlにカードの表示用のItemsControlを持っています。ブラックジャックの通常のゲームと同様に、カード（私の場合の画像）はお互いの上に置かれます。異なるゲームアクション（スプリット、ダブルダウンなど）は、画面上のカードのレイアウトを変更する必要があります。 ItemsControlのItemSourceプロパティは、PlayerのViewModelの "ObservableCollection<Card> Hand"プロパティです。カードオブジェクトには、カードイメージ付きのビットマップソースが含まれています。

私はいくつかのWebページ（投稿の終わりを参照）を見て、私が欲しいものを達成する方法を探しました。私は2つのオプションのうちの1つを行う方法を探しています。

1. （好ましい）各「ハンドモード」（スプリット、ダブルダウンなど）のレイアウトを指定してハンド（OC<Card>）の各インデックスが順に配置されるべき場所を指定。例えば、Handの最初のカードで、Sourceが（X1、Y1）にHand [0] .CardImageにバインドされたImageコントロールを置いた後、Hand [1] Imageを（X2、Y2）に置くなど。これは、ItemsControlの（ハンドモード間で変更するための）何らかのバインドされたテンプレートプロパティを設定することによって、最適に調整可能です。

2. （フォールバック）すべてのImageコントロールを、ソースプロパティがバインドされた状態で表示します。これらのイメージのTop/LeftプロパティをHand [0] .Top/Leftにバインドし、Handクラスの配置caculationを行います。

私は自分自身で問題を調査することなく尋ねる人ではありません。私はStackPanelでItemsPanelTemplateを使用する必要がありますが、どこから始めたらいいか分かりません。キーは画像を重複させて、私が望むところに置くことです。あなたが私の問題で流すことができる光があれば助けになります。

参考： http://drwpf.com/blog/itemscontrol-a-to-z/（具体的に "ItemsControlに 'P' のパネルのためである"）

Answer 1

は、あなたがItemsPanelTemplateとしてキャンバスを使用してもらえますか？ような何か：

<ItemsControl ItemsSource="{Binding Hand}"> 
    <ItemsControl.ItemsPanel> 
    <ItemsPanelTemplate> 
     <Canvas /> 
    </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Image Source="{Binding Image}" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}" /> 
    </DataTemplate> 
    </ItemsControl.ItemTemplate> 
    <ItemsControl.ItemContainerStyle> 
    <Style> 
     <Setter Property="Canvas.Left" Value="{Binding ImageX}" /> 
     <Setter Property="Canvas.Top" Value="{Binding ImageY}" />      
    </Style> 
    </ItemsControl.ItemContainerStyle> 
</ItemsControl> 

は、これは、あなたのHandクラスに位置プロパティを持っていることを前提としています。これが適切でない場合は、Handインスタンスを含むラッパーHandViewModelと、表示目的でのみ使用されるこれらの追加のX、Yプロパティを作成できます。これらのプロパティの戻り値は、現在の「ハンドモード」に基づいて変更される可能性があります。

Answer 2

あなたのビューを適切に設計する場合、ビューモデルはカードの物理的な位置について何も知る必要はありません。ここには非常に簡単な例があります。私がTextBlockとBorderのために作成したデフォルトのスタイルは、どれくらい大きいかを制御し、積み重ねられたときにそれらがどのように重なるか（負のマージンによって）制御します。 ItemsControlは、レイアウトに水平のStackPanelを使用します。

このアプローチを採用すると、ビュー内に配置する必要がある場所にアイテムコントロールを配置することができます（私は、ドックパネルとマージンを組み合わせて使用​​します）。バインドする各アイテムコントロールのビューモデルで

もう少し複雑ですが、カードオブジェクトのコレクションを1つずつ持ち、のItemsSourceをカードの一部のプロパティでフィルタリングしたCollectionViewにバインドすることもできます。その素晴らしい点は、そのプロパティの値を変更するだけで、カードをある場所から別の場所に「移動」できることです。

どちらの場合でも、コンテンツのレイアウトを管理するアイテムコントロールを作成すると、ビューモデルに触れることなく自由にビュー内を移動できます。

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Page.Resources> 
    <Style TargetType="TextBlock"> 
    <Setter Property="Height" Value="150"/> 
    <Setter Property="Width" Value="100"/> 
    </Style> 
    <Style TargetType="Border"> 
    <Setter Property="BorderBrush" Value="Black"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Background" Value="Lightgray"/> 
    <Setter Property="Margin" Value="0, 0, -80, 0"/> 
    </Style> 
    </Page.Resources> 
    <StackPanel> 
    <ItemsControl> 
     <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
     <StackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <Border> 
     <TextBlock Text="Foo"/> 
     </Border> 
     <Border> 
     <TextBlock Text="Bar"/>  
     </Border> 
     <Border> 
     <TextBlock Text="Baz"/>  
     </Border> 
    </ItemsControl> 
    </StackPanel> 
</Page>