WPF Styles And Triggers Functions Tutorial with Example - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

WPF Styles And Triggers Functions Tutorial with Example

Description:

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. – PowerPoint PPT presentation

Number of Views:5

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com