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

技术2024-11-04 31

一、WPF样式

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

　　从执行的结果上来看：

　　在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>

当按键获得键盘焦点时：

　　鼠标在其上时：

最新回复(0)