WPF展示数据的两种方式
1 手动创建单元格DataTemplate
使用TextBlock创建列头并定义样式,数据内容使用ItemsControl
下DataTemplate
来定义。每行数据通过一个自定的类绑定,如UserInfoShow
。如果再利用动态数据集包起来ObservableCollection<UserInfoShow>
,则可绑定所有数据。每列则绑定其中一个需要展示的属性即可。
<Grid Grid.Row="1" Margin="0,15,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Background="#EEE" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="ID" />
<TextBlock
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="姓名" />
<TextBlock
Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="年龄" />
<TextBlock
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="性别" />
<TextBlock
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="备注" />
<TextBlock
Grid.Column="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="电话" />
<TextBlock
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="创建时间" />
<TextBlock
Grid.Column="7"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="更新时间" />
<TextBlock
Grid.Column="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Text="操作" />
</Grid>
<ItemsControl Grid.Row="1" ItemsSource="{Binding UserInfoShows}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border
Grid.ColumnSpan="9"
Margin="0,10,0,0"
BorderBrush="#EEE"
BorderThickness="0,0,0,1"
SnapsToDevicePixels="True" />
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Id}" />
<TextBox
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Name}" />
<TextBox
Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Age}" />
<ComboBox
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
DisplayMemberPath="Selection"
FontSize="16"
IsEditable="True"
ItemsSource="{Binding GenderItems}"
SelectedItem="{Binding GenderShow, Mode=TwoWay}" />
<TextBox
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Remark}" />
<TextBox
Grid.Column="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Phone}" />
<TextBlock
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding CreateTime}" />
<TextBlock
Grid.Column="7"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding UpdateTime}" />
<StackPanel
Grid.Column="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock
Margin="0,0,5,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="17">
<Hyperlink Command="{Binding ShowCommand}" CommandParameter="{Binding ShowParameter}">查看</Hyperlink>
</TextBlock>
<TextBlock
Margin="5,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="17">
<Hyperlink Command="{Binding DeleteCommand}" CommandParameter="{Binding DeleteParameter}">删除</Hyperlink>
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
2使用DataGrid
数据绑定方式一样,值得注意的是DataGrid
可以使用DataGridTemplateColumn
方便开发者自定义列。
<DataGrid
x:Name="dgUser"
Grid.Row="1"
Margin="0,15,0,0"
AutoGenerateColumns="False"
CanUserAddRows="False"
HeadersVisibility="All"
ItemsSource="{Binding UserInfoDGShows}">
<DataGrid.Resources />
<DataGrid.Columns>
<materialDesign:DataGridTextColumn
Width="80"
Binding="{Binding Id}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="ID"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<materialDesign:DataGridTextColumn
Width="80"
Binding="{Binding Name}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"
Header="姓名">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="姓名"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<materialDesign:DataGridTextColumn
Width="80"
Binding="{Binding Age}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"
Header="年龄">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="年龄"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<!--<materialDesign:DataGridComboBoxColumn
Width="120"
Header="性别"
ItemsSource="{Binding GenderItems}"
SelectedValueBinding="{Binding GenderShow}">
<DataGridComboBoxColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="性别"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</DataGridComboBoxColumn.HeaderStyle>
<materialDesign:DataGridComboBoxColumn.EditingElementStyle>
<Style BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type ComboBox}, ResourceId=MaterialDataGridComboBoxColumnEditingStyle}}" TargetType="ComboBox">
<Setter Property="IsEditable" Value="True" />
</Style>
</materialDesign:DataGridComboBoxColumn.EditingElementStyle>
</materialDesign:DataGridComboBoxColumn>-->
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="性别"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
DisplayMemberPath="Selection"
FontSize="14"
ItemsSource="{Binding GenderItems}"
SelectedIndex="{Binding GenderShow.SelectID, Mode=TwoWay}"
SelectedValuePath="SelectID" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- DisplayMemberPath="Selection" SelectedValuePath="SelectID" -->
<materialDesign:DataGridTextColumn
Width="120"
Binding="{Binding Remark}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"
Header="备注">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="备注"
TextAlignment="Center"
TextWrapping="Wrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<materialDesign:DataGridTextColumn
Width="150"
Binding="{Binding Phone}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"
Header="电话">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="电话"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<materialDesign:DataGridTextColumn
Width="220"
Binding="{Binding CreateTime}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"
Header="创建时间">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="创建时间"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<materialDesign:DataGridTextColumn
Width="220"
Binding="{Binding UpdateTime}"
EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"
Header="更新时间">
<DataGridTextColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="更新时间"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.ElementStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="14" />
</Style>
</DataGridTextColumn.ElementStyle>
</materialDesign:DataGridTextColumn>
<DataGridTemplateColumn Width="*" Header="操作">
<DataGridTemplateColumn.HeaderStyle>
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
FontSize="16"
FontWeight="Black"
Text="操作"
TextAlignment="Center"
TextWrapping="NoWrap" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<Button
Margin="4,0"
VerticalAlignment="Center"
Background="Transparent"
Command="{Binding ShowCommand}"
CommandParameter="{Binding ShowParameter}"
Content="查看"
FontSize="14"
Foreground="Black" />
<Button
Margin="4,0"
VerticalAlignment="Center"
CommandParameter="{Binding DeleteParameter}"
Background="Transparent"
Command="{Binding DeleteCommand}"
Content="删除"
FontSize="14"
Foreground="Black" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
3 总结对比优缺点
1.DataGrid可以使用丰富的第三方UI库,伴随已经设计好的样式,和基本的选定、排序等功能。
2.DataTemplate拥有较好的自定义,开发时的高自由度,且其中使用的控件不用改变如CheckBox、ComboBox等,反观DataGrid则是DataGridTextColumn、DataGridComboBoxColumn。