使用DataTrigger自定义WPF DataGrid行样式

金士顿2024-05-11 16:43

使用DataTrigger自定义WPF DataGrid行样式

在WPF开发中，通过DataTrigger可以方便地根据数据的变化自定义控件的样式。本文将展示如何在DataGrid中使用DataTrigger根据条件动态改变行的背景颜色和字体样式。

创建DataGrid控件

首先，我们创建一个包含三列的DataGrid控件：姓名、年龄和生日。我们使用AutoGenerateColumns属性设置为False，并手动定义列：

xml 复制代码 
<DataGrid ItemsSource="{Binding Persons}" AutoGenerateColumns="False" Grid.Column="0">
    <DataGrid.Columns>
        <DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="Auto" />
        <DataGridTextColumn Header="年龄" Binding="{Binding Age}" Width="Auto" />
        <DataGridTextColumn Header="生日" Binding="{Binding Birthday}" Width="*" />
    </DataGrid.Columns>
</DataGrid>
定义DataTriggers

接下来，我们在DataGrid的RowStyle中定义多个DataTrigger，根据不同的年龄值改变行的背景颜色。当CheckBox被选中时，改变字体颜色和样式：

xml 复制代码 
<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Age}" Value="19">
                <Setter Property="Background" Value="LightBlue"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Age}" Value="20">
                <Setter Property="Background" Value="LightGreen"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Age}" Value="21">
                <Setter Property="Background" Value="LightCoral"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=chkRedText, Path=IsChecked}" Value="True">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="FontSize" Value="16"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>
添加用户界面

我们为用户添加输入框和一个CheckBox，用户可以通过这些控件添加新的用户，并选择是否将字体变为红色：

xml 复制代码 
<StackPanel Grid.Column="1" Margin="10">
    <TextBlock Text="姓名:"/>
    <TextBox x:Name="txtName" Width="200" Margin="5"/>
    <TextBlock Text="年龄:"/>
    <TextBox x:Name="txtAge" Width="200" Margin="5"/>
    <TextBlock Text="地址:"/>
    <TextBox x:Name="txtAddress" Width="200" Margin="5"/>
    <CheckBox x:Name="chkRedText" Content="红色字体" Margin="5"/>
    <Button Content="增加用户" Width="200" Margin="5" Click="AddPerson_Click"/>
</StackPanel>
后台代码

最后，在C#后台代码中实现数据绑定和添加用户功能：

csharp 复制代码 
public partial class MainWindow : Window, INotifyPropertyChanged
{
    public ObservableCollection<Person> Persons { get; set; }
    public MainWindow()
    {
        InitializeComponent();
        Persons = new ObservableCollection<Person>
        {
            new Person { Name = "新人", Age = 20, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 19, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 21, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 18, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 19, Birthday = DateTime.Now }
        };
        DataContext = this;
    }

    private void AddPerson_Click(object sender, RoutedEventArgs e)
    {
        if (int.TryParse(txtAge.Text, out int age))
        {
            Persons.Add(new Person
            {
                Name = txtName.Text,
                Age = age,
                Birthday = DateTime.Now,
                Address = txtAddress.Text
            });
        }
        else
        {
            MessageBox.Show("请输入有效的年龄。");
        }
    }
}

结论

通过上述方法，可以在WPF中使用DataTrigger轻松实现DataGrid行样式的动态调整。这样的功能可以显著提升用户界面的交互性和数据展示的直观性。### 使用DataTrigger自定义WPF DataGrid行样式

在WPF开发中，通过DataTrigger可以方便地根据数据的变化自定义控件的样式。本文将展示如何在DataGrid中使用DataTrigger根据条件动态改变行的背景颜色和字体样式。

创建DataGrid控件

首先，我们创建一个包含三列的DataGrid控件：姓名、年龄和生日。我们使用AutoGenerateColumns属性设置为False，并手动定义列：

xml 复制代码 
<DataGrid ItemsSource="{Binding Persons}" AutoGenerateColumns="False" Grid.Column="0">
    <DataGrid.Columns>
        <DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="Auto" />
        <DataGridTextColumn Header="年龄" Binding="{Binding Age}" Width="Auto" />
        <DataGridTextColumn Header="生日" Binding="{Binding Birthday}" Width="*" />
    </DataGrid.Columns>
</DataGrid>
定义DataTriggers

接下来，我们在DataGrid的RowStyle中定义多个DataTrigger，根据不同的年龄值改变行的背景颜色。当CheckBox被选中时，改变字体颜色和样式：

xml 复制代码 
<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Age}" Value="19">
                <Setter Property="Background" Value="LightBlue"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Age}" Value="20">
                <Setter Property="Background" Value="LightGreen"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Age}" Value="21">
                <Setter Property="Background" Value="LightCoral"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=chkRedText, Path=IsChecked}" Value="True">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="FontSize" Value="16"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>
添加用户界面

我们为用户添加输入框和一个CheckBox，用户可以通过这些控件添加新的用户，并选择是否将字体变为红色：

xml 复制代码 
<StackPanel Grid.Column="1" Margin="10">
    <TextBlock Text="姓名:"/>
    <TextBox x:Name="txtName" Width="200" Margin="5"/>
    <TextBlock Text="年龄:"/>
    <TextBox x:Name="txtAge" Width="200" Margin="5"/>
    <TextBlock Text="地址:"/>
    <TextBox x:Name="txtAddress" Width="200" Margin="5"/>
    <CheckBox x:Name="chkRedText" Content="红色字体" Margin="5"/>
    <Button Content="增加用户" Width="200" Margin="5" Click="AddPerson_Click"/>
</StackPanel>
后台代码

最后，在C#后台代码中实现数据绑定和添加用户功能：

csharp 复制代码 
public partial class MainWindow : Window, INotifyPropertyChanged
{
    public ObservableCollection<Person> Persons { get; set; }
    public MainWindow()
    {
        InitializeComponent();
        Persons = new ObservableCollection<Person>
        {
            new Person { Name = "新人", Age = 20, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 19, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 21, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 18, Birthday = DateTime.Now },
            new Person { Name = "新人", Age = 19, Birthday = DateTime.Now }
        };
        DataContext = this;
    }

    private void AddPerson_Click(object sender, RoutedEventArgs e)
    {
        if (int.TryParse(txtAge.Text, out int age))
        {
            Persons.Add(new Person
            {
                Name = txtName.Text,
                Age = age,
                Birthday = DateTime.Now,
                Address = txtAddress.Text
            });
        }
        else
        {
            MessageBox.Show("请输入有效的年龄。");
        }
    }
}

结论

通过上述方法，可以在WPF中使用DataTrigger轻松实现DataGrid行样式的动态调整。这样的功能可以显著提升用户界面的交互性和数据展示的直观性。

相关推荐
贺国亚15 小时前
模型训练-分布式与GPU调度
分布式·wpf
不羁的木木1 天前
HarmonyOS技术精讲-Connectivity Kit：实战——多屏协同与文件快传应用
华为·wpf·harmonyos
某不知名網友2 天前
C++ 从零实现负载均衡式在线 OJ 判题系统｜分布式沙箱判题实战
wpf
fogota2 天前
【AI】C# .NET8 WPF 第三方DLL引用配置（编译不丢失、不自动删除）
c#·.net·wpf·dll
不羁的木木2 天前
HarmonyOS技术精讲-Connectivity Kit（短距通信服务）：初识统一短距通信框架
华为·wpf·harmonyos
慧都小妮子3 天前
SciChart WPF v9.0 更新详解：矢量场图表、堆叠箱线图与 MVVM 轴同步来了
c#·.net·wpf·数据可视化·图表控件·图表
He BianGu4 天前
【笔记】WPF中 Brush 的类型、继承关系、使用方式和注意事项
笔记·wpf
FuckPatience5 天前
WPF GridView 列绑定时前端没有属性提示
wpf
界面开发小八哥6 天前
界面控件DevExpress WPF v26.1新版亮点 - 模板工具包 & MVVM功能全新升级
wpf·界面控件·devexpress·ui开发·.net 10
记忆停留w8 天前
Celery+Redis 分布式异步任务队列工程落地业务逻辑
大数据·人工智能·redis·分布式·缓存·架构·wpf
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03如何新建文件夹？ 电脑新建文件夹的4种方法04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05AI科技热点日报 | 2026年07月01日06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路09【AI前线观察】2026年国产开源大模型全面横评：从 DeepSeek V4 到 Kimi K3，谁才是开发者的最优选择？102026年AI技术突破与产业落地全景：从GPT-5到多模态智能体的新纪元