Sliverlight之 控件模板

1，控件模板 (见Project22)

(1) 什么是控件模板，查中文帮助

说明：
当控件自身属性已经无法达到你对控件外观设置的要求时（比如将按钮作成圆形）,此时控件模板
就发挥了很大的作用

使用:

<控件.Template>
    <ControlTemplate>你的内容...</ControlTemplate>
</控件.Template>

 

 

 (2) 控件模板与属性，样式，三者有哪些区别

说明：
属性：如控件的Width,Height等对控件外观等方面的一些设置
样式：它实际就是对属性的设置，将其按不同的作用域大小的方式将属性设置更灵活方便
控件模板：它可以将控件的外观变的更复杂。此外，也可以将控件模板作为一个Property，定义在Style样式里

 

(3) 将一个按钮，做成一个色块和文字的外观，再更改按钮的Content属性，发现什么问题，如何解决(用到TemplateBinding)

说明：

使用ControlTemplate来自定义控件的外观

<Button.Template>
    <ControlTemplate>
        <StackPanel Orientation="Horizontal">
            <Rectangle Width="20" Height="20" Fill="Red" />
            <TextBlock Text="OK" />
        </StackPanel>
    </ControlTemplate>
</Button.Template>        

 

问题：更改Button的Content值，失效
解决：使用TemplateBinding绑定Content
<TextBlock Text="{TemplateBinding Button.Content}" />

 

(4) 把（2）中的示例改成作用于页面级的控件模板

说明：

定义样式

<UserControl.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="20" Height="20" Fill="Red"/>
                            <TextBlock Text="{TemplateBinding Button.Content}" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>                
            </Setter>
        </Style>
</UserControl.Resources>   

 

应用样式

<Button Style="{StaticResource ButtonStyle1}"

 

 

 (5) 把 (3) 中的示例，改成作用于全局的控件模板

说明：把上面(4)中的样式，Copy到App.xaml中，即可

 

(6) 什么是视觉状态管理

说明：
视觉状态管理英文名是VisualStateManager,简称VSM.它可以表示出控件感知效果,比如Mouseover,Pressed等状态
下的动画效果
它一般被定义在控件的ControlTemplate中

使用格式：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>    <!--可选的-->
        <VisualState x:Name="MouseOver">    <!--视觉状态-->
            <StoryBoard />    <!--感知效果：定义动画-->
        </VisualState>    
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

 

解释：
VisualStateGroup标签，是将一些具有相同特性的VisualState组织在一起

 

 

(7) 以按钮为例，说明VSM的内容

说明：

可以通过VSM来设置它不同状态下的感知效果

可以将按钮的状态分成两组

第1组状态

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal" />
    <VisualState x:Name="MouseOver" />
    <VisualState x:Name="Pressed" />
    <VisualState x:Name="Disabled" />    
</VisualStateGroup>

 

第2组状态

<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Focused" />
    <VisualState x:Name="Unfocused" />
</VisualStateGroup>

 

 

(8) 什么是视觉状态迁移

说明：
视频状态迁移标签是VisualTransition
它表示控件从一种状态进入另一种状态，它所需要的时间间隔，以及中间会有哪些效果

使用格式：

<VisualStateGroup>
    <VisualStateGroup.Transitions>
        <!-- 指定该按钮应经过百分之一秒才从按下状态进入鼠标悬停状态-->
        <VisualTransition  From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.01" />
    </VisualStateGroup.Transitions>
    <VisualState x:Name="Normal"/>
</VisualStateGroup>