如何設置WPF的ItemsControl以在獨特的位置顯示每個元素？

Question

我正在構建BlackJack程序，目前正在手顯示器上工作。

我有一個PlayerSeat UserControl，裏面有一個ItemsControl用於顯示卡片。和普通的大酒杯比賽一樣，這張牌（我的情況是這樣）是放在彼此頂上的。不同的遊戲動作（分割，雙下等）必須改變屏幕上卡片的佈局。 ItemsControl的ItemSource屬性是我的Player的ViewModel中的「ObservableCollection<Card> Hand」屬性。卡片對象包含具有卡片圖像的BitmapSources。

我已經瀏覽了幾個網頁（請參閱文章的結尾），以瞭解如何實現我想要的功能。我正在尋找一種方法來做兩種選擇之一。

1. （優選）指定每個「手動模式」的佈局（分體，雙下，等），並指定手（OC<Card>）的每個索引應放置在順序。例如，對於Hand中的第一張牌，將源控件綁定到Hand [0] .CardImage的Image控件放在（X1，Y1）處，然後將Hand [1]圖像放在（X2，Y2）等等。這可以通過在ItemsControl上設置某種綁定模板屬性（在手形模式之間切換）來進行優化調整。

2. （回退）顯示所有帶有其屬性綁定的圖像控件。將這些圖像的Top/Left屬性綁定到Hand [0] .Top/Left並在Hand類中執行佈局計算。

我不是一個人問問自己沒有調查的問題。看來我需要使用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進行佈局。

如果你採用這種方法，你可以將項目控件放置在任何他們需要在視圖中定位的地方（我會用一些停靠面板和邊距的組合來組織它），並且可以有不同的集合在你的視圖模型中爲每個項目控件綁定。

這可能稍微複雜一點，但是您也可以擁有一個卡對象集合，並將每個ItemsControl的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>