silverlight 样式学习

原文地址：http://www.cnblogs.com/Joetao/articles/2074727.html

 

<UserControl x:Class="StyleDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<!--
样式学习
(一)样式模板的基本知识
改变控件外观有2种方式
(1)Style
用Style的x:Key值来引用这个样式
用TargetType来声明作用的目标的类型(Button、ComboBox、Grid等Control)
通过Setter来声明作用目标的属性，每个Setter都要指定Property和Value
一个Style可以添加多个Seter
（二）样式的作用域
（1）全局样式
<Application.Resource>
</Application.Resource>
（2）局部样式
<UserControl.Resources>
</UserControl.Resources>
（3）内部样式
<Button Content="红色">
<Button.Style>
<Style TargetType="Button">
</Style>
</Button.Style>
</Button>
(三)控件模板
尽管通过属性可以改变控件的外观，但是这种改变是有限的。比喻要制作一个圆形按钮
控件模板也是样式的一个类型,对于一般样式我们的Property可以是Background、FontSize、Margin等简单属性
而对于控件模板样式的Property是Template，而Value是一个ControlTemplate

-->
<!--定义用户控件资源-->
<UserControl.Resources>
<!--Button样式1-->
<Style x:Key="buttonStyle1" TargetType="Button" >
<Setter Property="Background" Value="#ffee00"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Margin" Value="10,10,10,10"/>
</Style>
<!--Button样式2-->
<Style x:Key="buttonStyle2" TargetType="Button">
<Setter Property="Background" Value="White"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Margin" Value="25,25,25,25"/>
</Style>

<!--定义模板样式1-->
<Style x:Key="templateButtonStyle1" TargetType="Button">
<!--使用模板属性-->
<Setter Property="Template">
<Setter.Value>
<!--定义模板1-->
<ControlTemplate TargetType="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
TemplateBinding引用按钮本身的Content属性值，这样显示的内容不是“控件模板1”，而是后面的应用控件模板样式“我的控件”作为按钮内容
-->
<TextBlock Text="{TemplateBinding Content}" FontSize="24" Foreground="Blue" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--定义模板样式1-->
<Style x:Key="templateButtonStyle2" TargetType="Button">
<!--使用模板属性-->
<Setter Property="Template">
<Setter.Value>
<!--定义模板1-->
<ControlTemplate TargetType="Button">
<Grid Cursor="Hand" Margin="20">
<Ellipse Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="1"/>
<GradientStop Color="White" Offset="0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="控件模板2" FontSize="24" Foreground="Blue" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal">
<!--应用样式1的按钮-->
<Button Content="蓝色" Width="150" Height="80" Style="{StaticResource buttonStyle1}"/>
<!--应用样式2的按钮-->
<Button Content="白色" Width="150" Height="80" Style="{StaticResource buttonStyle2}"/>
<Button Content="红色" Width="150" Height="80">
<!--内联样式-->
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Margin" Value="25,25,25,25"/>
</Style>
</Button.Style>
</Button>
<!--应用全局样式-->
<Button Width="200" Height="80" Content="全局样式" Style="{StaticResource buttonStyleGlobal}"/>
<!--应用模板样式1-->
<Button Style="{StaticResource templateButtonStyle1}" Content="我的控件"/>
<!--应用模板样式2-->
<Button Style="{StaticResource templateButtonStyle2}" Content="我的控件"/>

</StackPanel>
</Grid>
</UserControl>