Sliverlight's control template

1, control template (see PROJECT22)

(1) What is a control template, check Chinese help

Description
When the control's own properties are already unable to meet the requirements for your control's appearance settings (such as making the button rounded), the control template
Has played a big part in it.

Use:

< control. Template>    <ControlTemplate> your content ... </ ControlTemplate > </ control. Template>

(2) What is the difference between a control template and a property, a style, and a three-person

Description
Properties: Some settings such as the width,height of a control, such as the appearance of a control
Style: It is actually the setting of the property, it is more flexible and convenient to set the property by different scope size
Control Template: It can make the appearance of a control more complex. In addition, you can define a control template as a property in the style style

(3) A button to make a color block and the appearance of text, and then change the content properties of the button, find out what problem, how to solve (use to TemplateBinding)

Description

Using ControlTemplate to customize the appearance of a control

<button.template>    <ControlTemplate>        <StackPanelOrientation= "Horizontal">            <RectangleWidth= " the"Height= " the"Fill= "Red" />            <TextBlockText= "OK" />        </StackPanel>    </ControlTemplate></button.template>        

Issue: Changing the content value of the button, invalidation
FIX: Use TemplateBinding to bind content
<textblock text= "{TemplateBinding button.content}"/>

(4) Change the example in (2) to a control template that acts on the page level

Description

Defining styles

<usercontrol.resources>        <Stylex:key= "ButtonStyle1"TargetType= "button">            <Setter Property= "Template">                <Setter.value>                    <ControlTemplate>                        <StackPanelOrientation= "Horizontal">                            <RectangleWidth= " the"Height= " the"Fill= "Red"/>                            <TextBlockText="{TemplateBinding Button.content}" />                        </StackPanel>                    </ControlTemplate>                </Setter.value>                            </Setter>        </Style></usercontrol.resources>   

Apply Styles

<Style= "{StaticResource ButtonStyle1}"

(5) Change the example in (3) to a control template that acts on the global

Note: The above (4) in the style, copy to App.xaml, you can

(6) What is visual state management

Description
Visual state Management The English name is VisualStateManager, referred to as VSM. It can indicate control-aware effects, such as mouseover,pressed states
The animation effect under
It is generally defined in the ControlTemplate of the control

Use format:

<visualstatemanager.visualstategroups>    <VisualStateGroup>    <!--an optional -        <VisualStatex:name= "MouseOver">    <!--Visual State -            <StoryBoard/>    <!--perceptual Effects: Defining animations -        </VisualState>        </VisualStateGroup></visualstatemanager.visualstategroups>

Explain:
The VisualStateGroup tag is to organize some visualstate with the same characteristics

(7) Take the button as an example to explain the contents of the VSM

Description

It can be used to set the perceptual effect in different states by VSM.

You can divide the state of a button into two groups

1th Group Status

<VisualStateGroupx:name= "CommonStates">    <VisualStatex:name= "Normal" />    <VisualStatex:name= "MouseOver" />    <VisualStatex:name= "Pressed" />    <VisualStatex:name= "Disabled" />    </VisualStateGroup>

2nd Group Status

<x:name= "focusstates">    <x:name  = "Focused"/>    <x:name= "unfocused"  /></visualstategroup>

(8) What is visual State migration

Description
The video Status Migration label is VisualTransition
It represents how the control enters another state from one state, the time interval it takes, and what effect it will have in the middle.

Use format:

<VisualStateGroup>    <visualstategroup.transitions>        <!--Specifies that the button should take 1% seconds to enter the mouse hover state from the pressed state -        <visualtransition from= "Pressed" to= "MouseOver"generatedduration= "0:0:0.01" />    </visualstategroup.transitions>    <VisualStatex:name= "Normal"/></VisualStateGroup>

Sliverlight's control template