样式(Style),有HTML开发基础的朋友对传统的CSS样式表并不陌生,HTML将所有公用的属性代码汇集到CSS文件中,使用CSS控制页面的背景,控制表格的宽度,控制控件距离等。Silverlight中的样式(Style)和CSS相同,允许设计人员和开发人员将控件的公用属性定义到资源文件中,允许相同属性控件自由调用,这样不仅提高了代码的
复用性,而且保证了控件外观在项目中的
一致性。
模板(Template),模板的概念在传统的Web页面开发中已经被引入,早期Dreamweaver因为支持创建Web模板设计,吸引了不少Web开发者。Silverlight中同样引进了模板的概念。在Silverlight中,凡是继承自System.Windows.Controls命名控件的控件都有一套默认的模板,设计人员和开发人员可以基于默认模板的基础上进行修改,创建自定义模板。
样式(Style)和模板(Template)的定义
在Silverlight中,样式和模板定义是很简单的,因为很多属性已经被封装好,不需要自行创建,只需要调用就可以了。简单的演示代码:
Style:
1
<
UserControl.Resources
>
2 < Style x:Key ="TextBoxStyle" TargetType ="TextBox" >
3 这里定义具体样式属性
4 </ Style >
5 </ UserControl.Resources >
2 < Style x:Key ="TextBoxStyle" TargetType ="TextBox" >
3 这里定义具体样式属性
4 </ Style >
5 </ UserControl.Resources >
Template:
1 <UserControl.Resources>
2 <ControlTemplate x:Key="TextBoxTemplate" TargetType="TextBox" >
3 <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10"
4 Background="Red">
5 这里定义具体模板
6 </Border>
7 </ControlTemplate>
8 </UserControl.Resources>
2 <ControlTemplate x:Key="TextBoxTemplate" TargetType="TextBox" >
3 <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10"
4 Background="Red">
5 这里定义具体模板
6 </Border>
7 </ControlTemplate>
8 </UserControl.Resources>
样式(Style)和模板(Template)的使用
在Silverlight中样式(Style)和模板(Template)都属于控件资源,也就是说,两者都可以被定义在资源文件中,而在项目页面中,仅需使用Style和Template属性调用就可以了。
Style:
1
<
TextBox
Style
={"StaticResource
TextBoxStyle"} Text
="样式测试"
/>
Template:这个方法,也是Blend所支持的方法,下面我们看看实例,进一步理解。
1
<
TextBox
Template
={"StaticResource
TextBoxTemplate"} Text
="模板测试"
/>
上面介绍了样式和模板的最基本的用法。
在实际项目中,我们经常把模板(Template)定义在样式(Style)中,也就是将Template作为一个属性被赋值在Style中,这样当样式(Style)被应用在控件中时,新的模板也会同时加载。
例如下面Button样式代码,<Setter Property="Template"> Template是作为Style的属性被设置的:
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
1
<
ResourceDictionary
>
2 < Style x:Key ="ButtonStyle1" TargetType ="Button" >
3 < Setter Property ="Background" Value ="#FF1F3B53" />
4 < Setter Property ="Foreground" Value ="#FF000000" />
5 < Setter Property ="Padding" Value ="3" />
6 < Setter Property ="BorderThickness" Value ="1" />
7 < Setter Property ="BorderBrush" >
8 < Setter.Value >
9 < LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
10 < GradientStop Color ="#FFA3AEB9" Offset ="0" />
11 < GradientStop Color ="#FF8399A9" Offset ="0.375" />
12 < GradientStop Color ="#FF718597" Offset ="0.375" />
13 < GradientStop Color ="#FF617584" Offset ="1" />
14 </ LinearGradientBrush >
15 </ Setter.Value >
16 </ Setter >
17 < Setter Property ="Template" >
18 < Setter.Value >
19 < ControlTemplate TargetType ="Button" >
20 < Grid >
21 < VisualStateManager.VisualStateGroups >
22 < VisualStateGroup x:Name ="CommonStates" >
23 < VisualState x:Name ="Normal" />
24 < VisualState x:Name ="MouseOver" >
25 < Storyboard >
26 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundAnimation" Storyboard.TargetProperty ="Opacity" >
27 < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
28 </ DoubleAnimationUsingKeyFrames >
29 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" >
30 < SplineColorKeyFrame KeyTime ="0" Value ="#F2FFFFFF" />
31 </ ColorAnimationUsingKeyFrames >
32 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" >
33 < SplineColorKeyFrame KeyTime ="0" Value ="#CCFFFFFF" />
34 </ ColorAnimationUsingKeyFrames >
35 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" >
36 < SplineColorKeyFrame KeyTime ="0" Value ="#7FFFFFFF" />
37 </ ColorAnimationUsingKeyFrames >
38 </ Storyboard >
39 </ VisualState >
40 < VisualState x:Name ="Pressed" >
41 < Storyboard >
42 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="Background" Storyboard.TargetProperty ="(Border.Background).(SolidColorBrush.Color)" >
43 < SplineColorKeyFrame KeyTime ="0" Value ="#FF6DBDD1" />
44 </ ColorAnimationUsingKeyFrames >
45 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundAnimation" Storyboard.TargetProperty ="Opacity" >
46 < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
47 </ DoubleAnimationUsingKeyFrames >
48 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" >
49 < SplineColorKeyFrame KeyTime ="0" Value ="#D8FFFFFF" />
50 </ ColorAnimationUsingKeyFrames >
51 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" >
52 < SplineColorKeyFrame KeyTime ="0" Value ="#C6FFFFFF" />
53 </ ColorAnimationUsingKeyFrames >
54 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" >
55 < SplineColorKeyFrame KeyTime ="0" Value ="#8CFFFFFF" />
56 </ ColorAnimationUsingKeyFrames >
57 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" >
58 < SplineColorKeyFrame KeyTime ="0" Value ="#3FFFFFFF" />
59 </ ColorAnimationUsingKeyFrames >
60 </ Storyboard >
61 </ VisualState >
62 < VisualState x:Name ="Disabled" >
63 < Storyboard >
64 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="DisabledVisualElement" Storyboard.TargetProperty ="Opacity" >
65 < SplineDoubleKeyFrame KeyTime ="0" Value =".55" />
66 </ DoubleAnimationUsingKeyFrames >
67 </ Storyboard >
68 </ VisualState >
69 </ VisualStateGroup >
70 < VisualStateGroup x:Name ="FocusStates" >
71 < VisualState x:Name ="Focused" >
72 < Storyboard >
73 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="FocusVisualElement" Storyboard.TargetProperty ="Opacity" >
74 < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
75 </ DoubleAnimationUsingKeyFrames >
76 </ Storyboard >
77 </ VisualState >
78 < VisualState x:Name ="Unfocused" />
79 </ VisualStateGroup >
80 </ VisualStateManager.VisualStateGroups >
81 < Border x:Name ="Background" Background ="White" BorderBrush =" {TemplateBinding BorderBrush} " BorderThickness =" {TemplateBinding BorderThickness} " CornerRadius ="3" >
82 < Grid Margin ="1" Background =" {TemplateBinding Background} " >
83 < Border x:Name ="BackgroundAnimation" Opacity ="0" Background ="#FF448DCA" />
84 < Rectangle x:Name ="BackgroundGradient" >
85 < Rectangle.Fill >
86 < LinearGradientBrush EndPoint =".7,1" StartPoint =".7,0" >
87 < GradientStop Color ="#FFFFFFFF" Offset ="0" />
88 < GradientStop Color ="#F9FFFFFF" Offset ="0.375" />
89 < GradientStop Color ="#E5FFFFFF" Offset ="0.625" />
90 < GradientStop Color ="#C6FFFFFF" Offset ="1" />
91 </ LinearGradientBrush >
92 </ Rectangle.Fill >
93 </ Rectangle >
94 </ Grid >
95 </ Border >
96 < ContentPresenter x:Name ="contentPresenter" HorizontalAlignment =" {TemplateBinding HorizontalContentAlignment} " Margin =" {TemplateBinding Padding} " VerticalAlignment =" {TemplateBinding VerticalContentAlignment} " Content =" {TemplateBinding Content} " ContentTemplate =" {TemplateBinding ContentTemplate} " />
97 < Rectangle x:Name ="DisabledVisualElement" Fill ="#FFFFFFFF" RadiusX ="3" RadiusY ="3" IsHitTestVisible ="false" Opacity ="0" />
98 < Rectangle x:Name ="FocusVisualElement" Stroke ="#FF6DBDD1" StrokeThickness ="1" RadiusX ="2" RadiusY ="2" Margin ="1" IsHitTestVisible ="false" Opacity ="0" />
99 </ Grid >
100 </ ControlTemplate >
101 </ Setter.Value >
102 </ Setter >
103 </ Style >
104 </ ResourceDictionary >
2 < Style x:Key ="ButtonStyle1" TargetType ="Button" >
3 < Setter Property ="Background" Value ="#FF1F3B53" />
4 < Setter Property ="Foreground" Value ="#FF000000" />
5 < Setter Property ="Padding" Value ="3" />
6 < Setter Property ="BorderThickness" Value ="1" />
7 < Setter Property ="BorderBrush" >
8 < Setter.Value >
9 < LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
10 < GradientStop Color ="#FFA3AEB9" Offset ="0" />
11 < GradientStop Color ="#FF8399A9" Offset ="0.375" />
12 < GradientStop Color ="#FF718597" Offset ="0.375" />
13 < GradientStop Color ="#FF617584" Offset ="1" />
14 </ LinearGradientBrush >
15 </ Setter.Value >
16 </ Setter >
17 < Setter Property ="Template" >
18 < Setter.Value >
19 < ControlTemplate TargetType ="Button" >
20 < Grid >
21 < VisualStateManager.VisualStateGroups >
22 < VisualStateGroup x:Name ="CommonStates" >
23 < VisualState x:Name ="Normal" />
24 < VisualState x:Name ="MouseOver" >
25 < Storyboard >
26 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundAnimation" Storyboard.TargetProperty ="Opacity" >
27 < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
28 </ DoubleAnimationUsingKeyFrames >
29 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" >
30 < SplineColorKeyFrame KeyTime ="0" Value ="#F2FFFFFF" />
31 </ ColorAnimationUsingKeyFrames >
32 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" >
33 < SplineColorKeyFrame KeyTime ="0" Value ="#CCFFFFFF" />
34 </ ColorAnimationUsingKeyFrames >
35 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" >
36 < SplineColorKeyFrame KeyTime ="0" Value ="#7FFFFFFF" />
37 </ ColorAnimationUsingKeyFrames >
38 </ Storyboard >
39 </ VisualState >
40 < VisualState x:Name ="Pressed" >
41 < Storyboard >
42 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="Background" Storyboard.TargetProperty ="(Border.Background).(SolidColorBrush.Color)" >
43 < SplineColorKeyFrame KeyTime ="0" Value ="#FF6DBDD1" />
44 </ ColorAnimationUsingKeyFrames >
45 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundAnimation" Storyboard.TargetProperty ="Opacity" >
46 < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
47 </ DoubleAnimationUsingKeyFrames >
48 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" >
49 < SplineColorKeyFrame KeyTime ="0" Value ="#D8FFFFFF" />
50 </ ColorAnimationUsingKeyFrames >
51 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" >
52 < SplineColorKeyFrame KeyTime ="0" Value ="#C6FFFFFF" />
53 </ ColorAnimationUsingKeyFrames >
54 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" >
55 < SplineColorKeyFrame KeyTime ="0" Value ="#8CFFFFFF" />
56 </ ColorAnimationUsingKeyFrames >
57 < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" >
58 < SplineColorKeyFrame KeyTime ="0" Value ="#3FFFFFFF" />
59 </ ColorAnimationUsingKeyFrames >
60 </ Storyboard >
61 </ VisualState >
62 < VisualState x:Name ="Disabled" >
63 < Storyboard >
64 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="DisabledVisualElement" Storyboard.TargetProperty ="Opacity" >
65 < SplineDoubleKeyFrame KeyTime ="0" Value =".55" />
66 </ DoubleAnimationUsingKeyFrames >
67 </ Storyboard >
68 </ VisualState >
69 </ VisualStateGroup >
70 < VisualStateGroup x:Name ="FocusStates" >
71 < VisualState x:Name ="Focused" >
72 < Storyboard >
73 < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="FocusVisualElement" Storyboard.TargetProperty ="Opacity" >
74 < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
75 </ DoubleAnimationUsingKeyFrames >
76 </ Storyboard >
77 </ VisualState >
78 < VisualState x:Name ="Unfocused" />
79 </ VisualStateGroup >
80 </ VisualStateManager.VisualStateGroups >
81 < Border x:Name ="Background" Background ="White" BorderBrush =" {TemplateBinding BorderBrush} " BorderThickness =" {TemplateBinding BorderThickness} " CornerRadius ="3" >
82 < Grid Margin ="1" Background =" {TemplateBinding Background} " >
83 < Border x:Name ="BackgroundAnimation" Opacity ="0" Background ="#FF448DCA" />
84 < Rectangle x:Name ="BackgroundGradient" >
85 < Rectangle.Fill >
86 < LinearGradientBrush EndPoint =".7,1" StartPoint =".7,0" >
87 < GradientStop Color ="#FFFFFFFF" Offset ="0" />
88 < GradientStop Color ="#F9FFFFFF" Offset ="0.375" />
89 < GradientStop Color ="#E5FFFFFF" Offset ="0.625" />
90 < GradientStop Color ="#C6FFFFFF" Offset ="1" />
91 </ LinearGradientBrush >
92 </ Rectangle.Fill >
93 </ Rectangle >
94 </ Grid >
95 </ Border >
96 < ContentPresenter x:Name ="contentPresenter" HorizontalAlignment =" {TemplateBinding HorizontalContentAlignment} " Margin =" {TemplateBinding Padding} " VerticalAlignment =" {TemplateBinding VerticalContentAlignment} " Content =" {TemplateBinding Content} " ContentTemplate =" {TemplateBinding ContentTemplate} " />
97 < Rectangle x:Name ="DisabledVisualElement" Fill ="#FFFFFFFF" RadiusX ="3" RadiusY ="3" IsHitTestVisible ="false" Opacity ="0" />
98 < Rectangle x:Name ="FocusVisualElement" Stroke ="#FF6DBDD1" StrokeThickness ="1" RadiusX ="2" RadiusY ="2" Margin ="1" IsHitTestVisible ="false" Opacity ="0" />
99 </ Grid >
100 </ ControlTemplate >
101 </ Setter.Value >
102 </ Setter >
103 </ Style >
104 </ ResourceDictionary >
下面我们用一个简单的实例来理解Style(样式)和Template(模板)。
首先,我们创建一个新的项目StyleTemplateDemo作为演示。
![](https://i-blog.csdnimg.cn/blog_migrate/0082f5a6bf36ee5b5e43dbd9c636c6f5.jpeg)
打开MainPage,在主设计窗口中,添加三个按钮控件到该页面,
![](https://i-blog.csdnimg.cn/blog_migrate/cbd0012d365eee4775a0ad1a04ec7aa4.jpeg)
对于Button控件的
样式属性控制,最简单的方法就是从右边Properties属性栏,
![](https://i-blog.csdnimg.cn/blog_migrate/3e982f5060ead6e3ccb9d866b4d9acdf.jpeg)
如果需要创建自定义样式,则需要按照以下步骤:
首先选中其中一个按钮控件,在左上角可以看到Button控件下拉菜单,
![](https://i-blog.csdnimg.cn/blog_migrate/d487566c843f373b18544a265275da71.jpeg)
点击“[Button]”下拉菜单,选择“Edit Template”,然后选择“Edit a Copy”,
![](https://i-blog.csdnimg.cn/blog_migrate/ca6d97bb2d4d2fd57bfc241606848182.jpeg)
或者,可以在主设计窗口,使用鼠标右键选中控件,选择“Edit Template”,然后选择“Edit a Copy”,
![](https://i-blog.csdnimg.cn/blog_migrate/014048985eae89a7cf4f44a0ead1945e.jpeg)
选中“Edit a Copy”,系统会弹出提示窗口,询问“Create Style Resource”是否创建样式资源,
其中Name(Key)是样式名,以后调用该样式将使用这个Name;
Define in 有三个选择:
1. Application(应用),该选项是将该样式代码添加到App.Xaml文件中;
2. This document(当前文档),该选项是将该样式代码添加到当前编辑文档中,当前我们编辑MainPage.Xaml,如果选中此项,样式代码将被输出到该文件中;
3. Resource dictionary(资源目录),该选项是将该样式代码添加到自定义资源文件中,如果没有资源文件,可以点击“New”创建自定义资源文件;
![](https://i-blog.csdnimg.cn/blog_migrate/9172ca9b4c3013ab4bd4d66d4dd9d62a.jpeg)
在This document(当前文档)中,该选项有两个选择,
![](https://i-blog.csdnimg.cn/blog_migrate/c2c70baea31857bc0c6009fcce988c7c.jpeg)
“UserControl:<no name>”,选中该选项样式代码将在当前文档创建<UserControl.Resources>,
![](https://i-blog.csdnimg.cn/blog_migrate/bfb232865882203c7d9ca35003934be5.jpeg)
调用是使用前面的基础调用代码:
1
<
Button
Margin
="114,197,0,228"
Width
="139"
Content
="Button"
HorizontalAlignment
="Left"
d:LayoutOverrides
="Width"
Style
="
{StaticResource ButtonStyle1}
"
/>
“Button:<no name>”,选中该选项样式代码将创建在该控件资源下,
![](https://i-blog.csdnimg.cn/blog_migrate/081df6a223985c52e336842179bd3cb8.jpeg)
对比以上三种定义样式代码方式,第一种和第三种方法相对来说比较灵活,将样式代码放在公共资源文件中,方便其他页面相同属性控件调用;而第二种方法,仅供该文件中的相同属性控件调用。
这里我们Define in选择Application,定义样式代码到App.xaml中,点击确定后,系统会打开App.xaml文件,进入控件样式编辑状态,这时就可以对控件样式进行编辑。
![](https://i-blog.csdnimg.cn/blog_migrate/f3790543a74a217d1370bf6f0bdda5b5.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/8bcff646803aae4dec6e18a1921b5cb8.jpeg)
当前主设计窗口打开文件为"App.xaml",因为该文件包含了要编辑的样式和模板代码。
在控件处于样式和模板编辑状态下,从Objects and Timeline窗口可以查看该控件模板的子部件,通过修改包含的子部件样式,来改变原按钮控件样式。
![](https://i-blog.csdnimg.cn/blog_migrate/90863c9a908945fe738430235ff0a839.jpeg)
例如我们想改变Button的背景色,可以修改BackgroundGradient属性,从上图的Objects and Timeline中选中BackgroundGradient,
![](https://i-blog.csdnimg.cn/blog_migrate/62b4d1a9d62a6555ae2ed34ab11b12e5.jpeg)
在右边Properties属性栏,修改颜色,即可看到在主设计窗口按钮的背景色在改变。
![](https://i-blog.csdnimg.cn/blog_migrate/d66f060641c42e4f0fefa734aa132e39.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/cb0949987876e24fba49bf6cb38eb662.jpeg)
保存以上修改后,回到主设计窗口,能看到两个Button已经被应用了新的Button样式,
![](https://i-blog.csdnimg.cn/blog_migrate/15afce52102d68be8bc1b979941edbc0.jpeg)
1
<
Grid
x:Name
="LayoutRoot"
Background
="White"
>
2 < Button x:Name ="bt1" Margin ="254,151,247,0" Width ="139" Content ="按钮样式" Style =" {StaticResource ButtonStyle1} " Height ="55" VerticalAlignment ="Top" />
3 < Button Margin ="0,151,92,0" Width ="139" Content ="Button" HorizontalAlignment ="Right" d:LayoutOverrides ="Width" Height ="55" VerticalAlignment ="Top" />
4 < Button Margin ="94,151,0,0" Width ="139" Content ="Button" HorizontalAlignment ="Left" d:LayoutOverrides ="Width" Style =" {StaticResource ButtonStyle1} " Height ="55" VerticalAlignment ="Top" />
5 </ Grid >
2 < Button x:Name ="bt1" Margin ="254,151,247,0" Width ="139" Content ="按钮样式" Style =" {StaticResource ButtonStyle1} " Height ="55" VerticalAlignment ="Top" />
3 < Button Margin ="0,151,92,0" Width ="139" Content ="Button" HorizontalAlignment ="Right" d:LayoutOverrides ="Width" Height ="55" VerticalAlignment ="Top" />
4 < Button Margin ="94,151,0,0" Width ="139" Content ="Button" HorizontalAlignment ="Left" d:LayoutOverrides ="Width" Style =" {StaticResource ButtonStyle1} " Height ="55" VerticalAlignment ="Top" />
5 </ Grid >
从代码中可以看出,使用
Style
="
{StaticResource ButtonStyle1}
" 的按钮,已经将默认Button样式替换为新的Button样式。如果想修改最后一个Button的样式,同样,把
Style
="
{StaticResource ButtonStyle1}
" 属性添加到Button中即可。 在Blend中可以非常简单的应用新的样式到控件。
在需要被应用样式的Button控件上点击鼠标右键,然后选择“Edit Template”->“Apply Resource” ->选中当前需要被应用的样式,在主设计窗口即可看到控件样式的变化。
![](https://i-blog.csdnimg.cn/blog_migrate/29a39d493db7572344700c21304eb4c7.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/ad3fb207b90ef6bcb995c72003f4ca33.jpeg)
现在,我们切换左边的Objects and Timeline 到 States,当前选中的States是CommonStates组中的Normal, 阅读过上一篇VSM教程的,相信对这里并不陌生,Normal表示Button控件的正常视图状态。
![](https://i-blog.csdnimg.cn/blog_migrate/3dfd5ef20f3425c3f440986d28d968d6.jpeg)
这里我们可以看到,在主设计窗口,Button样式仍旧是紫色
![](https://i-blog.csdnimg.cn/blog_migrate/2969f7654526a5efc54a71c831eea454.jpeg)
当我们选中MouseOver视图状态时,主设计窗口Button样式,变成默认的样式。这说明,每个Visual State视觉状态都有自己独立样式,和上一篇讲述的控件每个视图状态都有独立性是相符的。
![](https://i-blog.csdnimg.cn/blog_migrate/d22083593f883771684976e5d9c7cb33.jpeg)
所以,要修改完整的一套控件样式,需要以控件的视图状态为基础,修改每个会引起控件视图产生变化的状态。这里,我们选中MouseOver后,切换Tab到 Objects and Timeline,
选中“BackgroundGradient”,修改Button控件在鼠标覆盖后的背景,
![](https://i-blog.csdnimg.cn/blog_migrate/aa0a54015e3ee779b1dd0a405f6b3920.jpeg)
保存后,F5运行该例程,当鼠标放在Button上,自动会切换Button样式。
Normal状态:
![](https://i-blog.csdnimg.cn/blog_migrate/2719e55fe5cf15b9679e601f14dcc010.jpeg)
MouseOver状态:
![](https://i-blog.csdnimg.cn/blog_migrate/69e43e670f569773e64b6c7abe4c39d6.jpeg)
Pressed状态:
![](https://i-blog.csdnimg.cn/blog_migrate/e03b1dd86388a64b750baffc898a75a6.jpeg)
http://kevinfan.blog.51cto.com/1037293/294868
转载文章的地址