来自数据绑定的 WPF MVVM 表布局答案

【问题标题】：WPF MVVM table layout from data binding来自数据绑定的 WPF MVVM 表布局
【发布时间】：2018-01-31 16:18:44
【问题描述】：

假设我有以下模型：

public class PageModel  //INotifyPropertyChanged...
{
    public int RowCount { get; set; }
    public int ColumnCount { get; set; }
    public ObservableCollection<BaseItemModel> PageItems { get; set; }
}

public abstract class BaseItemModel  //INotifyPropertyChanged...
{
    public string Name { get; set; }
    public int Row { get; set; }
    public int Column { get; set; }
}

public class ConcreteItem1 : BaseItemModel
{
    public bool Value { get; set; }
}

public class ConcreteItem2 : BaseItemModel
{
    public float Value { get; set; }
}

我想在 WPF 中做的（无需在代码隐藏中做太多）是以表格/网格格式布置 ConcreteItem1 和 ConcreteItem2 的控件。问题是我不知道如何从数据绑定的角度来解决这个问题。

在我看来UniformGrid 将是首选控件，但不知何故将其嵌入为项目控件的布局？

我的目标是这样的：

行/列是固定的，控件会缩放以填充可用空间。

那么，我怎样才能以具有固定行/列的表格/网格格式对绑定到模型的控件数据进行布局？

【问题讨论】：

标签： c# wpf mvvm

【解决方案1】：

将ItemsPanel 属性设置为ItemsPanelTemplate，并带有指定列数的UniformGrid：

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="3" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

行数取决于ItemsSource中的项目数。

【讨论】：