具有动态行数和列数的网格，第1部分

源代码

• 下载applicatio

    

  n - 43.4 KB
• 下载source - 26.5 KB
• GitHub

介绍 这篇文章专门介绍了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