WPF学习笔记（1）：样式（Style）与模板（Template）

一、WPF样式　　类似于Web应用程序中的CSS，在WPF中可以为控件定义统一的样式（Style）。样式属于资源的一种，例如为Button定义统一的背景颜色和字体：

　　1:　<Window.Resources>

　　2:　　　<Style　

　　3:　　　　　TargetType="Button">

　　4:　　　　　<Setter　Property="Background"　Value="Yellow"　/>

　　5:　　　　　<Setter　Property="Margin"　Value="5"　/>

　　6:　　　　　<Setter　Property="FontFamily"　Value="Comic　Sans　MS"/>

　　7:　　　　　<Setter　Property="FontSize"　Value="14"/>

　　8:　　　</Style>

　　9:　</Window.Resources>

　10:　<StackPanel>

　11:　　　<Button>Button　A</Button>

　12:　　　<Button　Foreground="Red"　Background="White">Button　B</Button>

　13:　</StackPanel>

　　从执行的结果上来看：　　在Style中定义的属性及值，影响到Window中的所有类型为Button的控件的样式　　在Button中可以新定义其他属性（如Foreground），覆盖Style中的定义（Background）　　这种样式，类似于CSS中的类型选择器，为某种类型定义样式。　　此外还可以在Style中加入x:Key属性，做为特定的样式（注意，这种也需要定义TargetType）；定义时还可以基于已定义的某种样式，例如，基于刚才的Button的样式，更改字体的大小及文本的前景及背景颜色：

　　1:　<Window.Resources>

　　2:　　　<Style　

　　3:　　　　　TargetType="Button">

　　4:　　　　　<Setter　Property="Background"　Value="Yellow"　/>

　　5:　　　　　<Setter　Property="Margin"　Value="5"　/>

　　6:　　　　　<Setter　Property="FontFamily"　Value="Comic　Sans　MS"/>

　　7:　　　　　<Setter　Property="FontSize"　Value="14"/>

　　8:　　　</Style>

　　9:　　　<Style

　10:　　　　　TargetType="Button"

　11:　　　　　x:Key="ButtonStyleA"

　12:　　　　　BasedOn="{StaticResource　{x:Type　Button}}">

　13:　　　　　<Setter　Property="Background"　Value="Green"　/>

　14:　　　　　<Setter　Property="Foreground"　Value="Yellow"　/>

　15:　　　　　<Setter　Property="FontSize"　Value="28"/>

　16:　　　</Style>

　17:　</Window.Resources>

　18:　<StackPanel>

　19:　　　<Button>Button　A</Button>

　20:　　　<Button　Foreground="Red"　Background="White">Button　B</Button>

　21:　　　<Button　Style="{StaticResource　ButtonStyleA}">Button　C</Button>

　22:　　　<Button　Style="{StaticResource　ButtonStyleA}"　Content="Button　D">

　23:　　　　　<Button.Foreground>

　24:　　　　　　　<LinearGradientBrush　StartPoint="0.5,0"　EndPoint="0.5,1">

　25:　　　　　　　　　<LinearGradientBrush.GradientStops>

　26:　　　　　　　　　　　<GradientStop　Offset="0.0"　Color="#FFFFFF"　/>

　27:　　　　　　　　　　　<GradientStop　Offset="1.0"　Color="#0000FF"　/>

　28:　　　　　　　　　</LinearGradientBrush.GradientStops>

　29:　　　　　　　</LinearGradientBrush>

　30:　　　　　</Button.Foreground>

　31:　　　</Button>

　32:　</StackPanel>

　　二、控件模板（ControlTemplate）　　当使用一个控件时，如果控件的属性、方法、事件满足程序的需求，但控件的外观不满足要求的时候，除了自定义控件这种方法外，我们还可以通过使用“控件模板”的方式更改控件的外观。例如定义一个圆形的按钮：

　　1:　<Window.Resources>　　2:　　　<Style　TargetType="Button"　x:Key="ButtonStyle">　　3:　　　　　<!--设置按钮的默认的样式-->　　4:　　　　　<Setter　Property="FontFamily"　Value="Comic　Sans　MS"/>　　5:　　　　　<Setter　Property="FontSize"　Value="14"/>　　6:　　　　　<Setter　Property="Foreground"　Value="Black"　/>　　7:　　　　　<Setter　Property="Background">　　8:　　　　　　　<Setter.Value>　　9:　　　　　　　　　<LinearGradientBrush　StartPoint="0.5,0"　EndPoint="0.5,1">　10:　　　　　　　　　　　<LinearGradientBrush.GradientStops>　11:　　　　　　　　　　　　　<GradientStop　Offset="0.0"　Color="#fff"　/>　12:　　　　　　　　　　　　　<GradientStop　Offset="1.0"　Color="#009"　/>　13:　　　　　　　　　　　</LinearGradientBrush.GradientStops>　14:　　　　　　　　　</LinearGradientBrush>　15:　　　　　　　</Setter.Value>　16:　　　　　</Setter>　17:　　　　　<!--设置按钮的模板-->　18:　　　　　<Setter　Property="Template">　19:　　　　　　　<Setter.Value>　20:　　　　　　　　　<ControlTemplate　TargetType="Button">　21:　　　　　　　　　　　<Grid>　22:　　　　　　　　　　　　　<Ellipse　Fill="{TemplateBinding　Background}"/>　23:　　　　　　　　　　　　　<ContentPresenter　24:　　　　　　　　　　　　　　　Margin="5"　25:　　　　　　　　　　　　　　　HorizontalAlignment="Center"　26:　　　　　　　　　　　　　　　VerticalAlignment="Center"/>　27:　　　　　　　　　　　</Grid>　28:　　　　　　　　　</ControlTemplate>　29:　　　　　　　</Setter.Value>　30:　　　　　</Setter>　31:　　　</Style>　32:　</Window.Resources>　33:　<StackPanel>　34:　　　<Button　Margin="5"　Style="{StaticResource　ButtonStyle}"　　35:　　　　　　　Width="100"　Height="100"　　36:　　　　　　　Content="My　Button">　37:　　　</Button>　38:　　　<Button　Margin="5"　Width="200">Common　Button</Button>　39:　</StackPanel>

　　三、触发器　　值得注意的是，这个时候，对于此按钮，无论是否获得焦点、鼠标是处于其上方，显示的外观均是相同的，如果要定义以上的一些效果，可以使用触发器来实现。　　Style、ControlTemplate 和 DataTemplate 都具有 Triggers 属性，该属性可以包含一组触发器。某个属性值更改时，或某个事件引发时，触发器会相应地设置属性或启动操作（如动画操作）。　　触发器包含以下几种：　　属性触发器　　EventTrigger 和 Storyboard　　MultiTrigger、DataTrigger 和 MultiDataTrigger　　我们这里可以使用属性触发器来实现：　　例如，在ControlTemplate中（即上段代码28行前插入以下代码）：

　　1:　<ControlTemplate.Triggers>　　2:　　　<Trigger　Property="IsMouseOver"　Value="True">　　3:　　　　　<!--鼠标在上移动时-->　　4:　　　　　<Setter　Property="Foreground"　Value="Yellow"　/>　　5:　　　</Trigger>　　6:　　　<Trigger　Property="IsKeyboardFocused"　Value="True">　　7:　　　　　<!--控件获得键盘焦点时-->　　8:　　　　　<Setter　Property="Foreground"　Value="White"　/>　　9:　　　</Trigger>　10:　</ControlTemplate.Triggers>

当按键获得键盘焦点时：

　　鼠标在其上时：