码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-10-14 23:57:49      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   使用   ar   

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 SDKs\Windows Phone\v8.1\Design

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

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就可以了。

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

标签:des   style   blog   http   color   io   os   使用   ar   

原文地址:http://www.cnblogs.com/wylz/p/4014805.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!