vs2010 学习Silverlight学习笔记(7)：控件样式与模板

概要：

终于知道Silverlight——App.xaml是干什么用的了，不仅可以用来封装样式（类似css），还可以制定控件模版。。。好强大的功能啊。

封装：

继续学习《一步一步学Silverlight 2系列（8）：使用样式封装控件观感》。
上面的例子只要照着做很容易就成功了，但是咱们的学会自己来啊，那我就自己试验试试。
App.xaml代码：

<Style x:Key="ell" TargetType="Ellipse">
<!--Style x:Key="此样式名称" TargetType="样式指定的控件"-->
<Setter Property="Fill" Value="Orange"></Setter>
<Setter Property="Width" Value="100"></Setter>
<Setter Property="Height" Value="100"></Setter>
<!--Setter Property="属性名" Value="属性值"-->
</Style>

MainPage.xaml代码：Style="{StaticResource ell}绑

<Grid x:Name="LayoutRoot" Background="#46461F">
<Ellipse HorizontalAlignment="Left" Margin="10,10,0,0"
Name="ellipse1" Stroke="Black" StrokeThickness="1"
VerticalAlignment="Top"
Style="{StaticResource ell}"/>
</Grid>

很简单吧，如果遇到大量样式复用的时候，这样会很方便的。

控件模版：

第一个制定控件内容的试验不成功，查了一下说是Silverlight版本问题。不过这个例子做的挺漂亮的，个人希望也能做出类似的控件来。
第二个用模版制定控件的试验倒是成功了，可是App.xaml中好多节点我仍然不了解，看来我学东西还停在表面呃。

再把app.xaml贴出来： 　　能看懂，却自己写不出来，真蛋疼。

<Style x:Key="RoundButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootElement">
<Rectangle Width="200" Height="80" RadiusX="15" RadiusY="15">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0">
<GradientStop Color="#FFFFFF" Offset="0.0" />
<GradientStop Color="#EC04FA" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FCB2FD" Offset="0" />
<GradientStop Color="#FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<TextBlock Text="我也做出来了" FontSize="26" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

第三个是个可以灵活用的例子，不像2中把样式写死了。我以前学过Asp.net自定义控件，这个很容易就看懂了。

<Style x:Key="RoundButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootElement">
<Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
RadiusX="15" RadiusY="15">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0">
<GradientStop Color="#FFFFFF" Offset="0.0" />
<GradientStop Color="#EC04FA" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#EC04FA" Offset="0" />
<GradientStop Color="#FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<ContentPresenter
Content="{TemplateBinding Content}"
FontSize="{TemplateBinding FontSize}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}">
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

后记：

　　李老师的代码被我copy的差不多了，但是越到后来越是觉得Silverlight深奥，尽管李老师讲的很精彩，但真正被我学到手能用的越来
越少。现在觉得写笔记给自己复习用真的不错。
总目录
上一篇：vs2010 学习Silverlight学习笔记(6)：全屏模式
下一篇：vs2010 学习Silverlight学习笔记(8)：使用用户控件