Winrt: Experience controltemplate-define a simple button control Template

 

It is just a simple button control template. However, color changes are gradient. The foreground, background, and border settings are the same as normal buttons. When the mouse points to a high-brightness color, the color after clicking is false and the color of isenabled can be defined in btnpressed by modifying the XAML resource, btnhighlighted and btndisabled resources. When the value of button. isenabled is false, the background changes to transparent, and the foreground and borderbrush are set to btndisabled resource-defined colors.

 

You can modify the color gradient time by modifying the generatedduration attribute of visualtransition in visualstategroup. transitions.

 

In general, the control template in winrt is similar to wpf4 (there were many differences with wpf4 before, and there was no visualstatemanager at that time) and Silverlight. However, there are also some small details. For example, in wpf4, both visualstategroup and visualstate have the name attribute. In Silverlight and winrt, X: name must be used. In WPF and Silverlight, the mouse pointing to the state name in commonstates of the button is Mouseover, but the name in winrt is pointerover. (Pointer fully covers the word "Mouse" in winrt, because winrt supports desktop and tablet frameworks, so pointer is used to represent any mouse or touch screen operations)

 

XAML code:

<! -- Required color definition -->

<Color x: Key = "btnpressed"> black </color>

<Color x: Key = "btnhighlighted"> gray </color>

<Color x: Key = "btndisabled"> gray </color>

 

<! -- Mybuttonstyle -->

<Style X: Key = "mybuttonstyle" targettype = "button">

<Setter property = "padding" value = "10"/>

<Setter property = "background" value = "Transparent"/>

<Setter property = "template">

<Setter. value>

<Controltemplate targettype = "button">

<Border background = "{templatebinding background }"

Borderbrush = "{templatebinding borderbrush }"

Borderthickness = "{templatebinding borderthickness }"

Name = "border">

<Contentpresenter margin = "{templatebinding padding}" name = "content"/>

 

<Visualstatemanager. visualstategroups>

<Visualstategroup X: Name = "commonstates">

<Visualstate X: Name = "normal"/>

<Visualstate X: Name = "pointerover">

<Storyboard>

<Coloranimation storyboard. targetname = "border" storyboard. targetproperty = "(border. Background). (solidcolorbrush. Color )"

Duration = "0" to = "{staticresource btnhighlighted}"/>

</Storyboard>

</Visualstate>

<Visualstate X: Name = "pressed">

<Storyboard>

<Coloranimation storyboard. targetname = "border" storyboard. targetproperty = "(border. Background). (solidcolorbrush. Color )"

Duration = "0" to = "{staticresource btnpressed}"/>

</Storyboard>

</Visualstate>

<Visualstate X: Name = "disabled">

<Storyboard>

<Coloranimation storyboard. targetname = "border" storyboard. targetproperty = "(border. Background). (solidcolorbrush. Color )"

Duration = "0" to = "Transparent"/>

<Coloranimation storyboard. targetname = "border" storyboard. targetproperty = "(border. borderbrush). (solidcolorbrush. Color )"

Duration = "0" to = "{staticresource btndisabled}"/>

<Coloranimation storyboard. targetname = "content" storyboard. targetproperty = "(contentcontrol. foreground). (solidcolorbrush. Color )"

Duration = "0" to = "{staticresource btndisabled}"/>

</Storyboard>

</Visualstate>

<Visualstategroup. transitions>

<Visualtransition generatedduration = "0: 0. 5"/>

</Visualstategroup. transitions>

</Visualstategroup>

</Visualstatemanager. visualstategroups>

</Border>

</Controltemplate>

</Setter. value>

</Setter>

</Style>