WPF - Toggle Button

Toggle button is similar to checkbox control that holds its state when it clicked.  When Toggle button clicked first time it will set IsChecked property to true and on click again it will set IsChecked property to false. Toggle button also fires Checked event when IsChecked property set to true and UnChecked event when set to false. Toggle button is available in System.Windows.Controls.Premitives namespace.

Toggle Button also implements IsThreeState property. If IsThreeState property is enabled, the first click sets IsChecked property to true, the second click sets it to null and the third click sets it to false. 

Let’s have a look on below example.

<Window.Resources>

    <Style TargetType="{x:Type ToggleButton}"

           x:Key="toggleButtonStyle">

        <Setter Property="FontWeight" Value="Bold" />

        <Style.Triggers>

            <Trigger Property="IsChecked" Value="True">

                <Setter Property="Content" Value="IsChecked='True'" />

                <Setter Property="Foreground" Value="Green" />

            </Trigger>

            <Trigger Property="IsChecked" Value="False">

                <Setter Property="Content" Value="IsChecked='False'" />

                <Setter Property="Foreground" Value="Red" />

            </Trigger>

            <Trigger Property="IsChecked" Value="{x:Null}">

                <Setter Property="Content" Value="IsChecked='Null'" />

                <Setter Property="Foreground" Value="Blue" />

            </Trigger>

        </Style.Triggers>

    </Style>

</Window.Resources>

<Grid>

    <ToggleButton IsChecked="True"

                    IsThreeState="True"

                    Height="30" Width="150"

                    Style="{StaticResource toggleButtonStyle}">

    </ToggleButton>

</Grid>

IsChecked property set to true when application starts, and text color of Toggle Button appears as ‘green’.

On toggle button click, IsChecked property set to null and text color changes to ‘blue’.

Again click on toggle button, IsChecked property set to false and text color changes to  ‘red’.

See Also – 

Styles in WPF

Triggers in WPF

ControlTemplate in WPF

Static vs. Dynamic Resource in WPF

Control Template in WPF

Control template is core component of WPF. Controls in WPF are made from so many components and elements. This is called as visual representation of control. Control Templates are used to replace Visual Tree of an element.

Each control has its own default control template with basic appearance. Control has dependency property called Template. Setting this property can replace appearance of control. Control Template can be specified inside style or in resource file or in resource element of window/user control. Control template can be set to particular type like Button, Listbox, Menu etc.

Control Template also allows you to specify behavior using Trigger or Visual State Manager. In below example I have used trigger to change behavior of control. You can visit my separate post on the Visual State Manager in WPF for more information.

<Window.Resources>

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">

    <Grid>

        <Ellipse x:Name="ButtonEllipse" Height="100" Width="100" >

            <Ellipse.Fill>

                <LinearGradientBrush StartPoint="0,0.2"

                                     EndPoint="0.2,1.4">

                    <GradientStop Offset="0" Color="Cyan"/>

                    <GradientStop Offset="1" Color="Blue"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <ContentPresenter Content="{TemplateBinding Content}"

                            HorizontalAlignment="Center"

                            VerticalAlignment="Center" />

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="IsMouseOver" Value="True">

            <Setter TargetName="ButtonEllipse" Property="Fill" >

                <Setter.Value>

                    <LinearGradientBrush StartPoint="0,0.2"

                                         EndPoint="0.2,1.4">

                        <GradientStop Offset="0" Color="Pink"/>

                        <GradientStop Offset="1" Color="Red"/>

                    </LinearGradientBrush>

                </Setter.Value>

            </Setter>

        </Trigger>

        <Trigger Property="IsPressed" Value="True">

            <Setter Property="RenderTransform">

                <Setter.Value>

                    <ScaleTransform ScaleX="0.8" ScaleY="0.8"

                                    CenterX="0" CenterY="0"  />

                </Setter.Value>

            </Setter>

            <Setter Property="RenderTransformOrigin"

                    Value="0.5,0.5" />

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!"

        Template="{StaticResource ButtonTemplate}"

        Width="150" Margin="5" />

<Button Content="Click Me!" Height="40"

        Width="150" Margin="5" />

</StackPanel>

As per above example, First image demonstrates two buttons first one is with Template and second one is without Template. In second image first button background changed when mouse is hover over the button.

As per XAML code snippet, ButtonTemplate is defined inside window’s resources. Inside ButtonTemplate, Ellipse element is added inside grid and set its background with linear gradient. Also added Content Presenter which is used to display content of button. In our case we set ‘Click Me!’ content to button which will automatically added to Content Presenter because it has template binding with content element of parent control.

Triggers are also added to control template to change behavior of control on certain event. In above code we defined property trigger on IsMouseOver property and IsPressed property. So when mouse hover over the button it will change color specified in linear gradient of setter element and when button is pressed it will scale transform button to 0.8. So the whole control size will reduce when button is pressed.

See also - 

Logical Tree vs. Visual Tree

WPF Class Hierarchy

Styles in WPF

Triggers in WPF

Visual State Manager in WPF

Dependency Property

Triggers in WPF

Triggers are collection of setters and execute when condition met. Triggers are part of Style and can be defined inside style. For more information about Style you can go through my article on Style. Five types of Triggers are available in WPF

• Trigger (Property Trigger)
• MultiTrigger (Multiple Property Trigger)
• DataTrigger
• MultiDataTrigger
• EventTrigger

Trigger

These triggers are simple triggers and can set any dependency property. Trigger defines property and value. If property contains specified value then the setter action defined inside trigger will execute.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <Trigger Property="IsMouseOver" Value="True">

            <Setter Property="FontSize" Value="20" />

            <Setter Property="FontWeight" Value="Bold" />

            <Setter Property="Foreground" Value="Red" />

        </Trigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

    <Button Content="Click Me!" Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, When IsMouseOver property value is true the defined setter action inside trigger will execute.

MultiTrigger

This is similar to Trigger but combines multiple conditions and all the condition must met to execute setter collection defined in multitrigger.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <MultiTrigger>

            <MultiTrigger.Conditions>

                <Condition Property="IsDefault" Value="True" />

                <Condition Property="IsMouseOver" Value="True" />

            </MultiTrigger.Conditions>

            <MultiTrigger.Setters>

                <Setter Property="FontSize" Value="20" />

                <Setter Property="FontWeight" Value="Bold" />

                <Setter Property="Foreground" Value="Red" />

            </MultiTrigger.Setters>

        </MultiTrigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

    <Button Content="Click Me!" IsDefault="True" 

            Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, When IsDefault and IsMouseOver both properties value set to true the defined setter action inside multitrigger will execute.

DataTrigger

Data triggers are similar to normal trigger except that they can be triggered by any property rather than just only dependency property. In data trigger we need to specify binding instead of property name.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <DataTrigger  Binding="{Binding

                      RelativeSource={RelativeSource Self},

                      Path=Content}" Value="Click Me!">

            <DataTrigger.Setters>

                <Setter  Property="FontSize" Value="20" />

            </DataTrigger.Setters>

        </DataTrigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

    <Button Content="Click Me!"

            Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, Data trigger checks value of Content property of Button and if value matches then it will execute setter block of data trigger. As per above example Button content is 'Click Me!' which matches the value mentioned in data trigger so it will execute setter block. In data trigger binding you can use any property of control or entity.

MultiDataTrigger

This is similar to DataTrigger but combines multiple conditions and all the condition must met to execute setter collection defined in MultiDataTrigger.

<Window.Resources>

<Style TargetType="Button">

    <Style.Triggers>

        <MultiDataTrigger>

            <MultiDataTrigger.Conditions>

                <Condition  Binding="{Binding

                  RelativeSource={RelativeSource Self},

                  Path=Content}" Value="Click Me!" />

                <Condition  Binding="{Binding

                  RelativeSource={RelativeSource Self},

                  Path=IsDefault}" Value="True" />

            </MultiDataTrigger.Conditions>

            <MultiDataTrigger.Setters>

                <Setter  Property="FontSize" Value="20" />

            </MultiDataTrigger.Setters>

        </MultiDataTrigger>

    </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!" IsDefault="True"

        Height="40" Width="150" Margin="5" />

</StackPanel>

As per above code, When Content property and IsDefault property value match with the value mentioned in data trigger then the setter collection of MultiDataTrigger will execute. Both conditions must match.

EventTriggers

Event triggers are little different than other triggers. It depends on Routed Event. When certain routed event fires the event triggers action will execute. Instead of setter collection EventTrigger have Action collection. Inside action you can specify Animation. Inside action storyboard can be specified. I will explain about Animation and Storyboard in detail in my later post.

<Window.Resources>

<Style TargetType="Button">

<Style.Triggers>

    <EventTrigger RoutedEvent="MouseEnter">

        <EventTrigger.Actions>

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Duration="0:0:0.5"

                        Storyboard.TargetProperty="Width"

                        To="200"  />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger.Actions>

    </EventTrigger>

    <EventTrigger RoutedEvent="MouseLeave">

        <EventTrigger.Actions>

            <BeginStoryboard>

                <Storyboard>

                    <DoubleAnimation

                        Duration="0:0:0.5"

                        Storyboard.TargetProperty="Width"

                        To="150" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger.Actions>

    </EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!"

Height="40" Width="150" Margin="5" />

</StackPanel>

On Mouse Enter

On Mouse Leave

As per above code, MouseEnter and MouseLeave event trigger is specified. So whenever these events fires the EventTriggerAction will get execute. In above example Button width animation is specified. So when mouse enters inside button area the width of button will set to 200 and on mouse leave set back to 150.

See also

Styles in WPF

Routed Events in WPF
Routed Commands in WPF