WPF將屬性綁定到對象列表

Question

我需要一些幫助來解決我遇到的一個簡單的XAML綁定問題。

我將MVVM模式用於2個類。 卡和板。 我已經用卡片創建了模型。 Card類僅由兩個屬性組成。

1. 我的卡的價值。
2. 卡的狀態（向下或向上）。 董事會包含一張卡片清單。

public class Card
{
    public int Value { get; private set; }
    public bool Upside { get; set; }

    public Card(int value)
    {
        this.Value = value;
    }
}

class Board
{
    private List<Card> _cardList = new List<Card>();
    public List<Card> CardList
    {
        get
        {
            return _cardList;
        }
        set
        {
            if (_cardList == value)
            {
                return;
            }
            _cardList = value;
            raisePropertyChanged("CardList");
        }
    }

    public void Initialize()
    { 
       // Initialization of the card list
    }

    public void FlipCard()
    {
       // The rules and actions of my game
    }
}

之后，我在卡和板屬性上添加了所有INotifyPropertyChanged內容。 我沒有向您展示使代碼保持盡可能清晰的代碼。

在我的ViewModel我僅公開以下內容：

public Board GameBoard { get; set; }

當然，我還有很多其他方法，屬性和命令，但關於card卻一無所有。 我的游戲規則和紙牌都在我的棋盤類中。 我的ViewModel僅公開特定於我的XAML設計的類。

在我的XAML文件中，我有類似的內容。 卡是一個簡單的矩形。 我只需要使用正確的轉換器將我的卡的值與Fill屬性綁定在一起即可。 我認為我只公開董事會，所以我需要寫一些類似的東西

Fill="{Binding **GameBoard.CardList[0]** 

我不會在運行時生成矩形。 現在我的木板上有4張卡，然后我寫了4次Rectangle代碼，並硬編碼了4次以01、02、03、04結尾的名稱。在這里我只向您顯示01：

<Window.Resources>
    <me:CardFillConverter x:Key="CardConverter"/>
</Window.Resources>

<Rectangle x:Name="Card01" Fill="{Binding ??? Converter={StaticResource CardConverter}}" ... />

正確的綁定是什么？

Answer 1

在轉換器中發揮作用。

<Rectangle x:Name="Card01" Fill="{Binding GameBoard.CardList Converter={StaticResource CardConverter} ConverterParameter = 0}" ... />

Answer 2

如果您的視圖模型中有卡的列表，那么您可能必須以某種方式在視圖中將它們全部顯示出來？ 與索引器一一對應似乎沒有任何意義。 那么您也許應該使用類似：

<ItemsControl ItemsSource="{Binding CardList}">
 <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Rectangle Fill="{Binding, Converter={StaticResource CardConverter}}"/>
        </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 3

干得好

可以使用ItemsControl並為卡的外觀和行為指定數據模板，而不是對卡進行硬編碼

<ItemsControl ItemsSource="{Binding GameBoard.CardList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Fill="{Binding Value,Converter={StaticResource CardConverter}}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

您也可以選擇應用ItemsPanelTemplate定義卡片放置布局

例如

<ItemsControl ItemsSource="{Binding GameBoard.CardList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Fill="{Binding Value,Converter={StaticResource CardConverter}}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>