WP8.1 UI 编程 二、样式和模板

1. 每个控件都有一个Resources属性，把样式放在这个Resources里，就可以作为静态资源给这个控件的可视化树下的控件使用。如果定义在Page上，则整个页面都可以使用；同样Application上整个App都可以使用。

Style的TargetType属性不一定要和使用这个样式的控件类保持一致，可以设置为它的父类。例如，设置为FrameworkElement也可以被TextBlock使用。

要Style实现继承，只需设置它的BasedOn属性。

Style可以以编程方式动态创建和设置。

Style应用后就无法修改，要更改已应用样式的控件的样式，必须设置为另一个样式。

Style可以单独写在XAML文件里，如：

<ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--这里就可以写Style了-->
</ResourceDictionary>

要添加所需的Style，只需在相关Resources属性下添加：

<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="样式XAML的URI"/>
            </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

系统主题资源在：C:Program Files (x86)Microsoft SDKsWindows Phonev8.1Design

如何实现简单的自定义/多主题？

WP的主题资源是可以在代码中动态修改的，直接修改就可以实现。

2. 模板分为ControlTemplate和DataTemplate。

ControlTemplate可以通过修改控件内部的可视化树结构，来完成定制控件内部的布局和内容。只需将声明的ControlTemplate对象赋值给控件的Template属性。

使用TemplateBinding语法可以将ControlTemplate中的元素属性与控件本身的属性关联。

ControlPresenter，用来显示ContentControl及其子类（如Button）的Content属性。Content属性是object类型。

当定义了Content属性后，把它投影到ControlPresenter的Content属性，就可以显示Content内容了。

下面是例子，代码直接复制的，废话比较多。

<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可管理控件的视觉状态（比如Button点按的视觉效果）。

在控件上设置VisualStatesManager.VisualStateGroups属性来添加视觉状态组。

VisualState：视觉状态（如Button默认就包括Normal、MouseOver等6种状态），主要使用它来自定义。

VisualStateGroup.Transitions：切换视觉状态的过渡动画，可选。

示例：

<VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <!--状态Test1转化为状态Test2的颜色变化动画-->
                                            <VisualTransition From="Test1" To="Test2" GeneratedDuration="0:0:1.5">
                                                <Storyboard>
                                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="BorderBrush" FillBehavior="HoldEnd" >
                                                        <ColorAnimationUsingKeyFrames.KeyFrames>
                                                            <LinearColorKeyFrame Value="Blue" KeyTime="0:0:0.5" />
                                                            <LinearColorKeyFrame Value="Yellow" KeyTime="0:0:1" />
                                                            <LinearColorKeyFrame Value="Black" KeyTime="0:0:1.5" />
                                                        </ColorAnimationUsingKeyFrames.KeyFrames>
                                                    </ColorAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                        <!--创建状态Test1，把Border背景的颜色改成红色-->
                                        <VisualState x:Name="Test1">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Red" />
                                            </Storyboard>
                                        </VisualState>
                                        <!--创建状态Test2把Border背景的颜色改成蓝色-->
                                        <VisualState x:Name="Test2">
                                            <Storyboard >
                                                <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Blue" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>

然后在相关事件中使用VisualStatesManager.GoToState方法。

DataTemplate用于描述数据对象的视觉样式，通常需要与ControlTemplate合作来完成一些工作。要关联绑定数据对象的属性，使用Binding语法。

ContentControl类是内容控件的基类。内容控件都具有Content属性，如Button；

ItemsControl类是列表控件的基类。列表控件，如ListBox。

ContentControl是单项的，ItemsControl是多项的。

继承自ContentControl的控件的ControlTemplate属性，和继承自ItemsControl的控件的ItemTemplate属性，其类型都是DataTemplate。

DataTemplate经常像Style那样，作为静态资源供多个控件来使用。

ItemsControl的DataTemplate是直接投影在ItemsPresenter上的，在定义ControlTemplate时，内部的ItemsPresenter就是DataTemplate。

如何实现更换复杂的自定义主题？动态读取更换控件的DataTemplate就可以了。