具有动态行数和列数的网格，第1部分
源代码
介绍 这篇文章专门介绍了Wpf数据网格，它动态定义了行数和列数，但是所有的单元格都有相同的宽度和高度。例如，这种网格可以用于8x8字段的国际象棋或跳棋游戏。 原文发表在博客上。 应用程序具有以下特点: 可以在运行时更改行和列的数目;所有单元格的宽度和高度相同;网格占据尽可能多的空间;单击输入可切换单元格的状态。 背景 解决方案使用c# 6， . net 4.6.1, Wpf与MVVM模式。 解决方案 Wpf应用程序 Wpf应用程序是在一个主窗口的MVVM模式下完成的。动态网格是作为用户控件实现的，它包含绑定到单元格视图模型的可观察集合的DataGrid控件。在此实现中，如果网格宽度或网格高度发生更改，则每次都会重新创建单元格集合，并导致一些应用程序暂停。在下面的帖子中，这个问题是解决异步方法更新单元数组。此外，可以使用细胞的其他实现;例如，单元格的二维数组ICellViewModels[][]工作得很好。 后台代码 动态网格视图模型实现了IDynamicGridViewModel界面，它有两个大小的属性，网格的宽度和高度，行数和列数，可观察的集合的单元格视图模型，和几个颜色属性: 隐藏,收缩,复制代码公共接口IDynamicGridViewModel { / / / & lt; summary> /// cellviewmodel的二维集合。 / / / & lt; / summary> ObservableCollection< ObservableCollection< ICellViewModel>比; 细胞{得到;} / / / & lt; summary> ///网格列数。 / / / & lt; / summary> 获取;} / / / & lt; summary> ///网格行数。 / / / & lt; / summary> int GridHeight {get;} / / / & lt; summary> ///开始，单元格最亮的颜色。 / / / & lt; / summary> s 获取;设置;} / / / & lt; summary> /// Finish是细胞中最暗的颜色。 / / / & lt; / summary> 获取;设置;} / / / & lt; summary> ///单元格周围边框的颜色。 / / / & lt; / summary> 获取;设置;} } 颜色属性的值被分配给CellView控件的相应属性。每个单元格的视图模型实现了ICellViewModel接口，该接口为数据模型定义了属性，数据模型实现了ICell接口，并为单元格更改状态命令。 隐藏,复制Code
public interface ICellViewModel { ICell Cell { get; set; } ICommand ChangeCellStateCommand { get; } }
最后，ICell接口包含一个布尔属性状态: 隐藏,复制Code
public interface ICell { /// <summary> /// State of the cell. /// </summary> bool State { get; set; } }
XAML 相同的单元格高度由DataGrid样式中定义的RowHeight属性控制: 隐藏,TargetType="{x:Type DataGrid}"> ,& lt; Setter属性=“RowHeight”比; ,,& lt; Setter.Value> ,,,,& lt; MultiBinding转换器= " {StaticResource DivideDoubleConverter}” ,,,,,,,,,,,,,,,,,,ConverterParameter =“2”比; ,,,,,,& lt;绑定RelativeSource = " {RelativeSource自我}” ,,,,,,,,,,,,,,,路径=“ActualHeight”模式=“单向的” ,,,,,,,,,,,,,,,转换器= " {StaticResource SubstractConverter}” ,,,,,,,,,,,,,,,ConverterParameter = " 2 " /比; ,,,,,,& lt;绑定路径= " DataContext.GridHeight " ,,,,,,,,,,,,,,,RelativeSource = " {RelativeSource自我}" ,,,,,,,,,,,,,,,模式= "单向的" /比; ,,,,& lt; / MultiBinding> ,,& lt; / Setter.Value> ,& lt; / Setter> & lt; / Style> 单元格高度等于数据网格的实际高度减去2除以行数。单元格的宽度由单元格数据模板的宽度属性控制: 隐藏,收缩,复制Code
<DataTemplatex:Key="CellTemplate"> <BorderBorderBrush="Transparent"BorderThickness="1 0 1 0"DataContext="{Binding}"> <Border.Width> <MultiBindingConverter="{StaticResource DivideDoubleConverter}"ConverterParameter="2"> <BindingRelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}"Path="ActualWidth"Mode="OneWay"Converter="{StaticResource SubstractConverter}"ConverterParameter="2"/> <BindingRelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}"Path="DataContext.GridWidth"Mode="OneWay"/> </MultiBinding> </Border.Width> <views:CellViewDataContext="{Binding}"BorderColor="{Binding DataContext.BorderColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Mode=OneWay, FallbackValue=#FF000000}"StartColor="{Binding DataContext.StartColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Mode=OneWay, FallbackValue=#FFF0F0F0}"FinishColor="{Binding DataContext.FinishColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Mode=OneWay, FallbackValue=#FF0F0F0F}"/> </Border> </DataTemplate>
同样，单元格宽度等于数据网格的实际宽度减去2除以列数。有一个DataGrid控件的定义: 隐藏,收缩,复制Code
<DataGridx:Name="DynamicGrid"DataContext="{Binding}"ItemsSource="{Binding Path=Cells}"IsEnabled="True"IsTabStop="False"> <DataGrid.Columns> <DataGridTemplateColumnWidth="*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ItemsControlItemsSource="{Binding}"ItemTemplate="{DynamicResource CellTemplate}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanelOrientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>
结论 在下面的文章中，将实现以下功能: 异步添加/删除单元格的方法;调整计时器，防止过于频繁的细胞更新;保持活跃的细胞;固定的细胞大小;依赖容器;日志记录。 本文转载于：http://www.diyabc.com/frontweb/news275.html
