从 MVVM 动态添加控件到视图答案

【问题标题】：Dynamically adding controls to View from MVVM从 MVVM 动态添加控件到视图
【发布时间】：2013-01-29 16:57:37
【问题描述】：

在 WPF 中，我使用的是 MVVM 模型。

我有一个带有 Dockpanel 的视图，我想为通过绑定找到的所有硬盘动态添加带有标签和文本框的 StackPanel。

因此我的 XAML 看起来像：

<DockPanel Grid.Row="1" HorizontalAlignment="Stretch" Margin="5">
       <ItemsControl ItemsSource="{Binding Harddisks}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="2.5,0,0,0">
                        <Label Content="{Binding Path=Label}" />
                        <TextBox Text="{Binding Path=GB_Free}" Width="100" IsReadOnly="True"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

应该是四个标签和文本框，但只显示第一个标签和文本框。为什么？

【问题讨论】：

您可以通过使用像 snoop 这样的工具在运行时检查元素来查看正在发生的事情。当某些东西没有按照您的预期呈现时，我发现它非常宝贵。 snoopwpf.codeplex.com

标签： wpf mvvm

【解决方案1】：

您在 ItemsControl 中的项目实际上并不是 DockPanel 的直接子项。您需要更改 ItemsControl 以指定 DockPanel 是 Panel。以下将导致 ItemsControl 创建一个 DockPanel 并将所有项目放入其中（而不是 ItemsControl 默认使用的 StackPanel）。

   <ItemsControl ItemsSource="{Binding Harddisks}">
        <ItemsControl.ItemsPanel>
            <DockPanel Grid.Row="1" HorizontalAlignment="Stretch" Margin="5" />
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="2.5,0,0,0">
                    <Label Content="{Binding Path=Label}" />
                    <TextBox Text="{Binding Path=GB_Free}" Width="100" IsReadOnly="True"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

【讨论】：

好的，它似乎工作并且所有标签和文本框都显示出来了。但是有一个奇怪的效果。我现在左侧有 3 个标签和文本框，右侧有最后一个标签和文本框。这是什么原因？好的，我通过更改水平对齐解决了它。