question

XAMLWPFDeveloper-7560 avatar image
0 Votes"
XAMLWPFDeveloper-7560 asked HuiLiu-MSFT commented

How to create Style for WPF DataGrid with Trigger

Hi To All,
How to create DataGrid Style in WPF/XAML with Trigger(Change Color Row Selected & Mousehover). Please find below attached image.

Thanks

136644-style-datagrid.png


dotnet-wpf-xaml
style-datagrid.png (75.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered HuiLiu-MSFT commented

For changing the color of the selected row and hovering with trigger, you could refer to the following code.
The code of xaml:

 <Grid>
         <DataGrid Name="dg" ItemsSource="{Binding}" AutoGenerateColumns="False">
             <DataGrid.Resources>
                 <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
             </DataGrid.Resources>
             <DataGrid.RowStyle>
                 <Style TargetType="DataGridRow" >
                     <Style.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter Property="Background" Value="Orange"/>
                             <Setter Property="Foreground" Value="Purple"/>
                         </Trigger>
                         <MultiTrigger>
                             <MultiTrigger.Conditions>
                                 <Condition Property="IsSelected" Value="true" />
                                 <Condition Property="Selector.IsSelectionActive" Value="true" />
                             </MultiTrigger.Conditions>
                             <Setter Property="Foreground" Value="White" />
                             <Setter Property="Background" Value="OrangeRed"/>
                         </MultiTrigger>
                     </Style.Triggers>
                 </Style>
             </DataGrid.RowStyle>
             <DataGrid.Columns>
                 <DataGridTextColumn Header="Name"  Binding="{Binding Name}"/>
                 <DataGridTextColumn Header="EmployeeNumber"  Binding="{Binding EmployeeNumber}"/>
             </DataGrid.Columns>
         </DataGrid>
     </Grid>

The code of xaml.cs:

 using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Windows;
    
 namespace StyleforDataGridwithTrigger
 {
   public partial class MainWindow : Window
   {
     private ObservableCollection<Employee> EmployeeInfoDataSource { get; set; }
     public MainWindow()
     {
       InitializeComponent();
       Init();
       DataContext = this;
       dg.ItemsSource = EmployeeInfoDataSource;
     }
     private void Init()
     {
       EmployeeInfoDataSource = new ObservableCollection<Employee>();
       for (int i = 0; i < 5; i++)
       {
         EmployeeInfoDataSource.Add(new Employee { Name = "name" + i, EmployeeNumber = i });
       }
     }
     public event PropertyChangedEventHandler PropertyChanged;
     protected void OnPropertyChanged(string propertyName)
     {
       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
     }
   }
   public class Employee
   {
     public string Name { get; set; }
     public int EmployeeNumber { get; set; }
   }
 }

The picture of result:
136841-2.gif


If the response is helpful, please click "Accept Answer" and upvote it.
 Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. 


2.gif (54.1 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@XAMLWPFDeveloper-7560 . May I know if you have a chance to check my answer? I am glad to help if you have any others questions.

0 Votes 0 ·