Wp8.1 UI programming II. Style and template

1. Each control has a resource attribute. If you place the style in this resource, it can be used as a static resource for the control under the visualization tree. If it is defined on a page, the entire page can be used, and the entire application can be used.

The targettype attribute of style does not have to be consistent with the control class using this style. You can set it as its parent class. For example, setting it to frameworkelement can also be used by textblock.

To implement style inheritance, you only need to set its basedon attribute.

Style can be dynamically created and set in programming mode.

The style cannot be modified after it is applied. To change the style of the control that has applied the style, you must set it to another style.

Style can be separately written in a XAML file, for example:

<Resourcedictionary xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"> <! -- Style can be written here --> </resourcedictionary>

To add the required style, you only need to add it under the relevant resources attributes:

<Resourcedictionary> <resourcedictionary. mergeddictionaries> <resourcedictionary source = "style XAML Uri"/> </resourcedictionary. mergeddictionaries> </resourcedictionary>

System topic resources are available in: C: \ Program Files (x86) \ microsoft sdks \ Windows Phone \ v8.1 \ Design

How to implement simple custom/Multi-topic?

The topic resources of WP can be dynamically modified in the Code and can be directly modified.

 

2. templates are divided into controltemplate and datatemplate.

Controltemplate can customize the layout and content of the control by modifying the visual tree structure of the control. You only need to assign the declared controltemplate object to the template attribute of the control.

You can use the templatebinding syntax to associate the element attributes in controltemplate with the attributes of the control.

 

Controlpresenter is used to display the content attributes of contentcontrol and its sub-classes (such as button. The content attribute is of the object type.

After the content attribute is defined, it is projected to the content attribute of controlpresenter to display the content.

The following is an example. The code is directly copied, and there is a lot of nonsense.

<Button >                    <Button.Template>                        <ControlTemplate >                            <Grid>                                <Ellipse Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Control.Height}"                                                 Fill="{TemplateBinding Button.Background}" Stroke="Red"/>                                <TextBlock Margin="5,0,0,0" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center"                                                Text="{TemplateBinding Button.Content}" />                                <TextBlock FontSize="50" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center"                                                Text="{TemplateBinding Button.Content}" />                                <ContentPresenter  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>                            </Grid>                        </ControlTemplate>                    </Button.Template>                    <Button.Content>                        <Rectangle Fill="Red" Height="50" Width="50"></Rectangle>                    </Button.Content>                </Button>

Visualstatesmanager can manage the visual status of controls (such as the visual effect of button-based clicks ).

Set the visualstatesmanager. visualstategroups attribute on the control to add a visual status group.

Visualstate: Specifies the visual State (for example, the default state of a button includes normal, Mouseover, and so on.

Visualstategroup. transitions: Optional.

Example:

<Visualstatemanager. visualstategroups> <visualstategroup X: Name = "commonstates"> <visualstategroup. transitions> <! -- State test1 to state Test2 color change animation --> <visualtransition from = "test1" to = "Test2" generatedduration =. 5 "> <storyboard> <coloranimationusingkeyframes storyboard. targetproperty = "color" storyboard. targetname = "borderbrush" fillbehavior = "holdend"> <coloranimationusingkeyframes. keyframes> <linearcolorkeyframe value = "blue" keytime = "0: 0. 5 "/> <linearcolorkeyframe value =" yellow "keytime =" "/> <linearcolo Rkeyframe value = "black" keytime =. 5 "/> </coloranimationusingkeyframes. keyframes> </coloranimationusingkeyframes> </storyboard> </visualtransition> </visualstategroup. transitions> <! -- Create status test1 and change the border background color to red --> <visualstate X: Name = "test1"> <storyboard> <coloranimation storyboard. targetname = "borderbrush" storyboard. targetproperty = "color" to = "red"/> </storyboard> </visualstate> <! -- Create status Test2 and change the border background color to blue --> <visualstate X: Name = "Test2"> <storyboard> <coloranimation storyboard. targetname = "borderbrush" storyboard. targetproperty = "color" to = "blue"/> </storyboard> </visualstate> </visualstategroup> </visualstatemanager. visualstategroups>

Use the visualstatesmanager. gotostate method in related events.

 

Datatemplate is used to describe the visual style of data objects. It usually needs to work with controltemplate to complete some work. Use the binding syntax to associate the attributes of the bound data object.

 

The contentcontrol class is the base class of the content control. All content controls have content attributes, such as button;

The itemscontrol class is the base class of the list control. List controls, such as ListBox.

Contentcontrol is a single item and itemscontrol is multiple items.

The controltemplate attribute of the control inherited from contentcontrol and the itemtemplate attribute of the control inherited from itemscontrol. Its type is datatemplate.

Datatemplate is often used as a static resource as a style for multiple controls.

The datatemplate of itemscontrol is directly projected on itemspresenter. When controltemplate is defined, the internal itemspresenter is the datatemplate.

 

How can I replace complicated custom themes? Dynamically read the emplate of the change control.

Wp8.1 UI programming II. Style and template