WPF样式(Style)与模板(Template)
2010-04-30 15:40
447 查看
一、WPF样式
类似于Web应用程序中的CSS,在WPF中可以为控件定义统一的样式(Style)。样式属于资源的一种,例如为Button定义统一的背景颜色和字体:
从执行的结果上来看:
在Style中定义的属性及值,影响到Window中的所有类型为Button的控件的样式
在Button中可以新定义其他属性(如Foreground),覆盖Style中的定义(Background)
这种样式,类似于CSS中的类型选择器,为某种类型定义样式。
此外还可以在Style中加入x:Key属性,做为特定的样式(注意,这种也需要定义TargetType);定义时还可以基于已定义的某种样式,例如,基于刚才的Button的样式,更改字体的大小及文本的前景及背景颜色:
鼠标在其上时:
[/code]
类似于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的样式,更改字体的大小及文本的前景及背景颜色:
<Window.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="Yellow" /> <Setter Property="Margin" Value="5" /> <Setter Property="FontFamily" Value="Comic Sans MS"/> <Setter Property="FontSize" Value="14"/> </Style> <Style TargetType="Button" x:Key="ButtonStyleA" BasedOn="{StaticResource {x:Type Button}}"> <Setter Property="Background" Value="Green" /> <Setter Property="Foreground" Value="Yellow" /> <Setter Property="FontSize" Value="28"/> </Style> </Window.Resources> <StackPanel> <Button>Button A</Button> <Button Foreground="Red" Background="White">Button B</Button> <Button Style="{StaticResource ButtonStyleA}">Button C</Button> <Button Style="{StaticResource ButtonStyleA}" Content="Button D"> <Button.Foreground> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.0" Color="#FFFFFF" /> <GradientStop Offset="1.0" Color="#0000FF" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Button.Foreground> </Button> </StackPanel>
二、控件模板(ControlTemplate) 当使用一个控件时,如果控件的属性、方法、事件满足程序的需求,但控件的外观不满足要求的时候,除了自定义控件这种方法外,我们还可以通过使用“控件模板”的方式更改控件的外观。例如定义一个圆形的按钮:<Window.Resources> <Style TargetType="Button" x:Key="ButtonStyle"> <!--设置按钮的默认的样式--> <Setter Property="FontFamily" Value="Comic Sans MS"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Foreground" Value="Black" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.0" Color="#fff" /> <GradientStop Offset="1.0" Color="#009" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Setter.Value> </Setter> <!--设置按钮的模板--> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Fill="{TemplateBinding Background}"/> <ContentPresenter Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel> <Button Margin="5" Style="{StaticResource ButtonStyle}" Width="100" Height="100" Content="My Button"> </Button> <Button Margin="5" Width="200">Common Button</Button> </StackPanel>
[code]
三、触发器
值得注意的是,这个时候,对于此按钮,无论是否获得焦点、鼠标是处于其上方,显示的外观均是相同的,如果要定义以上的一些效果,可以使用触发器来实现。
Style、ControlTemplate 和 DataTemplate 都具有 Triggers 属性,该属性可以包含一组触发器。某个属性值更改时,或某个事件引发时,触发器会相应地设置属性或启动操作(如动画操作)。
触发器包含以下几种:
属性触发器
EventTrigger 和 Storyboard
MultiTrigger、DataTrigger 和 MultiDataTrigger
我们这里可以使用属性触发器来实现:
例如,在ControlTemplate中(即上段代码28行前插入以下代码):
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--鼠标在上移动时-->
<Setter Property="Foreground" Value="Yellow" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<!--控件获得键盘焦点时-->
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
当按键获得键盘焦点时:
鼠标在其上时:
[/code]
相关文章推荐
- WPF样式(Style)与模板(Template)
- WPF and Silverlight 学习笔记(十八):WPF样式(Style)与模板(Template)
- WPF and Silverlight 学习笔记(十八):WPF样式(Style)与模板(Template)
- WPF学习笔记(1):样式(Style)与模板(Template)
- WPF QuickStart系列之样式和模板(Style and Template)
- WPF样式(Style)与模板(Template)
- WPF样式(Style)与模板(Template)
- 项模板选择器属性(ItemTemplateSelector属性)和样式选择器(ItemContainerStyleSelector)
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- [WPF系列]-数据邦定之DataTemplate 对 ItemsControl 进行样式和模板处理
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- 样式和模板快速入门Style,Template
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- 项模板选择器属性(ItemTemplateSelector属性)和样式选择器(ItemContainerStyleSelector)
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
- 16.WPF样式(Style)与模板(Template)
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template