WPF Styles Using Triggers in VB.NET

This article will describe you how to set controls styles using triggers in WPF.
  • 2498
 
This article will describe you how to set controls styles using triggers in WPF.
 
Whatis a trigger in WPF? WPF defines properties that correspond to end-useractions, such as the IsMouseOver property that is set to true when the user hovers the cursor over a UIElement or the corresponding IsMouseOverproperty of a ContentElement. Representing end-user actions in propertyvalues, along with the Trigger element, allows WPF styles to change property values based on those end-user actions, all from within markup.
 
First of all make a new WPF Project.
 
<Window x:Class="WpfTriggerExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="NormalStyle">
            <Setter Property="Control.FontSize" Value="20"></Setter>
            <Setter Property="Control.HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Control.Margin" Value="10"></Setter>
            <Setter Property="Control.Foreground" Value="Black"></Setter>
            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="true">
                    <Setter Property="Control.FontStyle" Value="Italic"></Setter>
                    <Setter Property="Control.Foreground" Value="Red"></Setter>
                    <Setter Property="Control.Background" Value="Yellow"></Setter>
                </Trigger>
                <Trigger Property="Button.IsPressed" Value="true">
                    <Setter Property="Control.Foreground" Value="Green"></Setter>
                    <Setter Property="Control.Background" Value="Blue"></Setter>
                </Trigger>               
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Width="214" Style="{StaticResource NormalStyle}" Margin="158,134,131,132"Content="WPF Trigger Sample"></Button>
    </Grid>
</Window>
 
Run the application:
 
When MouseOver button will look like this.
 
Image1.JPG
  
Image 1
 
When Button Pressed.
 
Image2.JPG
 
Image 2

Multi Trigger Example.
 
Represents a trigger that applies property values or performs actions when a set of conditions are satisfied.
 
<Window x:Class="WpfTriggerExample.MultiTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MultiTriggerSample" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="NormalStyle">
            <Setter Property="Control.FontSize" Value="20"></Setter>
            <Setter Property="Control.HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Control.Margin" Value="10"></Setter>
            <Setter Property="Control.Foreground" Value="Black"></Setter>
            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="true">
                    <Setter Property="Control.FontStyle" Value="Italic"></Setter>
                    <Setter Property="Control.Foreground" Value="Red"></Setter>
                    <Setter Property="Control.Background" Value="Yellow"></Setter>
                </Trigger>               
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Control.IsMouseOver" Value="true"></Condition>
                        <Condition Property="Button.IsPressed" Value="false"></Condition>
                    </MultiTrigger.Conditions>
                    <Setter Property="Control.FontStyle" Value="Italic"></Setter>
                    <Setter Property="Control.Foreground" Value="Red"></Setter>
                    <Setter Property="Control.Background" Value="Yellow"></Setter>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>       
        <Button Style="{StaticResource NormalStyle}" Content="WPF Multi Trigger Sample"Height="50" HorizontalAlignment="Left" Margin="12,84,0,0" Name="button1"VerticalAlignment="Top" Width="243" />
    </Grid>
</Window>

 
Image3.JPG
 
Image 3

Data Trigger Example:
 
Represents a trigger that applies property values or performs actions when the bound data meets a specified condition.
 
<Window x:Class="WpfTriggerExample.DataTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataTriggerSample" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Control.FontSize" Value="20"></Setter>
            <Setter Property="Control.HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Control.Margin" Value="10"></Setter>
            <Setter Property="Control.Foreground" Value="Black"></Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=textBox1, Path=Text.Length}"Value="0">
                    <Setter Property="IsEnabled" Value="False"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>       
        <Button Content="WPF Data Trigger Style" Height="50" HorizontalAlignment="Left"Margin="12,84,0,0" Name="button1" VerticalAlignment="Top" Width="243" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="71,36,0,0"Name="textBox1" VerticalAlignment="Top" Width="120" />
    </Grid>
</Window>

 
Image4.JPG
 
Image 4

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.