WPF中使用MVVM模式控制布局控件的内容

WPF内置了多种布局控件，如Grid、StackPannel等，用来布局很方便。但这些控件并没有ItesmSource属性，无法使用MVVM模式绑定实现子控件的动态添加和删除。例如，我们可以用UniformGrid快速实现等分网格布局：

<UniformGrid>
    <Border BorderThickness="1 1 1 1" BorderBrush="gray">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="WPF" Margin="5 10" Foreground="Blue"/>
            <TextBlock Text="微软的用户界面框架。" Margin="5 10" Foreground="Black" TextWrapping="WrapWithOverflow"/>
        </StackPanel>
    </Border>
    <Border BorderThickness="1 1 1 1" BorderBrush="gray">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Electron" Margin="5 10" Foreground="Blue"/>
            <TextBlock Text="使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。" Margin="5 10" Foreground="Black" TextWrapping="WrapWithOverflow"/>
        </StackPanel>
    </Border>
    <Border BorderThickness="1 1 1 1" BorderBrush="gray">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Qt" Margin="5 10" Foreground="Blue"/>
            <TextBlock Text="跨平台C++图形用户界面应用程序开发框架。" Margin="5 10" Foreground="Black" TextWrapping="WrapWithOverflow"/>
        </StackPanel>
    </Border>
    <Border BorderThickness="1 1 1 1" BorderBrush="gray">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Swing" Margin="5 10" Foreground="Blue"/>
            <TextBlock Text="为 Java 设计的 GUI 工具包。" Margin="5 10" Foreground="Black" TextWrapping="WrapWithOverflow"/>
        </StackPanel>
    </Border>
</UniformGrid>

效果如下：

但是当布局元素数量不确定时，动态添加子控件就很不方便，因为UniformGrid并没有类似ItemSource的属性。WPF的精髓在于MVVM，如何使用MVVM模式实现对布局控件内容的控制呢？对此，我们可以使用ItemsControl的ItemsPanel属性实现。

首先，定义ViewModel:

public class MainViewModel
{
    public MainViewModel()
    {
        //初始化列表内容
        Items.Add(new ItemInfo { Name = "WPF", Text = "微软的用户界面框架。" });
        Items.Add(new ItemInfo { Name = "Electron", Text = "使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。" });
        Items.Add(new ItemInfo { Name = "Qt", Text = "跨平台C++图形用户界面应用程序开发框架。" });
        Items.Add(new ItemInfo { Name = "Swing", Text = "为 Java 设计的 GUI 工具包。" });
    }
    //供绑定的属性
    public ObservableCollection<ItemInfo> Items { get; set; } = new ObservableCollection<ItemInfo>();
}
public class ItemInfo
{
    public string Name { get; set; }
    public string Text { get; set; }
}

然后，使用ItemsControl，绑定Items属性，并将UniformGrid控件提供给ItemsPanel属性

<ItemsControl ItemsSource="{Binding Items}">
    <!--指定子项目容器为UniformGrid控件-->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!--指定子项目模板-->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1 1 1 1" BorderBrush="gray">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Name}" Margin="5 10" Foreground="Blue"/>
                    <TextBlock Text="{Binding Text}" Margin="5 10" Foreground="Black" TextWrapping="WrapWithOverflow"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

效果图如下：

在ViewModel中控制Items属性，便可实现子控件的动态增减。