博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器
阅读量:5843 次
发布时间:2019-06-18

本文共 8552 字,大约阅读时间需要 28 分钟。





稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器
作者:
介绍
Silverlight 2.0 外观控制:样式(Style), 模板(Template), 视觉状态(VisualState)和视觉状态管理器(VisualStateManager)
在线DEMO
 
示例
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, 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> 

                         

                </StackPanel.Resources> 



                <!--全局视觉状态的应用--> 

                <Button Content="我是Button(全局视觉状态的应用)" Margin="5" Background="Yellow" Template="{StaticResource vsmTestApp}" /> 


                <!--容器内视觉状态的应用--> 

                <Button Content="我是Button(容器内视觉状态的应用)" Margin="5" Background="Yellow" Template="{StaticResource vsmTestInContainer}" /> 


        </StackPanel> 

</UserControl>
 
 
OK
     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/343042
,如需转载请自行联系原作者
你可能感兴趣的文章
一次Eclipse插件修改经历
查看>>
《Redis实战》一2.3 网页缓存
查看>>
《JavaScript核心概念及实践》——2.2 变量
查看>>
《JavaScript开发框架权威指南》——2.3 将Grunt添加到项目中
查看>>
《统计会犯错——如何避免数据分析中的统计陷阱》—第2章膨胀的真理
查看>>
15 个‘ls’命令的面试问题(一)
查看>>
暗渡陈仓:用低消耗设备进行破解和渗透测试3.4 创建一个microSD卡
查看>>
如何使用LibreOffice把DOCX,DOC,RTF,ODT转换成PDF
查看>>
《Python高手之路》——2.3 外部库
查看>>
C#实现栈和队列
查看>>
揭秘Oracle数据库truncate原理
查看>>
android中实现无标题、全屏的几种方法
查看>>
别人家的人工智能还在打酱油 ,阿里云的ET都去“指挥”交通了
查看>>
细数云计算产品和技术-OpenStack
查看>>
《自己动手写Docker》书摘之五: 增加容器资源限制
查看>>
数据让生意更简单,网聚宝创业团队利用数加快速打造核心业务竞争力,在激烈的市场竞争中弯道超车。...
查看>>
如何上传文件到阿里云服务器?
查看>>
happypack 原理解析
查看>>
性能优化的常见模式及趋势 | 陈显铭
查看>>
当我们谈论“全栈”开发者时,我们在谈论什么?
查看>>