Silverlight 属性样式、控件模板、视觉状态
在使用Silverlight的样式的时候感觉非常好,以前在HTML上很难实现的效果在这里都变的如此简单。
属性样式
控件的属性样式好比CSS的Class功能定义,是用来统一定义和维护控件属性的方式,控件属性样式根据生命的位置不同分为三种范围的作用域
全局样式
全局样式声明在App.Xaml 文件中具有整个项目的使用范围能力
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Sample.App"><Application.Resources><!--样式定义位置,定义在这里可以让整个项目都可以访问到这个样式的定义--></Application.Resources> </Application>
局部样式
局部样式使用<UserControl.Resources> 这个元素定义,具有文件级别的访问范围
<!--定义用户控件资源-->
<UserControl.Resources>
<!--定义按钮样式1 TargetType 代表适合的控件类型 这里是Button控件-->
<Style x:Key="button1" TargetType="Button">
<!--背景色 Background = Black-->
<Setter Property="Background" Value="Black"/>
<!--字号-->
<Setter Property="FontSize" Value="24"/>
<!--字颜色-->
<Setter Property="Foreground" Value="Blue"/>
<!--字间距-->
<Setter Property="Margin" Value="20"/>
</Style>
</UserControl.Resources>
<!--应用样式1的按钮-->
<Button Content="兰色" Width="150" Height="80"
Style="{StaticResource button1}" />
内部样式
内部样式代表在元素的级别上来生命的资源,具有这个容器或者控件的使用范围
<Button Content="红色" Width="150" Height="80">
<Button.Style>
<!--定义按钮样式3-->
<Style TargetType="Button">
<!--背景色-->
<Setter Property="Background" Value="Red"/>
<!--字号-->
<Setter Property="FontSize" Value="24"/>
<!--字颜色-->
<Setter Property="Foreground" Value="Red"/>
<!--字间距-->
<Setter Property="Margin" Value="20"/>
</Style>
</Button.Style>
</Button>
样式支持继承的方式访问,在父容器元素定义的样式其内部的包含的控件也可以使用这个样式,下面的Button就使用了其父容器控件中的资源。
<Grid x:Name="LayoutRoot" Background="White">
<!--定义Grid控件的资源-->
<Grid.Resources>
<Style x:Key="button" TargetType="Button">
<Setter Property="Width" Value="260"/>
<Setter Property="Height" Value="160"/>
<Setter Property="FontSize" Value="26" />
<Setter Property="Content" Value="应用父级样式"/>
</Style>
</Grid.Resources>
<!--应用父级样式的按钮-->
<Button Style="{StaticResource button}"></Button>
</Grid>
控件模板
控件模板用于个性化的去定义控件的外观,可以使用Blend或者是手动去使用XAML编写组合一个你所想要的控件外观,比如圆形的按钮等等,同时这个控件本身依然具有控件本身的功能作用。
他的定义是Style的一个扩展,只要在Style中添加Property="Template" 的Setter 标记 并在Value中定义即可
<UserControl.Resources>
<!--定义样式1-->
<Style x:Key="MyButton1" TargetType="Button">
<!--使用模板属性-->
<Setter Property="Template"> ----------代表索要定义的是一个模板
<Setter.Value> ---------- 这个标记中可以包含模板定义
<!--定义模板1-->
<ControlTemplate TargetType="Button"> -------模板的适用与Button,这个元素的内部开始定义这个Button模板的外观
<Grid Cursor="Hand" Margin="20">
<Ellipse Width="150" Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"> -----椭圆形
<Ellipse.Fill> -----填充使用黄色到白色的渐变
<RadialGradientBrush>
<GradientStop Color="Gold"
Offset="1"/>
<GradientStop Color="White"
Offset="0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!--使用TemplateBinding-->
<TextBlock FontSize="24"
Foreground="Blue"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{TemplateBinding Content}" /> ----文本的定义使用TextBlock标记,并将Text 与 具体的Button 的Content 属性 的值关联起来
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<StackPanel Width="400" Height="300"
HorizontalAlignment="Center"
Orientation="Horizontal"
VerticalAlignment="Center"
Background="White">
<!--应用样式1-->
<Button Style="{StaticResource MyButton1}" Content="我的控件" /> ----使用样式的名称即可
<!--应用样式1-->
<Button Style="{StaticResource MyButton1}" Content="按钮内容" />
</StackPanel>
视觉状态
视觉状态也是Style的一个扩展,在Silverlight 的样式中控件在某个状态下的不同效果也是可以定义的,比如鼠标在按钮悬停时候按钮的样子啊,按下按钮的样子啊等等。
当然和Style一样,每种按钮都有不同的属性也会有不同的状态。那么我们如何得知控件有那些状态呢,方法很简单,只要 右键选中一个控件,转到定义,在元数据里面就会看到他的状态都有那些了。
// Summary:// Represents a button control.[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")][TemplateVisualState(Name = "Normal", GroupName = "CommonStates")][TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")][TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")][TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")][TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]public class Button : ButtonBase
上面的特性就是视觉状态了,我们就要重新定义这些Name的状态。
<UserControl.Resources>
<!--定义样式标记-->
<Style x:Key="buttonVSM" TargetType="Button">
<!--定义样式属性-->
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="Template">
<Setter.Value>
<!--定义控件模板-->
<ControlTemplate TargetType="Button">
<Border CornerRadius="10" BorderBrush="Black"
BorderThickness="3" Width="240" Height="80"
x:Name="RootElement">
<Border.Background>
<!--定义背景画刷-->
<SolidColorBrush
x:Name="BorderBrush"
Color="Green"/>
</Border.Background>
<!--视觉状态管理组-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<!--定义状态迁移-->
<VisualStateGroup.Transitions> ----------迁移代表不同状态之间切换的过程
<!--从Normal到MouseOver迁移间隔时间-->
<VisualTransition To="MouseOver"
GeneratedDuration="0:0:0.5" />
<!--从Pressed到MouseOver的迁移间隔时间-->
<VisualTransition From="Pressed"
To="MouseOver"
GeneratedDuration="0:0:0.01" />
<!--从MouseOver到Normal的迁移-->
<VisualTransition From="MouseOver"
To="Normal"
GeneratedDuration="0:0:1.5">
<Storyboard>
<!--使用关键帧动画改变按钮背景色-->
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="Color"
Storyboard.TargetName="BorderBrush">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame
Value="Blue" KeyTime="0:0:0.5" /> ---- 0.5 秒Blue 色
<LinearColorKeyFrame
Value="Yellow" KeyTime="0:0:1" /> ---1秒 Yellow色
<LinearColorKeyFrame
Value="Green" KeyTime="0:0:1.5" /> ----1.5秒Green色
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<!--按钮普通状态-->
<VisualState x:Name="Normal" />
<!--鼠标经过按钮的状态-->
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Red" /> ----动态将BorderBrush 的Color 属性值过度到Red
</Storyboard>
</VisualState>
<!--按钮按下状态-->
<VisualState x:Name="Pressed">
<Storyboard >
<ColorAnimation
Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Transparent" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--显示按钮文本-->
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!--按钮对象-->
<Button Style="{StaticResource buttonVSM}"
FontSize="24" Background="Red"
Content="视觉状态按钮"/>
</Grid>
Silverlight 属性样式、控件模板、视觉状态相关推荐
- Silverlight中使用控件模板的问题(自己添加控件的方法)
在一步一步学Silverlight 2系列(9):使用控件模板中 WatermarkedTextBox控件可以为用户的输入提供一段提示信息,如果只是简单的一点文字信息,有时候未免显得单调,如果加上相应 ...
- 转载 WPF 控件模板 数据模板 面板模板
转载自:https://blog.csdn.net/ceasadan/article/details/61414879 模板使用方式:首先定义模板,然后在把对应的key应用到控件对应的属性中: 属性对 ...
- Windows Phone开发(16):样式和控件模板
在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的 ...
- Windows Phone开发(16):样式和控件模板 转:http://blog.csdn.net/tcjiaan/article/details/7367260...
在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的 ...
- 一步一步学Silverlight 2系列(9):使用控件模板
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://terrylee.blog.51cto.com/342737/67243 ...
- WPf控件模板缺省样式
WPF控件模板缺省样式:http://www.cnblogs.com/khler/archive/2009/07/14/1523043.html 转载于:https://www.cnblogs.com ...
- Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates
上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式.本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate.Con ...
- BCGControlBar Pro for MFC v13.3现已发布:着重改进图表、属性/编辑控件等,打造全面、易上手的MFC库
亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBar Professional for MFC v31.3正式发布啦! BCGControlBar Pro for MFC v31.3 ...
- 【转】WPF默认控件模板的获取和资源词典的使用
一.获取默认的控件模板 WPF修改控件模板是修改外观最方便的方式,但是会出现不知道原来的控件的模板长什么样,或者如何在原有控件模板上修改的,下面就分享了获取某控件默认控件模板的方法(以控件Button ...
最新文章
- C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll,提示找不到指定模块
- python 图表_做自己漂亮的图表,一文学会如何用Python填充图表样式
- 转:Linux--进程间通信(信号量,共享内存)
- P1476 休息中的小呆
- (转)MTK softkey流程 必看
- .NET 调用外部exe程序,出现已停止工作
- python 遍历_python dict 两种遍历方式的比较
- python编程语言可以做游戏吗_用Python编程可以制作掷骰子游戏吗
- canvas绘制图形的相关API
- 微信小程序-image标签
- 消费者京东自营买到假茅台 茅台鉴定报告称确属假冒
- linux怎么创建牡蛎_牡蛎的意思
- 董明珠称格力宁可降工资也不裁员;阿里发布财年第四季度及全年财报
- oracle监控数据库工具,Oracle轻量级实时监控工具-oratop
- Java负整数的左移、右移、无符号右移
- 三维目标检测论文:Deep Hough Voting for 3D Object Detection in Point Clouds
- 【k8s源码篇】k8s类型定义1之yaml与单体、list对象转换
- react+ts+echarts5.x按需导入实现世界地图
- K210学习笔记(五)——MAIX BIT(K210)与STM32串口通讯
- 自动化测试构架之Robot Framework——01 介绍
热门文章
- java多个数据库_java – 我们可以有多个dataSources到单个数据库
- Linux Shell通过fifo实现多进程并发以及并发数控制
- 网络IO演变发展过程和模型介绍
- 携程Apollo分布式配置中心搭建指南
- centos7 搭建keepalived+Nginx+tomcat
- 办公OA的附件无法下载、打不开的解决办法
- 如何在Linux上使用netstat命令查证DDOS***
- 关于open***的实验总结
- JAVA连接Mysql事例
- 希望查询windows下安装cygwin后ssh服务无法启动的解决办法