zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [哀悼雅安芦山地震]把网页由彩色变成灰度(谷歌、火狐、ie等浏览器兼容)
    hdu 3367 Pseudoforest(最大生成树)
    解决MDK4以上版本没法对STM32软件仿真
    [置顶] java高级工程师struts的内部运行机制详解
    hdu 2141 二分搜索
    windows调试器之Visual C++
    2013年4月19日佳都新太笔试题+解答
    一步步理解Linux进程(3)内核中进程的实现
    什么是你的核心竞争力之一?
    ubuntu创建桌面启动器
  • 原文地址:https://www.cnblogs.com/huaci/p/4422165.html
Copyright © 2011-2022 走看看