C# WPF Data Binding and Triggers MouseOvers


This entry is part 9 of 18 in the series C# WPF

You are writing a C# WPF program and you want a button to change colour when the user runs the mouse over it. How do you do that? You can use triggers. Every control has a Triggers property that you can use to define triggers directly on that control. In this example, the left button, when the mouse is over it will change its font colour to red and make the font bold.

TriggersMouseOver

Below is the XAML code for this example.

<Window x:Class="TriggersMike.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TriggersMike"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="360">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="29,32,0,0" VerticalAlignment="Top" Width="75">
            <Button.Style>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Foreground" Value="Red"></Setter>
                            <Setter Property="FontWeight" Value="Bold"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
        <Button x:Name="button1" Content="Button1" HorizontalAlignment="Left" Margin="225,32,0,0" VerticalAlignment="Top" Width="75">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="Purple"/>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
        <Label x:Name="label" Content="Triggers, Styles, IsMouseOver" HorizontalAlignment="Left" Height="34" Margin="10,75,0,0" VerticalAlignment="Top" Width="318"/>
    </Grid>
</Window>

You can find out information about controls and their state. Other properties include IsFocused, to determine whether a control has focus; IsHitTestVisible, which indicates whether it is possible to click on a control (it is not obscured by controls further up the stacking order); and IsPressed, which indicates whether a button is pressed. The last of these only applies to buttons that inherit from ButtonBase, whereas the other are available on all controls.

Triggers

Property triggers are just one of three kinds of trigger supported by WPF. A data trigger is a form of property trigger that works for all .NET properties, not just dependency properties. (The Setters inside a data trigger are still restricted to setting dependency properties, however.) An event trigger enables you to declaratively specify actions to take when a routed event is raised. Event triggers always involve working with animations or sounds.

Data triggers are discussed on pages 427-430 in the book WPF 4.5 Unleashed.

Series Navigation<< C# WPF Data Binding and Binding DirectionC# WPF Value Converters >>