Silverlight 外观之样式, 模板, 视觉状态和视觉状态管理器

概述示例 1、样式(App.xaml) <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                         示例
1、样式(App.xaml) <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
                         x:Class="Silverlight20.App"
                         >
        <Application.Resources>
        
                <!--全局样式 - 任何地方都可引用-->
                <!--
                Style - 自定义样式资源。用于修改控件的样式。各个控件的默认样式可参见文档
                        x:Key - 唯一标识
                        targettype - 目标对象类型
                        Setter - 属性设置器
                                Property - 需要设置的属性名称
                                Value - 需要设置的属性值
                -->
                <Style x:Key="styleTestApp" targettype="TextBox">
                        <Setter Property="FontSize" Value="24"/>
                        <Setter Property="Foreground" Value="#0000FF"/>
                </Style>

        </Application.Resources>
</Application>     样式(Style.xaml) <UserControl x:Class="Silverlight20.Appearance.Style"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <StackPanel HorizontalAlignment="left">
        
                <StackPanel.Resources>
                
                        <!--容器内样式 - 所属容器内可引用-->
                        <!--
                        Style - 自定义样式资源。用于修改控件的样式。各个控件的默认样式可参见文档
                                x:Key - 唯一标识
                                targettype - 目标对象类型
                                Setter - 属性设置器
                                        Property - 需要设置的属性名称
                                        Value - 需要设置的属性值
                        -->
                        <Style x:Key="styleTestInContainer" targettype="TextBox">
                                <Setter Property="FontSize" Value="24"/>
                                <Setter Property="Foreground" Value="#00FF00"/>
                        </Style>
                        
                </StackPanel.Resources>


                <!--全局样式的应用-->
                <TextBox Text="我是TextBox（全局样式的应用）" margin="5" Style="{StaticResource styleTestApp}" />

                <!--容器内样式的应用-->
                <TextBox Text="我是TextBox（容器内样式的应用）" margin="5" Style="{StaticResource styleTestInContainer}" />
                
                <!--内联样式的应用。内联样式优先级高于全局样式和容器内样式-->
                <TextBox Text="我是TextBox（内连样式的应用）" margin="5" Foreground="#FF0000"    Style="{StaticResource styleTestInContainer}" />
                
        </StackPanel>
</UserControl>     2、模板(App.xaml) <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
                         x:Class="Silverlight20.App"
                         >
        <Application.Resources>
        
                <!--全局模板 - 任何地方都可引用-->
                <!--
                ControlTemplate - 自定义控件模板。用于修改控件的外观。各个控件的默认模板可参见文档
                        x:Key - 唯一标识
                        targettype - 目标对象类型
                ContentPresenter - 用于显示继承自 System.windows.Controls.ContentControl 的控件的内容
                TemplateBinding - 绑定到所指定的属性名称
                -->
                <ControlTemplate x:Key="templateTestApp" targettype="button">
                        <border borderBrush="Red" borderThickness="1">
                                <GrID Background="{TemplateBinding Background}">
                                        <ContentPresenter HorizontalAlignment="Right" />
                                </GrID>
                        </border>
                </ControlTemplate>

        </Application.Resources>
</Application>     模板(Template.xaml) <UserControl x:Class="Silverlight20.Appearance.Template"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <StackPanel HorizontalAlignment="left">

                <StackPanel.Resources>

                        <!--容器内模板 - 所属容器内可引用-->
                        <!--
                        ControlTemplate - 自定义控件模板。用于修改控件的外观。各个控件的默认模板可参见文档
                                x:Key - 唯一标识
                                targettype - 目标对象类型
                        ContentPresenter - 用于显示继承自 System.windows.Controls.ContentControl 的控件的内容
                        TemplateBinding - 绑定到所指定的属性名称
                        -->
                        <ControlTemplate x:Key="templateTestInContainer" targettype="button">
                                <border borderBrush="Red" borderThickness="1">
                                        <GrID Background="{TemplateBinding Background}">
                                                <ContentPresenter HorizontalAlignment="Right" />
                                        </GrID>
                                </border>
                        </ControlTemplate>

                        <!--样式内设置模板 - 指定了样式即指定了样式内的模板-->
                        <Style x:Key="templateTestInStyle" targettype="button">
                                <Setter Property="Template">
                                        <Setter.Value>
                                                <ControlTemplate targettype="button">
                                                        <border borderBrush="Red" borderThickness="1">
                                                                <GrID Background="{TemplateBinding Background}">
                                                                        <ContentPresenter HorizontalAlignment="Right" />
                                                                </GrID>
                                                        </border>
                                                </ControlTemplate>
                                        </Setter.Value>
                                </Setter>
                        </Style>

                </StackPanel.Resources>


                <!--全局模板的应用-->
                <button WIDth="200" margin="5" Content="我是button（全局模板的应用）" Background="Yellow" Template="{StaticResource templateTestApp}" />

                <!--容器内模板的应用-->
                <button WIDth="200" margin="5" Content="我是button（容器内模板的应用）" Background="Yellow" Template="{StaticResource templateTestInContainer}" />

                <!--样式内模板的应用-->
                <button WIDth="200" margin="5" Content="我是button（样式内模板的应用）" Background="Yellow" Style="{StaticResource templateTestInStyle}" />

                <!--内联式模板的应用-->
                <button WIDth="200" margin="5" Content="我是button（样式内模板的应用）">
                        <button.Template>
                                <ControlTemplate>
                                        <border borderBrush="Red" borderThickness="1">
                                                <GrID Background="Yellow">
                                                        <ContentPresenter HorizontalAlignment="Right" />
                                                </GrID>
                                        </border>
                                </ControlTemplate>
                        </button.Template>
                </button>
        </StackPanel>
</UserControl>     3、视觉状态和视觉状态管理器(App.xaml) <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
                         x:Class="Silverlight20.App"
                         >
        <Application.Resources>
        
                <!--全局视觉状态 - 任何地方都可引用-->
                <!--
                visualstatemanager - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档
                        需要导入命名空间 xmlns:vsm="clr-namespace:System.windows;assembly=System.windows"
                -->
                <ControlTemplate x:Key="vsmTestApp" targettype="button" xmlns:vsm="clr-namespace:System.windows;assembly=System.windows">
                        <GrID>
                                <vsm:visualstatemanager.VisualStateGroups>

                                        <!--
                                        VisualStateGroup - 视觉状态组
                                                如：
                                                CommonStates 组有 normal,MouSEOver,pressed,Disabled
                                                Focusstates 组有 Unfocused,Focused
                                                每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态
                                        x:name - 视觉状态的所属组别名称
                                        -->
                                        <vsm:VisualStateGroup x:name="CommonStates">

                                                <!--
                                                VisualState - 配置视觉状态
                                                        x:name - 所属视觉状态组内的指定的视觉状态名称
                                                -->
                                                <vsm:VisualState x:name="MouSEOver">
                                                        <Storyboard>
                                                                <colorAnimation   
                                                                                Storyboard.Targetname="borderBrush"   
                                                                                Storyboard.TargetProperty="color"   
                                                                                To="Green"
                                                                                Duration="0:0:3" />
                                                        </Storyboard>
                                                </vsm:VisualState>

                                                <vsm:VisualState x:name="normal" />

                                                <!--
                                                VisualStateGroup.Transitions - 所属视觉状态组内的状态转换的配置
                                                        From - 转换前的视觉状态名称
                                                        To - 转换后的视觉状态名称
                                                        GeneratedDuration - 一个状态转换到另一个状态的所需时间
                                                -->
                                                <vsm:VisualStateGroup.Transitions>
                                                        <vsm:VisualTransition From="MouSEOver" To="normal" GeneratedDuration="0:0:3">
                                                                <Storyboard>
                                                                        <colorAnimation   
                                                                                Storyboard.Targetname="borderBrush"   
                                                                                Storyboard.TargetProperty="color"   
                                                                                To="Red"
                                                                                Duration="0:0:3" />
                                                                </Storyboard>
                                                        </vsm:VisualTransition>
                                                </vsm:VisualStateGroup.Transitions>

                                        </vsm:VisualStateGroup>
                                </vsm:visualstatemanager.VisualStateGroups>

                                <border x:name="border" borderThickness="10">
                                        <border.borderBrush>
                                                <SolIDcolorBrush x:name="borderBrush" color="Red" />
                                        </border.borderBrush>
                                        <GrID Background="{TemplateBinding Background}">
                                                <ContentPresenter HorizontalAlignment="Right" />
                                        </GrID>
                                </border>
                        </GrID>
                </ControlTemplate>

        </Application.Resources>
</Application>     视觉状态和视觉状态管理器(visualstatemanager.xaml) <UserControl x:Class="Silverlight20.Appearance.visualstatemanager"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">         <StackPanel HorizontalAlignment="left">                          <StackPanel.Resources>                         <!--容器内视觉状态 - 所属容器内可引用-->                         <!--                         visualstatemanager - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档                                 需要导入命名空间 xmlns:vsm="clr-namespace:System.windows;assembly=System.windows"                         -->                         <ControlTemplate x:Key="vsmTestInContainer" targettype="button" xmlns:vsm="clr-namespace:System.windows;assembly=System.windows">                                 <GrID>                                         <vsm:visualstatemanager.VisualStateGroups>                                                                                          <!--                                                 VisualStateGroup - 视觉状态组                                                         如：                                                         CommonStates 组有 normal,Disabled                                                         Focusstates 组有 Unfocused,Focused                                                         每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态                                                 x:name - 视觉状态的所属组别名称                                                 -->                                                 <vsm:VisualStateGroup x:name="CommonStates">                                                                                                          <!--                                                         VisualState - 配置视觉状态                                                                 x:name - 所属视觉状态组内的指定的视觉状态名称                                                         -->                                                         <vsm:VisualState x:name="MouSEOver">                                                                 <Storyboard>                                                                         <colorAnimation                                                                                    Storyboard.Targetname="borderBrush"                                                                                    Storyboard.TargetProperty="color"                                                                                    To="Green"                                                                                 Duration="0:0:3" />                                                                 </Storyboard>                                                         </vsm:VisualState>                                                                                                                  <vsm:VisualState x:name="normal" />                                                                                                                  <!--                                                         VisualStateGroup.Transitions - 所属视觉状态组内的状态转换的配置                                                                 From - 转换前的视觉状态名称                                                                 To - 转换后的视觉状态名称                                                                 GeneratedDuration - 一个状态转换到另一个状态的所需时间                                                         -->                                                         <vsm:VisualStateGroup.Transitions>                                                                 <vsm:VisualTransition From="MouSEOver" To="normal" GeneratedDuration="0:0:3">                                                                         <Storyboard>                                                                                 <colorAnimation                                                                                    Storyboard.Targetname="borderBrush"                                                                                    Storyboard.TargetProperty="color"                                                                                    To="Red"                                                                                 Duration="0:0:3" />                                                                         </Storyboard>                                                                 </vsm:VisualTransition>                                                         </vsm:VisualStateGroup.Transitions>                                                 </vsm:VisualStateGroup>                                         </vsm:visualstatemanager.VisualStateGroups>                                         <border x:name="border" borderThickness="10">                                                 <border.borderBrush>                                                         <SolIDcolorBrush x:name="borderBrush" color="Red" />                                                 </border.borderBrush>                                                 <GrID Background="{TemplateBinding Background}">                                                         <ContentPresenter HorizontalAlignment="Right" />                                                 </GrID>                                         </border>                                 </GrID>                         </ControlTemplate>                                          </StackPanel.Resources>                 <!--全局视觉状态的应用-->                 <button Content="我是button（全局视觉状态的应用）" margin="5" Background="Yellow" Template="{StaticResource vsmTestApp}" />                 <!--容器内视觉状态的应用-->                 <button Content="我是button（容器内视觉状态的应用）" margin="5" Background="Yellow" Template="{StaticResource vsmTestInContainer}" />         </StackPanel> </UserControl> 总结

以上是内存溢出为你收集整理的Silverlight 外观之样式, 模板, 视觉状态和视觉状态管理器全部内容，希望文章能够帮你解决Silverlight 外观之样式, 模板, 视觉状态和视觉状态管理器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。