5

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

对于初学者，我使用的是 MVVM 模式，并且我有一个 PricingViewModel，它是我的主窗口的 ViewModel。我有一个名为ComparisonViewModel 的第二个视图模型，它是用户控件视图的视图模型，我希望每次用户点击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>

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

4

2 回答 2

4

您需要设置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>
于 2012-09-19T00:53:38.873 回答
4

我发现我需要告诉 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"
于 2013-11-22T19:54:39.560 回答