WPF Styles And Triggers Functions Tutorial with Example

StylesConsultancy And Triggers iFour

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Styles

❑

❏

❏ ❏

❏

❏ ❏

The .NET framework provides several strategies to personalize and customize the appearance of an application.

Style gives uniformity to our application and improves user UI experience.

Styles provide us the flexibility to set some properties of an object and reuse these specific settings across multiple objects for a consistent look.

In styles, you can set only the existing properties of an object such as Height, Width, Font size, etc.

Only default behavior of a control can be specified.

Multiple properties can be added into a single style.

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Scenario

❑











As you can see in first image, Width and Height properties of each button is set.

It is tedious to set property of each button like this to maintain uniformity.

And this is not the case only for buttons as there will be many more elements. It is not feasible to give style like this.

Rather what we can do is, declare a style for particular element by setting properties of that control. Just like it is done in second image.

Sounds more efficient. Right? Let’s see an example.

https://www.ifourtechnolab.com/dedicated-remote-softwaredevelopers/hire-remote-wpf-application-developer

â?‘

Example

<Window x:Class = "XAMLStyle.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:XAMLStyle" mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> <Window.Resources> <Style x:Key = "myButtonStyle" TargetType = "Button"> <Setter Property = "Height" Value = "30" /> <Setter Property = "Width" Value = "80" /> <Setter Property = "Foreground" Value = "Blue" /> <Setter Property = "FontSize" Value = "12" /> <Setter Property = "Margin" Value = "10" /> </Style> </Window.Resources> <StackPanel> <Button Content = "Button1" Style = "{StaticResource myButtonStyle}" /> <Button Content = "Button2" Style = "{StaticResource myButtonStyle}" /> <Button Content = "Button3" Style="{StaticResource myButtonStyle}" /> </StackPanel>

</Window>

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

❑

Explanation

 Styles are defined in the resource dictionary and each style has a unique key identifier and a target type.

 Inside <style> you can see that multiple setter tags are defined for each property which will be included in the style.  All of the common properties of each button are now defined in style and then the style are assigned to

each button with a unique key by setting the style property through the StaticResource markup extension.  The advantage of doing it like this is immediately obvious, we can reuse that style anywhere in its scope; and if we need to change it, we simply change it once in the style definition instead of on each element.

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Style Levels

â?&#x2018;

Sr.No

Levels & Description

1

Control Level Defining a style on control level can only be applied to that particular control. Given below is an example of a control level where the button and TextBlock have their own style.

2

Layout Level Defining a style on any layout level will make it accessible by that layout and its child elements only.

3

Window Level Defining a style on a window level can make it accessible by all the elements on that window.

4

Application Level Defining a style on app level can make it accessible throughout the entire application. Letâ&#x20AC;&#x2122;s take the same example, but here, we will put the styles in app.xaml file to make it accessible throughout application.

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Triggers   



A trigger basically enables you to change property values or take actions based on the value of a property.

So, it allows you to dynamically change the appearance and/or behavior of your control without having to create a new one.

Triggers are used to change the value of any given property, when certain conditions are satisfied.

Triggers are usually defined in a style or in the root of a document which are applied to that specific control.

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Types Of Triggers 

There are three types of triggers  

Property Triggers Data Triggers Event Triggers

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Property Triggers ď ą In property triggers, when a change occurs in one property, it will bring either an immediate or an animated change in another

property. ď ą For example, you can use a property trigger to change the appearance of a button when the mouse hovers over the button. <Window x:Class = "WPFPropertyTriggers.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "604"> <Window.Resources> <Style x:Key = "TriggerStyle" TargetType = "Button"> <Setter Property = "Foreground" Value = "Blue" /> <Style.Triggers> <Trigger Property = "IsMouseOver" Value = "True"> <Setter Property = "Foreground" Value = "Green" /> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}" Content = "Trigger"/> </Grid> </Window>

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Data Triggers  A data trigger performs some actions when the bound data satisfies some conditions.  For example, There is checkbox and label. When the checkbox is checked, it will change label’s foreground color to red. <Window x:Class = "WPFDataTrigger.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "Data Trigger" Height = "350" Width = "604"> <StackPanel HorizontalAlignment = "Center"> <CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/> <TextBlock Name = "txtblock" VerticalAlignment = "Center" Text = "Event Trigger" FontSize = "24" Margin = "20"> <TextBlock.Style> <Style> <Style.Triggers> <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}" Value = "true"> <Setter Property = "TextBlock.Foreground" Value = "Red"/> <Setter Property = "TextBlock.Cursor" Value = "Hand" /> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> </StackPanel> </Window>

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Event Triggers  A data trigger performs some actions when the bound data satisfies some conditions.  For example, There is checkbox and label. When the checkbox is checked, it will change label’s foreground color to red. <Window x:Class = "WPFEventTrigger.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "604"> <Grid> <Button Content = "Click Me" Width = "60" Height = "30"> <Button.Triggers> <EventTrigger RoutedEvent = "Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4"> <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/> <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/> <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/> <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4"> <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/> <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/> <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/> <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/> </DoubleAnimationUsingKeyFrames>

</Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> </Grid> </Window>

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

Thank You Contact Us on: Facebook:

https://www.facebook.com/ifourtechnolab/

Twitter:

https://twitter.com/consultifour

Linkedin:

https://www.linkedin.com/company/ifourtechnolab

YouTube:

https://www.youtube.com/channel/UCXGOj7M361sk4OoqqcqEs1g

Instagram:

https://www.instagram.com/ifourtechnolab/

Pinterest:

https://www.pinterest.com/i4technolab/

iFour Institute:

https://www.youtube.com/channel/UC-39KmiE_aFMq2BCGh_RXJg

https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer