- 浏览: 492217 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (329)
- [发布至博客园首页] (12)
- [随笔分类][01] .Net X (59)
- [随笔分类][20] Architecture (16)
- [随笔分类][21] Developer Logs (13)
- [网站分类]Windows 7 (1)
- [随笔分类][13] Oracle & .Net (7)
- [随笔分类][16] Love in China (14)
- [随笔分类][15] Development Tools (20)
- [随笔分类][18] Windows Phone (12)
- [随笔分类][12] Design & Pattern (17)
- [网站分类].NET新手区 (22)
- [网站分类]首页候选区 (2)
- [随笔分类][08] Windows (Server) (13)
- [随笔分类][02] CSLA.Net (3)
- [随笔分类][10] jQuery & javaScript (10)
- [随笔分类][11] SQL Server (4)
- [随笔分类][22] Enterprise Logs (3)
- [随笔分类][03] News (9)
- [随笔分类][19] Quality Assurance (2)
- [随笔分类][05] Silverlight (20)
- [随笔分类][14] Google Earth & .Net (6)
- [网站分类]非技术区 (9)
- [随笔分类][07] WWF (2)
- [随笔分类][04] SharePoint (1)
- [随笔分类][20] Analysis & Design (36)
- [随笔分类][06] WCF (5)
- [随笔分类][12] Architecture (1)
- [随笔分类][09] WPF (0)
- [随笔分类][17] VStudio & Expression (5)
最新评论
-
zhangyy130:
你好,我关于第二段的那个表视图、模型与图这三者的关系我没有看明 ...
UML模型的组成 -
guji528:
谢谢分享!
Enterprise Architect 基础应用 -
studentsky:
好文章,图文并茂!
WCF 第一个用 Visual Studio 2010 创建的WCF服务 -
chen975311486:
用哪个工具画的????
UML中对关系的描述 (二) -
frankies:
继续学习中。。
UML 交互概述图
在使用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 从入门到精通
2009-12-31 21:12 1194Silverlight 是一种新的 Web 呈现 ... -
WCF 及 Silverlight 中使用 Session
2010-01-13 10:11 1827WCF 中 使用 Session 1.标记WCF服务开启 ... -
Silverlight 第一步 快速的掌握页面布局,做一个博客的布局实例
2010-02-12 21:34 1429如果你刚开始学习Silverlight 那么真为你高兴你可以绕 ... -
Silverlight 按钮类控件和选择控件 示例
2010-02-13 14:50 1472下面我们开始走一边Silverlight中的基础控件。 使用 ... -
Silverlight 信息显示与编辑控件 示例
2010-02-14 12:29 1639Silverlight 真是一个不错的开发平台,想到即将发布的 ... -
Silverlight 数据显示和布局控件 示例
2010-02-14 18:41 1868数据显示控件 DataGrid DataGrid 是最基础的数 ... -
Silverlight Object 标签属性介绍、初始化参数的设置和获取、客户端系统信息获取
2010-02-15 19:02 1544HTML元素属性介绍 Silverlight 作为网页的一部 ... -
Silverlight 与HTML元素交互操作
2010-02-15 19:32 1316Silverlight 中的HtmlPage 和 HtmlE ... -
Silverlight 与javaScript互操作
2010-02-15 20:12 1428Silverlight 调用 javaScript ... -
Silverlight 中的WebClient 与 WebRequest 示例
2010-02-16 16:48 1847WebClient public partial clas ... -
Silverlight 客户端本地消息通讯
2010-02-17 13:22 1019在Silverlight 3 中添加了客户端不同应用程序之间的 ... -
Silverlight Isolated Storage 独立存储
2010-02-17 18:42 2143Silverlight 独立存储 好比Cookie一样,可以 ... -
Silverlight 程序库缓存与打开/保存文件对话框
2010-02-17 19:12 1884程序库缓存 我们都知道Xap是Silverlight 初始下 ... -
silverlight click 事件委托是 RoutedEventHandler
2008-12-01 09:46 1672cellBtn.Click += new RoutedEven ... -
silverlight 2 系统对话框
2008-12-01 09:47 884silverlight 2 系统对话框 Code< ... -
silverlight, 双击事件
2008-12-01 10:22 1136Silverlight 没有提供双 ... -
转帖-如何在不联网的情况下安装 Silverlight Tools
2009-01-05 13:54 990首先,在安装之前,将你的系统和VS2008更新到最新的 SP1 ... -
Silverlight 开发 GIS Google Maps
2009-06-01 17:36 1663Silverlight 作为地理信息系统的开发平台,与多种图源 ... -
Silverlight Tools 安装失败 解决办法
2009-06-18 20:02 18531.Silverlight Tools 安装失败,可以尝试将注 ...
相关推荐
Silverlight 自定义控件 模板化控件 (一)属性 http://blog.csdn.net/gzy11/archive/2011/01/13/6136940.aspx 此篇文章的示列代码。
http://blog.csdn.net/gzy11/archive/2011/06/01/6460254.aspx Silverlight 自定义控件 模板化控件 (二)事件 源码
学习用Silverlight创建自定义控件经典教程。
silverlight 时钟 控件silverlight 时钟 控件silverlight 时钟 控件silverlight 时钟 控件silverlight 时钟 控件silverlight 时钟 控件silverlight 时钟 控件
Silverlight美化TabControl控件演示
Silverlight 调用oxc控件,通过web页面调用
Silverlight中后台调用控件样式Silverlight中后台调用控件样式Silverlight中后台调用控件样式Silverlight中后台调用控件样式
简单的Silverlight 自定义控件源码。 通过它,可以知道基本的silverlight自定义控件是如何编写的。
Silverlight布局墙控件源码 Silverlight布局墙控件,很实用!
Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox 介绍 Silverlight 2.0 控件一览:Border, Button, Calendar, Canvas, CheckBox, ComboBox 2、Silverlight(4) - 2.0控件之...
Silverlight中TreeView控件的用法
Silverlight 动态生成控件, 鼠标可以拖动控件 移动
silverlight 显示gif动画控件,附例子~~~ http://www.dotnetdev.cn
VB silverlight 增强日期控件 可选时间VB silverlight 增强日期控件 可选时间VB silverlight 增强日期控件 可选时间
好看的silverlight分页控件,里面附有调用方法,呈现的样子,附有全部的源码,可随意的去修改
SilverLight入门级的控件说明,需要实例,联系QQ 853466904
自己写的Silverlight时间选择控件,可以作为入门参考
本次项目采用Silverlight实现一个简单的个人多媒体平台,通过该平台,用户可以搜索自己喜欢的多媒体文件,在线播放(其播放质量优于Flash);... 9.Silverlight控件样式和控件模板 10.应用Blend工具进行开发
silverlight4 富文本控件 richNotepad
SilverLight中日期控件显示时分秒,由于Datepicker中没有显示时分秒,所以可以自己重写Datepicker,使其显示时分秒