包含UserControl元素的ItemsControl

Question

我有點在黑暗中拍攝這個並且一直在四處尋找，但找不到任何相關的東西。 我正在嘗試在當前窗口上創建一個ItemsControl，所以當用戶單擊窗口上的“添加產品”按鈕時，它會以水平方式向屏幕添加UserControl。

對於初學者我使用MVVM模式，我有一個PricingViewModel，它是我的MAIN窗口的ViewModel。 我有一個名為ComparisonViewModel的第二個視圖模型，它是每次用戶點擊PricingView上的“添加產品”按鈕時我想要顯示的UserControl視圖的ViewModel。 跳到我的代碼中，我有一個聲明的ObservableCollection和我的AddComparison方法。 Collection在VM的構造函數中實例化。

    public ObservableCollection<ComparisonViewModel> Products { get { return _products; } }

    public void AddComparison()
    {
        var products = IoC.Get<ComparisonViewModel>();
        Products.Add(products);
    }

接下來，我在PricingView中得到了ItemsControl，它綁定到PricingViewModel中的那個集合：

            <ItemsControl ItemsSource="{Binding Path=Products}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>

我運行它，在點擊添加后，它只顯示集合名稱。 當用戶點擊添加比較時，我怎么能真正讓它彈出一個新的比較用戶控件？ 非常感謝您的幫助！

Answer 1

我發現我需要告訴ItemsControl兩件事......首先是ItemsControl是什么類型的“東西”：

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

第二個是如何顯示控件：

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <c:Widget Margin="5" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>

最終代碼如下：

    <ItemsControl ItemsSource="{Binding Path=DynamicItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <c:Widget Margin="5" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

您還需要在窗口聲明內容中添加對控件名稱空間的引用：

    xmlns:c="clr-namespace:IHateEverything.Controls"

Answer 2

您將要設置ItemTemplate以便ItemsControl知道如何呈現集合中的每個項目（默認情況下，它只顯示調用.ToString()的結果）。

        <ItemsControl ItemsSource="{Binding Path=Products}" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

           <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type namespace:ComparisonViewModel}">
                    <!-- EXAMPLE -->
                    <Border BorderBrush="Black"
                            BorderThickness="2">
                          <DockPanel Orientation="Horizontal">
                                 <TextBlock Text="{Binding ComparisonResult}"
                                            DockPanel.Dock="Right" />
                                 <TextBlock Text="{Binding Name}" 
                                            DockPanel.Dock="Left" />
                          </DockPanel>
                    </Border>
                </DataTemplate>
           </ItemsControl.ItemTemplate>

        </ItemsControl>