一起搭WPF之列表界面设计

1 前言

接着上次的设计初衷，这次将设计衣橱中衣服的数量、类别等信息统计，那么使用列表进行统计是最合适不过的工具了。所以进行列表界面设计！

2 DataGrid

DataGrid控件——数据展示组件，以表格的形式展示和编辑数据。

• 数据绑定：DataGrid控件支持数据绑定，可以将数据源直接绑定到控件上，数据源可以是任何实现了List接口的集合。
• 编辑功能：DataGrid支持行内编辑，用户可以双击单元格进行编辑，也可以通过设置IsReadOnly属性来控制是否可以编辑。通过设置CanUserSortColumns和CanUserAddRows属性来进行排序和筛选。
• 事件处理：提供了多种事件，可以在这些事件中添加自定义逻辑。

3 具体设计

代码如下：

<Border BorderBrush="Orange" BorderThickness="5" CornerRadius="5">
     <Grid>
         <DataGrid ItemsSource="{Binding DataList}" 
                   ScrollViewer.VerticalScrollBarVisibility="Hidden" >
             <DataGrid.Columns>
                 <DataGridTextColumn Header="名称" Width="*" Binding="{Binding Name}"/>
                 <DataGridTextColumn Header="衣服类型" Width="*" Binding="{Binding ClothTpye}"/>
                 <DataGridTextColumn Header="颜色" Width="*" Binding="{Binding ClothColor}"/>
                 <DataGridTextColumn Header="尺码" Width="*" Binding="{Binding ClothSize}"/>
                 <DataGridTextColumn Header="价格" Width="*" Binding="{Binding ClothPrice}"/>

                 <DataGridTemplateColumn Header="操作" Width="120">
                     <DataGridTemplateColumn.CellTemplate>
                         <DataTemplate>
                             <StackPanel Orientation="Horizontal">
                                 <TextBlock>
                                     <Hyperlink Command="{Binding}" CommandParameter="{Binding}">操作</Hyperlink>
                                 </TextBlock>
                             </StackPanel>
                         </DataTemplate>
                     </DataGridTemplateColumn.CellTemplate>
                 </DataGridTemplateColumn>
             </DataGrid.Columns>
         </DataGrid>
     </Grid>
 </Border>

• ItemsSource属性用于设置数据源。我们在这里绑定DataList，也就是上面提到的“数据源可以是任何实现了List接口的集合”。这样，我们后台可以增加很多数据，前端也可以直接更新显示！
• ScrollViewer.VerticalScrollBarVisibility属性用于控制垂直滚动条的显示，数据过多，无法全部显示时，可以使用滚动条进行拖动！
• DataGridTextColumn 是 DataGrid 中用来显示文本数据的列类型。我们使用 DataGridTextColumn 来指定列的标题、绑定的数据路径以及列的宽度等属性。这里我们设置了衣服的名称、类型、价格等参数，并绑定对应的数据源。

这里要注意我们在表格里绑定的数据源与大表格绑定的数据源可以理解为一个类与属性的关系，这个类定义一个集合，然后集合中有很多类，而对应的类的属性不同。

实现的效果：

我们在对应的1按钮下，显示了我们设计的表格，那后续我们就可以在表格中添加我们想要添加的数据了！

总结

以上就是今天要讲的内容，本文仅仅简单介绍了DataGrid的使用，而DataGrid的数据绑定还未实现，下一步就是实现数据绑定，在前端显示数据！