ToB企服应用市场:ToB评测及商务社交产业平台

标题: WPF DataGrid 列表中，DataGrid.Columns 列根据不同的值表现不同内容 [打印本页]
作者: 种地    时间: 2024-9-15 05:45
标题: WPF DataGrid 列表中，DataGrid.Columns 列根据不同的值表现不同内容
需求：在WPF DataGrid 控件中，有以下列，绑定了一个LogType，值分别是0,1,2，根据不同的值，表现不同的内容以及背景
  1. <DataGrid ItemsSource="{Binding EventLog}">
  2. <DataGrid.Columns>
  3. <DataGridTextColumn Width="150" Binding="{Binding LogType}" Header="级别" >
  4. </DataGrid.Columns>
  5. </DataGrid>
复制代码
终极效果图如下：

一.实当代码

1.需要利用 DataGridTemplateColumn 来为 LogType 列自定义表现模板

  1. <DataGrid ItemsSource="{Binding EventLog}">
  2. <DataGrid.Columns>
  3.     <DataGridTemplateColumn Header="级别" Width="150">
  4.         <DataGridTemplateColumn.CellTemplate>
  5.             <DataTemplate>
  6.                 <Border
  7.                     BorderThickness="1"
  8.                     Background="{Binding LogType, Converter={StaticResource LogTypeToBackgroundConverter}}"
  9.                     CornerRadius="5"
  10.                     Padding="5"
  11.                     HorizontalAlignment="Center"
  12.                     VerticalAlignment="Center">
  13.                     <TextBlock
  14.                         Text="{Binding LogType, Converter={StaticResource LogTypeToTextConverter}}"
  15.                         Foreground="White"
  16.                         HorizontalAlignment="Center"
  17.                         VerticalAlignment="Center"
  18.                         FontWeight="Bold"/>
  19.                 </Border>
  20.             </DataTemplate>
  21.         </DataGridTemplateColumn.CellTemplate>
  22.     </DataGridTemplateColumn>
  23. </DataGrid.Columns>
  24. </DataGrid>
复制代码
2.接下来，我们需要定义两个转换器（LogTypeToBackgroundConverter 和 LogTypeToTextConverter），用于根据 LogType 的值来设置背景颜色和表现文本。

2.1 LogTypeToBackgroundConverter 转换器实现

  1. public class LogTypeToBackgroundConverter : IValueConverter
  2. {
  3.     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.     {
  5.         if (value is int logType)
  6.         {
  7.             switch (logType)
  8.             {
  9.                 case 0:
  10.                     return "#00ee84";
  11.                 case 1:
  12.                     return "#f9c715";
  13.                 case 2:
  14.                     return "#df3c0b";
  15.                 default:
  16.                     return "#00d5e0";
  17.             }
  18.         }
  19.         return "#00d5e0";
  20.     }
  22.     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  23.     {
  24.         return null;
  25.     }
  26. }
复制代码
2.2 LogTypeToTextConverter 转换器实现

  1. public class LogTypeToTextConverter : IValueConverter
  2. {
  3.     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.     {
  5.         if (value is int logType)
  6.         {
  7.             switch (logType)
  8.             {
  9.                 case 0:
  10.                     return "提示";
  11.                 case 1:
  12.                     return "警告";
  13.                 case 2:
  14.                     return "错误";
  15.                 default:
  16.                     return "未知";
  17.             }
  18.         }
  19.         return "未知";
  20.     }
  22.     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  23.     {
  24.         return null;
  25.     }
  26. }
复制代码
3.将转换器，添加到资源字典中

在你的 XAML 用户控件中，需要将转换器添加到资源字典中，以便在数据模板中利用。添加代码如下：

这样就完成了 LogType 列的自定义表现。根据 LogType 的值，可以看到不同的背景颜色和文本表如今 DataGrid 中。如果能帮到你们，记得点赞收藏呐！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4