|
|
In this short code snippet, I will explain how to change the look of the WPF DataGrid row display on a Mouse action (in this example, on MouseOver). In WPF using Style, the display and the behavior of any element can be changed by defining user input actions. The WPF styling and templating model enables you to specify triggers within your Style - known as PropertyTriggers. In this demo I have used a WPF DataGrid.
I have created a WPF 4.0 Application with following two classes:
public class clsEmployee
{
public int EmpNo { get; set; }
public string EmpName { get; set; }
public int Salary { get; set; }
public int DeptNo { get; set; }
}public class EmployeeCollection :
ObservableCollection<clsEmployee>
{
public EmployeeCollection()
{
Add(new clsEmployee() { EmpNo = 101, EmpName = "Ajay",
Salary = 56000, DeptNo = 10 });
Add(new clsEmployee() { EmpNo = 102, EmpName = "Vijay",
Salary = 46000, DeptNo = 20 });
Add(new clsEmployee() { EmpNo = 103, EmpName = "Bijay",
Salary = 26000, DeptNo = 30 });
Add(new clsEmployee() { EmpNo = 104, EmpName = "Sujay",
Salary = 16000, DeptNo = 40 });
Add(new clsEmployee() { EmpNo = 1051, EmpName = "Sanjay",
Salary = 36000, DeptNo = 50 });
}
}
The EmployeeCollection class is registered in the MainPage.Xaml to instantiate bind with the Grid element. The XAML code is shown below:
<Window x:Class="WPF_DataGrid_Property_Triggers.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:WPF_DataGrid_Property_Triggers"
Title="MainWindow" Height="350" Width="525">
<Window.Resources><src:EmployeeCollection
x:Key="EmpDs"></src:EmployeeCollection>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
<Setter Property="FontWeight" Value="ExtraBold" />
<Setter Property="Height" Value="20" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource EmpDs}}">
<DataGrid AutoGenerateColumns="False" Height="237"
HorizontalAlignment="Left" Margin="18,66,0,0" Name="dgEmp"
VerticalAlignment="Top" Width="466" ColumnWidth="*"
ItemsSource="{Binding}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding EmpNo}"
Header="EmpNo" />
<DataGridTextColumn Binding="{Binding EmpName}"
Header="EmpName" />
<DataGridTextColumn Binding="{Binding Salary}"
Header="Salary" />
<DataGridTextColumn Binding="{Binding DeptNo}"
Header="DeptNo" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
