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

Sliverlight之 控件模板

时间:2015-04-13 16:22:59      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

Sliverlight之 控件模板

标签:

原文地址:http://www.cnblogs.com/huaci/p/4422165.html

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