WPF Styles And Triggers Functions Tutorial with Example

1
iFour Consultancy
https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
2
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-so
ftware-developers/hire-remote-wpf-application-deve
loper
3
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? Lets see an
  example.

https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
4
Example
ltWindow xClass "XAMLStyle.MainWindow"
xmlns "http//schemas.microsoft.com/winfx/2006/x
aml/presentation" xmlnsx
"http//schemas.microsoft.com/winfx/2006/xaml"
xmlnsd "http//schemas.microsoft.com/expressio
n/blend/2008" xmlnsmc "http//schemas.openx
mlformats.org/markup-compatibility/2006"
xmlnslocal "clr-namespaceXAMLStyle"
mcIgnorable "d" Title "MainWindow" Height
"350" Width "604"gt ltWindow.Resourcesgt
ltStyle xKey "myButtonStyle" TargetType
"Button"gt ltSetter Property "Height"
Value "30" /gt ltSetter Property
"Width" Value "80" /gt ltSetter
Property "Foreground" Value "Blue" /gt
ltSetter Property "FontSize" Value "12" /gt
ltSetter Property "Margin" Value "10"
/gt lt/Stylegt lt/Window.Resourcesgt
ltStackPanelgt ltButton Content "Button1"
Style "StaticResource myButtonStyle" /gt
ltButton Content "Button2" Style
"StaticResource myButtonStyle" /gt
ltButton Content "Button3" Style"StaticResource
myButtonStyle" /gt lt/StackPanelgt
lt/Windowgt
https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
5
Explanation

• Styles are defined in the resource dictionary and
  each style has a unique key identifier and a
  target type.
• Inside ltstylegt 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-so
ftware-developers/hire-remote-wpf-application-deve
loper
6
Style Levels
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. Lets 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-so
ftware-developers/hire-remote-wpf-application-deve
loper
7
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-so
ftware-developers/hire-remote-wpf-application-deve
loper
8
Types Of Triggers

• There are three types of triggers-
• Property Triggers
• Data Triggers
• Event Triggers

https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
9
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.
• ltWindow xClass "WPFPropertyTriggers.MainWindow"
  
• xmlns "http//schemas.microsoft.com/winfx/200
  6/xaml/presentation"
• xmlnsx "http//schemas.microsoft.com/winfx/2
  006/xaml"
• Title "MainWindow" Height "350" Width
  "604"gt
• ltWindow.Resourcesgt
• ltStyle xKey "TriggerStyle" TargetType
  "Button"gt
• ltSetter Property "Foreground" Value
  "Blue" /gt
• ltStyle.Triggersgt

https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
10
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 labels
  foreground color to red.
• ltWindow xClass "WPFDataTrigger.MainWindow"
• xmlns "http//schemas.microsoft.com/winfx/200
  6/xaml/presentation"
• xmlnsx "http//schemas.microsoft.com/winfx/2
  006/xaml"
• Title "Data Trigger" Height "350" Width
  "604"gt
• ltStackPanel HorizontalAlignment "Center"gt

https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
11
Event Triggers

• A data trigger performs some actions when the
  bound data satisfies some conditions.

lt/DoubleAnimationUsingKeyFramesgt ltDoubleAnimation
UsingKeyFrames Storyboard.TargetProperty
"Height" Duration
"004"gt
ltLinearDoubleKeyFrame Value "30" KeyTime
"000"/gt
ltLinearDoubleKeyFrame Value "40" KeyTime
"001"/gt
ltLinearDoubleKeyFrame Value "80" KeyTime
"002"/gt
ltLinearDoubleKeyFrame Value "150" KeyTime
"003"/gt
lt/DoubleAnimationUsingKeyFramesgt
lt/Storyboardgt
lt/BeginStoryboardgt
lt/EventTrigger.Actionsgt
lt/EventTriggergt lt/Button.Triggersgt
lt/Buttongt lt/Gridgt lt/Windowgt
https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper
12

• Thank You

Contact Us
on Facebook https//www.facebook.com/ifourtech
nolab/ Twitter https//twitter.com/consultifou
r Linkedin https//www.linkedin.com/company/if
ourtechnolab YouTube https//www.youtube.com/c
hannel/UCXGOj7M361sk4OoqqcqEs1g Instagram
https//www.instagram.com/ifourtechnolab/ Pinter
est https//www.pinterest.com/i4technolab/ iFo
ur Institute https//www.youtube.com/channel/UC-
39KmiE_aFMq2BCGh_RXJg
https//www.ifourtechnolab.com/dedicated-remote-so
ftware-developers/hire-remote-wpf-application-deve
loper