包含 UserControl 元素的 ItemsControl答案

【问题标题】：An ItemsControl containing UserControl elements包含 UserControl 元素的 ItemsControl
【发布时间】：2012-09-19 00:47:26
【问题描述】：

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

对于初学者，我使用的是 MVVM 模式，并且我有一个 PricingViewModel，它是主窗口的 ViewModel。我有一个名为 ComparisonViewModel 的第二个视图模型，它是 UserControl 视图的 ViewModel，每当用户点击 PricingView 上的“添加产品”按钮时，我想显示它。进入我的代码，我有一个声明的 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>

我运行它，点击添加后，它只显示集合名称。当用户点击添加比较时，我如何才能真正让它弹出一个新的比较用户控件？非常感谢您提前提供的帮助！

【问题讨论】：

标签： c# wpf mvvm itemscontrol

【解决方案1】：

您需要设置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>

【讨论】：

嗯。好吧 DataTemplate 没有 TargetType 属性，我也尝试将它添加为并且它仍然没有呈现。你有没有机会说得更具体一点？
@JustinPeterson 抱歉，应该是 DataType 而不是 TargetType
该死，它仍然不想渲染。
@JustinPeterson 实际上，您必须定义 UI 以显示 ComparisonViewModel。查看我的编辑。
这不是从“比较”对象中获取数据吗？这实际上不会显示我创建的 UserControl 本身。新的 UI 部分已经创建为 ComparisonView。我知道您可以在那里模拟一个新的 UI。我可能不得不这样做

【解决方案2】：

我发现我需要告诉 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"

【讨论】：