WPF: defines the validation. errortemplate template of the control through visual state.

Before. Net 4.0, the validation error template that defines data binding can only append attributes through validation. errortemplate. The specific template definition is also uncomfortable. In general, it is to define a controltemplate without targettype, and then add adornedelementplaceholder to the template. The template is displayed in the modifier layer, so the control layout settings are limited.

 

In. Net 4.0, a visual state (visual State) was introduced for support. This concept existed in Silverlight 3 and was later added to WPF.

 

We define a textbox error template. When a data binding verification error occurs, the error message is animated:

 

When no error occurs, the error message on textbox disappears:

 

In the visualstategroups of Textbox, validationstates indicates the visualization status of the data verification type. Among them, valid, invalidfocused and invalidunfocused indicate "correct", "error (with focus)", and "error (without focus. (For more information, see msdn: http://msdn.microsoft.com/en-us/library/ms752068 (V = vs.100). aspx)

 

Procedure:

1. Define all fixed elements in controltemplate, and add the name attribute if necessary so that the storyboard can control it.
2. Use visualstatemanager to define the specific visualstategroup name and visualstate name.
3. Add storyboard to the visualstate. It is best to set the duration to 0. Because it only indicates the absolute State.
4. If necessary, add visual changes to the visualstategroup: visualtransition.
5. If necessary, set the Custom Animation of visualtransition, or directly use the automatically generated animation (set generatedduration ).

 

In addition, visualtransition also supports the easing function animation type.

 

The following style code:

<Style targettype = "textbox">

<Setter property = "borderbrush" value = "Navy"/>

<Setter property = "borderthickness" value = "2"/>

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

<Setter property = "foreground" value = "black"/>

<Setter property = "template">

<Setter. value>

<Controltemplate targettype = "textbox">

<Border>

<Visualstatemanager. visualstategroups>

<! -- Visualstategroup -->

<Visualstategroup name = "validationstates">

<! -- Transformation of visualstate -->

<Visualstategroup. transitions>

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

</Visualstategroup. transitions>

<! -- Visualstate -->

<Visualstate name = "valid">

<Storyboard>

<Doubleanimation storyboard. targetname = "errborder"

Storyboard. targetproperty = "height"

Duration = "0: 0"

To = "0"/>

</Storyboard>

</Visualstate>

<Visualstate name = "invalidfocused">

<Storyboard>

<Doubleanimation storyboard. targetname = "errborder"

Storyboard. targetproperty = "height"

Duration = "0: 0"

To = "30"/>

</Storyboard>

</Visualstate>

</Visualstategroup>

</Visualstatemanager. visualstategroups>

<Dockpanel>

<Border name = "errborder"

Borderbrush = "red"

Borderthickness = "2"

Cornerradius = "5"

Padding = "{templatebinding padding }"

Margin = "0, 0, 0, 5"

Height = "0"

Dockpanel. Dock = "TOP">

<Textblock name = "TBL"

TEXT = "{binding (validation. Errors) [0]. errorcontent, relativesource = {relativesource mode = templatedparent}"/>

</Border>

<Border borderbrush = "{templatebinding borderbrush }"

Borderthickness = "{templatebinding borderthickness }"

Cornerradius = "5"

Background = "{templatebinding background }"

Padding = "{templatebinding padding}">

<Scrollviewer name = "part_contenthost"/>

</Border>

</Dockpanel>

</Border>

</Controltemplate>

</Setter. value>

</Setter>

</Style>