1 / 12

WPF Styles And Triggers Functions Tutorial with Example

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.

ifourtechnolab
Download Presentation

WPF Styles And Triggers Functions Tutorial with Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Styles And Triggers iFour Consultancy https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

  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-software-developers/hire-remote-wpf-application-developer

  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? Let’s see an example. https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

  4. 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 = "{StaticResourcemyButtonStyle}" /> <Button Content = "Button2" Style = "{StaticResourcemyButtonStyle}" /> <Button Content = "Button3" Style="{StaticResourcemyButtonStyle}" /> </StackPanel> </Window> https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

  5. 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

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

  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-software-developers/hire-remote-wpf-application-developer

  8. 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

  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. <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 = "{StaticResourceTriggerStyle}" Content = "Trigger"/> </Grid> </Window> https://www.ifourtechnolab.com/dedicated-remote-software-developers/hire-remote-wpf-application-developer

  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 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"> <StackPanelHorizontalAlignment = "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

  11. 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> <EventTriggerRoutedEvent = "Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFramesStoryboard.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> • <DoubleAnimationUsingKeyFramesStoryboard.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

  12. 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

More Related