WPF展示数据的两种方式DataGrid和DataTemplate


WPF展示数据的两种方式

1 手动创建单元格DataTemplate

使用TextBlock创建列头并定义样式,数据内容使用ItemsControlDataTemplate来定义。每行数据通过一个自定的类绑定,如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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值