WPF DataGrid应用:属性详解与MaterialDesign美化实战指南

会飞的猪·

已于 2025-02-28 17:35:06 修改

阅读量1.8k

点赞数 32

文章标签： wpf

于 2025-02-28 17:20:03 首次发布

本文链接：https://blog.youkuaiyun.com/wxd678/article/details/145845543

版权

引言

在WPF企业级应用开发中，DataGrid作为数据展示的核心控件，其功能扩展和界面美化直接影响用户体验。本教程将深入讲解DataGrid的实用属性配置，结合流行的MaterialDesignThemes开源库，打造现代化数据表格界面，并实现基于业务数据的动态背景色变化功能。无论您是刚接触WPF的新手还是寻求界面优化的资深开发者，本文都将为您提供完整的解决方案。

环境准备

1.安装MaterialDesignThemes包

Install-Package MaterialDesignThemes-Version 5.1.0

也可以在NuGet包管理器搜索 MaterialDesignThemes,进行下载。

2.创建基础页面结构

MainWindow.xaml:

在页面引用命名空间: xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

<Window
    x:Class="WpfApp1.MainWindow"
    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:local="clr-namespace:WpfApp1"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="1000"
    Height="550">
    <!--  先下载MaterialDesignThemes包 5.1.0版本;并页面引用命名空间: xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"  -->
   
</Window>

3.全局资源引用
在`App.xaml`中添加以下资源字典，确保整个应用使用Material Design主题：

<Application
    x:Class="WpfApp1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    StartupUri="MainWindow.xaml">
    <!--  先下载MaterialDesignThemes包 5.1.0版本;引用命名空间: xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"  -->
    <!--  Application.Resources : 定义了可用于整个应用程序的资源  -->
    <Application.Resources>
        <!--  ResourceDictionary:资源容器  -->
        <ResourceDictionary>
            <!--<ResourceDictionary.MergedDictionaries>: 允许你合并多个资源字典，有效地组合来自不同来源的资源。-->
            <ResourceDictionary.MergedDictionaries>
                <!-- 解释: <materialDesign:BundledTheme ... /> : 应用Material Design主题的地方。
                        BaseTheme="Dark": 将基本主题设置为深色。你可以将其更改为"Light"。
                        PrimaryColor="Green": 将主色（用于按钮、强调等）设置为绿色。
                        SecondaryColor="Red": 将次要颜色（通常用于不太突出的元素）设置为红色-->
                <materialDesign:BundledTheme
                    BaseTheme="Dark"
                    PrimaryColor="Green"
                    SecondaryColor="Red" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

DataGrid表格完整代码

结果展示:

MainWindow.xaml:

 
<Window
    x:Class="WpfApp1.MainWindow"
    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:local="clr-namespace:WpfApp1"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="1000"
    Height="550">
    <!--  先下载MaterialDesignThemes包;并页面引用命名空间: xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"  -->
    <GroupBox
        Margin="2.5"
        FontSize="18"
        FontWeight="Black"
        Header="相机表格">
        <UniformGrid>
            <DataGrid
                x:Name="membersDataGrid"
                Margin="2.5"
                AutoGenerateColumns="False"
                CanUserAddRows="False"
                CanUserDeleteRows="False"
                CanUserSortColumns="False"
                FontStyle="Italic">
                <!--  设置表格背景颜色  -->
                <DataGrid.RowStyle>
                    <Style TargetType="DataGridRow">
                        <!--  默认颜色  也可以不写  -->
                        <Setter Property="Foreground" Value="Black" />
                        <Setter Property="Background" Value="White" />
                        <Style.Triggers>
                            <!--  当Result值为NG的时候 触发改变的颜色 PaleVioletRed  -->
                            <DataTrigger Binding="{Binding Result}" Value="NG">
                                <Setter Property="Background" Value="PaleVioletRed" />
                                <Setter Property="Foreground" Value="White" />
                            </DataTrigger>
                            <!--  当Result值为OK的时候 触发改变的颜色  Green绿  -->
                            <DataTrigger Binding="{Binding Result}" Value="OK">
                                <Setter Property="Background" Value="LightSeaGreen" />
                                <Setter Property="Foreground" Value="White" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </DataGrid.RowStyle>
                <!--  设置表格内容 呈现  -->
                <DataGrid.Columns>
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding Name}"
                        Header="相机"
                        IsReadOnly="True" />
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding ID}"
                        Header="次数"
                        IsReadOnly="True" />
                    <!--  根据这个值改变的背景颜色  -->
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding Result}"
                        Header="结果"
                        IsReadOnly="True" />
                    <materialDesign:DataGridTextColumn />
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding PersonName}"
                        Header="操作人"
                        IsReadOnly="True" />
                    <materialDesign:DataGridTextColumn />
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding Position}"
                        Header="地址"
                        IsReadOnly="True" />
                    <materialDesign:DataGridTextColumn />
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding Email}"
                        Header="邮箱"
                        IsReadOnly="True" />
                    <materialDesign:DataGridTextColumn />
                    <materialDesign:DataGridTextColumn
                        Binding="{Binding Phone}"
                        Header="电话"
                        IsReadOnly="True" />
                    <materialDesign:DataGridTextColumn />
                </DataGrid.Columns>
            </DataGrid>
        </UniformGrid>
    </GroupBox>
</Window>

MainWindow.xaml.cs:

using System.Collections.ObjectModel;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            //初始化组件
            InitializeComponent();


            //创建了一个名为 members 的 ObservableCollection 对象
            ObservableCollection<Member> members = new ObservableCollection<Member>();
            //往集合里 添加数据
            members.Add(new Member { ID = "1", Name = "CDD1", Result = "NG", PersonName = "Gabriel Cox", Position = "Coach", Email = "coxcox@gmail.com", Phone = "808-635-1221" });
            members.Add(new Member { ID = "2", Name = "CDD2", Result = "OK", PersonName = "Lena Jones", Position = "Manager", Email = "lena.offi@hotmail.com", Phone = "320-658-9174" });
            members.Add(new Member { ID = "3", Name = "CDD7", Result = "NG" , PersonName = "Sophia Muris", Position = "Coach", Email = "sophi.muri@gmail.com", Phone = "852-233-6854" });
            members.Add(new Member { ID = "4", Name = "CDD9", Result = "OK", PersonName = "Ali Pormand", Position = "Manager", Email = "alipor@yahoo.com", Phone = "968-378-4849" });
            members.Add(new Member { ID = "5", Name = "CDD2", Result = "NG", PersonName = "Frank Underwood", Position = "Manager", Email = "frank@yahoo.com", Phone = "301-584-6966" });
            members.Add(new Member { ID = "6", Name = "CDD3", Result = "OK", PersonName = "Saeed Dasman", Position = "Coach", Email = "saeed.dasi@hotmail.com", Phone = "817-320-5052" });
            //membersDataGrid 是表格名字
            //ItemsSource 属性用于将数据源绑定到数据网格控件
            membersDataGrid.ItemsSource = members;
        }
    }
    /// <summary>
    /// 定义一个类
    /// </summary>
    public class Member
    {
        /// <summary>
        /// 相机名字
        /// </summary>
        public string Name { get; set; }
        //public Brush BgColor { get; set; }
        /// <summary>
        /// 次数
        /// </summary>
        public string ID { get; set; }
        /// <summary>
        /// 结果
        /// </summary>
        public string Result { get; set; }
        /// <summary>
        /// 操作人
        /// </summary>
        public string PersonName { get; set; }
        /// <summary>
        /// 地址
        /// </summary>
        public string Position { get; set; }
        /// <summary>
        /// 邮箱
        /// </summary>
        public string Email { get; set; }
        /// <summary>
        /// 电话
        /// </summary>
        public string Phone { get; set; }

    }
}

扩展------关于DataGrid表格的属性

属性
AutoGenerateColumns="False"	禁止 DataGrid 自动生成列。这意味着您需要手动定义每个列，以控制它们显示的内容和格式
VerticalAlignment="Top"	将 DataGrid 垂直对齐到父容器的顶部。
CanUserSortColumns="False"	禁止用户对 DataGrid 的列进行排序
Margin="5"	设置 DataGrid 周围的边距，使它与父容器保持一定的距离。
IsReadOnly="True"	使 DataGrid 中的单元格只读，用户无法编辑数据。
CanUserResizeColumns="False"	禁止用户调整列的宽度
CanUserResizeRows="False"	禁止用户调整行的高度
SelectionMode="Single"	设置 DataGrid 的选择模式为单选模式，允许用户一次只选择一个单元格
CanUserReorderColumns="False"	禁止用户重新排列 DataGrid 中的列顺序
AlternationCount="2"	设置 DataGrid 行的交替颜色模式，每两行交替一次
RowHeaderWidth="0"	将行头（即行号）的宽度设置为 0，隐藏行头
CanUserAddRows="False"	禁止用户在 DataGrid 中添加新的行
SelectionUnit="Cell":	设置用户选择的单位为单元格，而不是整行
AutoGenerateColumns="False"	禁用自动生成列功能，表示你将手动添加列。
CanUserAddRows="False"	禁止用户手动添加行
CanUserDeleteRows="False"	禁止用户手动删除行
CanUserSortColumns="False"	禁止用户手动排序列
GridLinesVisibility="All"	显示所有网格线，包括水平线和垂直线
IsReadOnly="False"	将 `DataGrid` 设置为可编辑状态。用户可以修改单元格中的数据。
`DataGrid`控件使用的列类型	显示文本: DataGridTextColumn 显示复选框: DataGridCheckboxColumn 下拉框: DataGridComboboxColumn 超链接: DataGridHyperlinkColum