The style "four" of WPF template templates

Source: Internet
Author: User

The style is literally literal and "style". For example, a person's style refers to the static appearance and behavior. The same person, if you stay flat, wear a football team shirt, pedal boots, it looks like a booming into stadium athlete, if you let him change a suit, put on leather boots, and then carry a briefcase, looks like a business person. In addition to judging a person's style from the static appearance, we also observe his behavioral characteristics. For example, when encountering difficulties, some people are very optimistic, so laughing. Some people are very cautious, careful analysis of the problem, some people are very pessimistic, all day sighing sigh, this is the behavior style, behavior style is reflected by the external stimulation of the reaction. When it comes to this, you can always think of a professional---actor. Actors play various roles by adjusting their static appearance and style of behavior.

If you think of a WPF form as a stage, the controls on the form are an actor whose job is to play their role in the user interface as required by the business logic. In order for the same control to take on different roles, programmers need to design a variety of appearance styles and behavioral actions for them, which is the style. The two most important elements of a style are setter and Trigger, setter classes help us set the static appearance style of the control, and Trigger help us set the style of the control's behavior.

Setter, set. What about the setup? That is, the property value. When we assign values to attributes, we generally take the form of attribute name = attribute value. The property attribute of the setter class is used to indicate which property of the property you want to assign a value to, and the Value property of the setter class is the one you provide.

Trigger, a trigger, which triggers a behavior when certain conditions are met (such as changes in some values or the occurrence of animations). Triggers compare like events. Events are typically triggered by user actions, and triggers are Trigger/DataTrigger and multi -conditional triggers in addition to the event-triggered eventtrigger of the data-change trigger MultiTrigger/Multidatatrigger and so on.


1. Basic Trigger


Trigger is the most basic trigger. Similar to Setter,trigger also has property and value two properties, property is the name of the attribute trigger concern, value is the trigger condition. Trigger also has a setters property, which is a set of setters that, once the trigger conditions are met, the "attribute---value" of the set of setters is applied, and when the trigger condition is not met, the value of each property is restored.
The following example is for the checkbox's style, which changes the foreground color and font when the checkbox's Ischeck property is true. The XAML code is as follows:

<window x:class= "wpfapplication11.wnd11521" xmlns= "http://schemas.microsoft.com /winfx/2006/xaml/presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "title=" wnd11521 "Heigh t= "Width=" > <Window.Resources> <style targettype= "{x:type CheckBox}" > <!--                    triggered when a single condition is met--<Style.Triggers> <trigger property= "IsChecked" value= "true" > <setter property= "FontSize" value= "></Setter> <setter property=" Foregrou nd "value=" Red "></Setter> </Trigger> </Style.Triggers> </style>    ; </Window.Resources> <StackPanel> <checkbox content= "Quietly I'm Gone" ></CheckBox> <check Box content= "As I quietly Come" ></CheckBox> <checkbox content= "I swing My sleeves" ></CheckBox> </StackPanel> </window> 


2. MultiTrigger


MultiTrigger is an easy-to-misunderstand name that can be thought of as multiple trigger integrated, actually called multiconditiontrigger more appropriate, because multiple conditions must be set up at the same time to be triggered. MultiTrigger has a conditions attribute more than trigger, and the conditions that need to be set up are placed in this set. Let's change the above example a little bit:

<window x:class= "wpfapplication11.wnd11522" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" title= "wnd11522" height= "$" width= "> <w" Indow. Resources> <style targettype= "{x:type CheckBox}" > <!--triggered when multiple conditions are met----<style.                        Triggers> <MultiTrigger> <MultiTrigger.Conditions> <condition property= "IsChecked" value= "true" ></Condition> <condition property= "Cont Ent "value=" as I quietly Come "></Condition> </MultiTrigger.Conditions> <sett Er property= "FontSize" value= "></Setter> <setter property=" Foreground "value=" Red "&GT;&L t;/setter> </MultiTrigger> </Style.Triggers> </Style> </window . Resources> &Lt Stackpanel> <checkbox content= "Quietly I'm Gone" ></CheckBox> <checkbox content= "As I quietly Come" ></che ckbox> <checkbox content= "I swing My sleeves" ></CheckBox> </StackPanel></Window>


3. Triggered by Data DataTrigger


The program often encounters certain judgments based on data execution, and in this case we can consider using DataTrigger. The binding property of the DataTrigger object will send the data continuously, and once the value sent out is the same as the property of the value, DataTrigger is triggered. In the following example, when the textbox's text length is less than 7 characters, its border will remain red. The XAML code is as follows:

<window x:class= "wpfapplication11.wnd11523" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "Clr-namespace:wpfapplication11" Ti Tle= "wnd11523" height= "width=" > <Window.Resources> <local:len2boolconvert x:key= "l2b" &GT;&L            T;/local:len2boolconvert> <!--data meets the conditions, triggers--<style targettype= "{x:type TextBox}" > <Style.Triggers> <datatrigger binding= "{Binding relativesource={x:static relativesource.self}, Pat H=text.length, Converter={staticresource l2b}} "value=" false "> <sett Er property= "borderbrush" value= "Red" ></Setter> <setter property= "borderthickness" value= "1 "></Setter> </DataTrigger> </Style.Triggers> </Style> </ Window.resources> &Lt Stackpanel> <textbox margin= "5" ></TextBox> <textbox margin= "5" ></TextBox> &L T;/stackpanel></window>
in order to use the control itself as a data source, we used RelativeSource, a beginner who often thought, "It is wrong to say that the value of the source binding will be the source of the data". Because the value of source is not explicitly stated, the DataContext of the control is used as its own data source. The path of the binding is set to Text.length, that is, the length of the string is our concern. Length is a specific number, how to judge based on this length value? This is the use of converter. We create the following converter:

<summary>///data length to bool type//</summary>public class len2boolconvert:ivalueconverter{public    Object Convert (object value, Type targetType, object parameter, CultureInfo culture)    {        int len = (int) value;        Return ((Len > 6)? ( true):(false));    }    public object Convertback (object value, Type targetType, object parameter, CultureInfo culture)    {        throw new Notim Plementedexception ();    }}
After converter conversion, the length value becomes the bool type value. When the text length of a textbox is less than 7 o'clock DataTrigger uses its own set of setters to set the TextBox's border to red. Operating effects such as:



4. Event-Triggered EventTrigger


EventTrigger is the most special one in a trigger. First, it is not triggered by an attribute value or a change in data, but by an event, and secondly, it does not apply a set of setters, but rather an animation. As a result, the animation effects of the UI are often associated with EventTrigger.
In the following example, create a style for the button, which contains two EventTrigger, one triggered by MouseEnter, and the other triggered by MouseLeave. The XAML code is as follows:

<window x:class= "wpfapplication11.wnd1524" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" title= "wnd1524" height= "width=" > <wind ow. Resources> <style targettype= "{x:type button}" > <!--Event Trigger--<style.triggers > <!--mouse Access--<eventtrigger routedevent= "MouseEnter" > < beginstoryboard> <Storyboard> <doubleanimation to= "Dura" tion= "0:0:0.2" storyboard.targetproperty= "Width"/> <doubleanimation to= "duration=" 0: 0:0.2 "storyboard.targetproperty=" Height "/> </Storyboard> </beginsto Ryboard> </EventTrigger> <!--mouse away-<eventtrigger Routedev Ent= "MouseLeave" >                   <BeginStoryboard> <Storyboard> <double Animation duration= "0:0:0.2" storyboard.targetproperty= "Width"/> <doubleanimation duratio N= "0:0:0.2" storyboard.targetproperty= "Height"/> </Storyboard> </beg instoryboard> </EventTrigger> </Style.Triggers> </Style> </win Dow. resources> <Canvas> <button width= "height=" ></Button> </canvas></window& Gt

Remind everyone: Although the use of triggers in the style, but the trigger is not only applied in the style-----The various template can also have their own triggers, you need to decide whether the trigger in style or template inside.

The style "four" of WPF template templates

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.