Change Silverlight DataGrid Style based on Mouse Actions

Tweet

Although WPF supports Property Triggers for applying different styles on controls like DataGrid based upon User Action (e.g. MouseEnter etc.), Silverlight does not have inbuilt support for the same. To make this possible in Silverlight, we need to take advantage of Styles and Events.

In the code-snippet shown below, I have used the MouseEnter and MouseLeave events for applying styles on DataGrid. On MouseEnter, we will increase the font size (fontsize 20) of the text inside the DataGrid. On MouseLeave event, we will bring the font back to normal (fontsize 13).

Note: Feel free to modify the code for applying style on an individual DataGridRow instead of all rows. Download the source code here

Step 1: Open VS2010 and create a Silverlight Application

Step 2: In MainPage.xaml, add a DataGrid. Define the MouseEnter and MouseLeave events for the DataGrid. In the Resources section of the UserControl, define styles as per your requirements. The XAML is as shown below:

Step 3: In the code-behind file, add the following code. This code will apply styles on DataGrid (dgData) by reading Styles from the Resources. The code is as shown below:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Collections.ObjectModel;

namespace SL4_Parent_Child_Grid
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        ObservableCollection<Person> _PersonalData =
            new ObservableCollection<Person>();

        public ObservableCollection<Person> PersonalData
        {
            get { return _PersonalData; }
            set { _PersonalData = value; }
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            _PersonalData.Add(new Person()
            { PersonId = 101, PersonName = "Mahesh", PersonAge = 34 });
            _PersonalData.Add(new Person()
            { PersonId = 102, PersonName = "Vikarm", PersonAge = 29 });
            _PersonalData.Add(new Person()
            { PersonId = 103, PersonName = "Suprotim", PersonAge = 33 });
            _PersonalData.Add(new Person()
            { PersonId = 104, PersonName = "Ravi", PersonAge = 35 });
            _PersonalData.Add(new Person()
            { PersonId = 105, PersonName = "Natrajan", PersonAge = 45 });

            this.DataContext = this;
        }        

        private void dgData_MouseEnter(object sender, MouseEventArgs e)
        {
            System.Windows.Style dgRowStyle =
                this.Resources["DataGridRowStyleMouseEnter"] as Style;
            dgData.RowStyle = dgRowStyle;
        }

        private void dgData_MouseLeave(object sender, MouseEventArgs e)
        {
            System.Windows.Style dgRowStyle =
                this.Resources["DataGridRowStyleMouseLeave"] as Style;
            dgData.RowStyle = dgRowStyle;
        }       
    }

    public class Person
    {
        public int PersonId { get; set; }
        public string PersonName { get; set; }
        public int PersonAge { get; set; }
    }
}

Step 4: Run the application and hover your mouse in and out over the DataGrid

On MouseEnter (Font size increases)

On MouseLeave (Font size back to normal)

Download the source code

Tweet

About The Author

Mahesh Sabnis is a Microsoft MVP having over 18 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet