包含 UserControl 元素的 ItemsControl

Question

我有点在黑暗中拍摄这个，一直在环顾四周，但找不到任何相关的东西。我几乎是在尝试在我拥有的当前窗口上创建一个 ItemsControl，因此当用户单击窗口上的“添加产品”按钮时，它会以水平方式向屏幕添加一个 UserControl。

对于初学者，我使用的是 MVVM 模式，并且我有一个 PricingViewModel，它是我的主窗口的 ViewModel。我有一个名为比较视图模型的第二个视图模型，它是用户控件视图的视图模型，每次用户点击 PricingView 上的“添加产品”按钮时，我都会显示它。跳转到我的代码中，我有一个声明的 ObservableCollection 和我的 AddComparison 方法。集合在 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>