WPF materialDesign DataGrid 示例

WPF(Windows Presentation Foundation)中的DataGrid是一个用于显示和编辑表格数据的强大控件。DataGrid允许您以类似电子表格的方式展示和管理数据。以下是关于WPF DataGrid的一些重要概念和讲解:

  1. 列(Columns):DataGrid由列组成,每个列对应数据源中的一个字段。您可以使用不同类型的列,如DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn等,来显示不同类型的数据。

  2. 数据绑定(Data Binding):DataGrid允许您将数据绑定到数据源,以便显示和编辑数据。您可以通过设置DataGrid的ItemsSource属性将数据源绑定到DataGrid。

  3. 列自动生成(AutoGenerateColumns):DataGrid可以自动生成列,它会根据数据源中的属性自动创建列。您可以通过将AutoGenerateColumns属性设置为TrueFalse来控制是否自动生成列。

  4. 列头(Column Headers):每个列都有一个列头,用于显示列的名称或标题。列头通常包括排序按钮、筛选按钮等,可以进行各种交互操作。

  5. 行(Rows):DataGrid中的每一行对应数据源中的一条记录。您可以添加、删除、选择和编辑行。

  6. 单元格(Cells):DataGrid中的每个单元格包含一个数据项,代表一个字段的值。单元格可以包含文本、复选框、按钮等不同类型的内容。

  7. 事件(Events):DataGrid支持各种事件,例如选择行、编辑单元格、排序列等。您可以为这些事件添加事件处理程序以响应用户交互。

  8. 样式和模板(Styles and Templates):您可以自定义DataGrid的外观和行为,包括行的样式、列的样式、单元格模板等。

  9. 分组和排序(Grouping and Sorting):DataGrid允许您对数据进行分组和排序,以便更好地组织和查看数据。

  10. 编辑和验证(Editing and Validation):您可以允许用户编辑单元格中的数据,并进行数据验证,以确保数据的完整性和准确性。

  11. 样式(Styling):您可以自定义DataGrid的外观,包括行样式、列样式、列头样式等,以适应您的应用程序的外观和主题。

  12. 绑定命令(Binding Commands):您可以使用命令绑定来处理DataGrid中的交互操作,例如点击按钮执行特定操作。

  13. 选择模式(Selection Modes):DataGrid支持多种选择模式,包括单选、多选和无选择模式,可以根据应用程序的需求进行配置。

  14. 过滤(Filtering):您可以启用过滤功能,以便用户可以筛选数据,只显示满足特定条件的行。

  15. 分页(Paging):DataGrid支持分页显示大量数据,以提高性能和用户体验。

  16. 复杂数据类型(Complex Data Types):DataGrid可以显示复杂数据类型,例如嵌套对象或自定义类型。

总之,WPF的DataGrid是一个功能丰富的控件,用于在WPF应用程序中显示和编辑数据。它可以适应各种数据源和需求,并提供丰富的自定义和扩展选项,以满足不同应用程序的要求。

看看效果图:

image.png

XAML代码:

<Window x:Class="YadinghaoOri.Index"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:YadinghaoOri"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d" 
        Background="{StaticResource RootBackgroud}"  
        WindowStartupLocation="CenterScreen"  
        Title="Index" Height="400" Width="700">
    <Window.Resources>
        <Style x:Key="LinkButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="Background" Value="Transparent"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <DataGrid x:Name="dataGrid" 
                  materialDesign:DataGridAssist.ColumnHeaderPadding="4 2 2 2"
                  AutoGenerateColumns="False" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch"
                  SelectionMode="Single"                  
                  CanUserAddRows="False"
                  CanUserSortColumns="False"
                  materialDesign:DataGridAssist.CellPadding="10">
            <DataGrid.Columns>
                <!-- 添加序号列(DataGridTemplateColumn) -->
                <DataGridTemplateColumn Header="#">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding RowNumber}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                
                <!-- 添加 CheckBox 列 -->
                <DataGridTemplateColumn Header="选择">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox  />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                
                <!-- 其他列定义 -->
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}">
                    <DataGridTextColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                            <Setter Property="VerticalContentAlignment" Value="Center" />
                        </Style>
                    </DataGridTextColumn.HeaderStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}" />
                
                
                <DataGridTemplateColumn Header="操作" >
                    <DataGridTemplateColumn.HeaderStyle>
                        <Style TargetType="{x:Type DataGridColumnHeader}">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                        </Style>
                    </DataGridTemplateColumn.HeaderStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                <Button Content="Update" Style="{StaticResource LinkButtonStyle}"   Click="ExecuteButton_Click" />
                                <Button Content="Delete" Style="{StaticResource LinkButtonStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

后台数据源实体类代码:

    public class Person
    {
        public int RowNumber { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

XAML后台调用代码:

using System.Windows;
using System.Collections.Generic;
using System.Windows.Controls;

namespace YadinghaoOri
{

    /// <summary>
    /// Index.xaml 的交互逻辑
    /// </summary>
    public partial class Index : Window
    {
        public Index()
        {
            InitializeComponent();
            // Sample data
            List<Person> people = new List<Person>
            {
                new Person { Name = "John Doe", Age = 30 },
                new Person { Name = "Jane Smith", Age = 25 },
                new Person { Name = "Bob Johnson", Age = 40 }
            };
            // 为每一行分配一个序号
            int rowNumber = 1;
            foreach (Person person in people)
            {
                person.RowNumber = rowNumber;
                rowNumber++;
            }
            dataGrid.ItemsSource = people;
        }

        private void ExecuteButton_Click(object sender, RoutedEventArgs e)
        {
            // 获取按钮元素
            Button button = (Button)sender;

            // 获取按钮所在的 DataGridRow
            DataGridRow row = (DataGridRow)dataGrid.ItemContainerGenerator.ContainerFromItem(((FrameworkElement)sender).DataContext);
            // 获取与该行相关的数据对象
            if (row != null)
            {
                // 获取数据对象(Person 类型的示例)
                Person person = (Person)row.Item;
                // 在这里使用 person 对象来访问行的数据
                string name = person.Name;
                int age = person.Age;
                // 例如,显示行的数据
                MessageBox.Show($"姓名: {name}, 年龄: {age}");
            }
        }

    }
    public class Person
    {
        public int RowNumber { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

}

好了就写的着吧

WPF(Windows Presentation Foundation)中的DataGrid是一个用于显示和编辑表格数据的强大控件。DataGrid允许您以类似电子表格的方式展示和管理数据。以下是关于WPF DataGrid的一些重要概念和讲解:

  1. 列(Columns):DataGrid由列组成,每个列对应数据源中的一个字段。您可以使用不同类型的列,如DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn等,来显示不同类型的数据。

  2. 数据绑定(Data Binding):DataGrid允许您将数据绑定到数据源,以便显示和编辑数据。您可以通过设置DataGrid的ItemsSource属性将数据源绑定到DataGrid。

  3. 列自动生成(AutoGenerateColumns):DataGrid可以自动生成列,它会根据数据源中的属性自动创建列。您可以通过将AutoGenerateColumns属性设置为TrueFalse来控制是否自动生成列。

  4. 列头(Column Headers):每个列都有一个列头,用于显示列的名称或标题。列头通常包括排序按钮、筛选按钮等,可以进行各种交互操作。

  5. 行(Rows):DataGrid中的每一行对应数据源中的一条记录。您可以添加、删除、选择和编辑行。

  6. 单元格(Cells):DataGrid中的每个单元格包含一个数据项,代表一个字段的值。单元格可以包含文本、复选框、按钮等不同类型的内容。

  7. 事件(Events):DataGrid支持各种事件,例如选择行、编辑单元格、排序列等。您可以为这些事件添加事件处理程序以响应用户交互。

  8. 样式和模板(Styles and Templates):您可以自定义DataGrid的外观和行为,包括行的样式、列的样式、单元格模板等。

  9. 分组和排序(Grouping and Sorting):DataGrid允许您对数据进行分组和排序,以便更好地组织和查看数据。

  10. 编辑和验证(Editing and Validation):您可以允许用户编辑单元格中的数据,并进行数据验证,以确保数据的完整性和准确性。

  11. 样式(Styling):您可以自定义DataGrid的外观,包括行样式、列样式、列头样式等,以适应您的应用程序的外观和主题。

  12. 绑定命令(Binding Commands):您可以使用命令绑定来处理DataGrid中的交互操作,例如点击按钮执行特定操作。

  13. 选择模式(Selection Modes):DataGrid支持多种选择模式,包括单选、多选和无选择模式,可以根据应用程序的需求进行配置。

  14. 过滤(Filtering):您可以启用过滤功能,以便用户可以筛选数据,只显示满足特定条件的行。

  15. 分页(Paging):DataGrid支持分页显示大量数据,以提高性能和用户体验。

  16. 复杂数据类型(Complex Data Types):DataGrid可以显示复杂数据类型,例如嵌套对象或自定义类型。

总之,WPF的DataGrid是一个功能丰富的控件,用于在WPF应用程序中显示和编辑数据。它可以适应各种数据源和需求,并提供丰富的自定义和扩展选项,以满足不同应用程序的要求。

看看效果图:

image.png

XAML代码:

<Window x:Class="YadinghaoOri.Index"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:YadinghaoOri"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d" 
        Background="{StaticResource RootBackgroud}"  
        WindowStartupLocation="CenterScreen"  
        Title="Index" Height="400" Width="700">
    <Window.Resources>
        <Style x:Key="LinkButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="Background" Value="Transparent"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <DataGrid x:Name="dataGrid" 
                  materialDesign:DataGridAssist.ColumnHeaderPadding="4 2 2 2"
                  AutoGenerateColumns="False" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch"
                  SelectionMode="Single"                  
                  CanUserAddRows="False"
                  CanUserSortColumns="False"
                  materialDesign:DataGridAssist.CellPadding="10">
            <DataGrid.Columns>
                <!-- 添加序号列(DataGridTemplateColumn) -->
                <DataGridTemplateColumn Header="#">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding RowNumber}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                
                <!-- 添加 CheckBox 列 -->
                <DataGridTemplateColumn Header="选择">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox  />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                
                <!-- 其他列定义 -->
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}">
                    <DataGridTextColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                            <Setter Property="VerticalContentAlignment" Value="Center" />
                        </Style>
                    </DataGridTextColumn.HeaderStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}" />
                
                
                <DataGridTemplateColumn Header="操作" >
                    <DataGridTemplateColumn.HeaderStyle>
                        <Style TargetType="{x:Type DataGridColumnHeader}">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                        </Style>
                    </DataGridTemplateColumn.HeaderStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                <Button Content="Update" Style="{StaticResource LinkButtonStyle}"   Click="ExecuteButton_Click" />
                                <Button Content="Delete" Style="{StaticResource LinkButtonStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

后台数据源实体类代码:

    public class Person
    {
        public int RowNumber { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

XAML后台调用代码:

using System.Windows;
using System.Collections.Generic;
using System.Windows.Controls;

namespace YadinghaoOri
{

    /// <summary>
    /// Index.xaml 的交互逻辑
    /// </summary>
    public partial class Index : Window
    {
        public Index()
        {
            InitializeComponent();
            // Sample data
            List<Person> people = new List<Person>
            {
                new Person { Name = "John Doe", Age = 30 },
                new Person { Name = "Jane Smith", Age = 25 },
                new Person { Name = "Bob Johnson", Age = 40 }
            };
            // 为每一行分配一个序号
            int rowNumber = 1;
            foreach (Person person in people)
            {
                person.RowNumber = rowNumber;
                rowNumber++;
            }
            dataGrid.ItemsSource = people;
        }

        private void ExecuteButton_Click(object sender, RoutedEventArgs e)
        {
            // 获取按钮元素
            Button button = (Button)sender;

            // 获取按钮所在的 DataGridRow
            DataGridRow row = (DataGridRow)dataGrid.ItemContainerGenerator.ContainerFromItem(((FrameworkElement)sender).DataContext);
            // 获取与该行相关的数据对象
            if (row != null)
            {
                // 获取数据对象(Person 类型的示例)
                Person person = (Person)row.Item;
                // 在这里使用 person 对象来访问行的数据
                string name = person.Name;
                int age = person.Age;
                // 例如,显示行的数据
                MessageBox.Show($"姓名: {name}, 年龄: {age}");
            }
        }

    }
    public class Person
    {
        public int RowNumber { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

}

好了就写的着吧

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在