WPF第六章样式与模板

一、WPF样式

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

1:

2:

3:TargetType="Button">

4:

5:

6:

7:

8:

9:

10:

11:Button A

12:Button B

13:

从执行的结果上来看：

?在Style中定义的属性及值，影响到Window中的所有类型为Button的控件的样式

?在Button中可以新定义其他属性（如Foreground），覆盖Style中的定义（Background）这种样式，类似于CSS中的类型选择器，为某种类型定义样式。

此外还可以在Style中加入x:Key属性，做为特定的样式（注意，这种也需要定义TargetType）；定义

时还可以基于已定义的某种样式，例如，基于刚才的Button的样式，更改字体的大小及文本的前景及背

景颜色：

1:

2:

3:TargetType="Button">

4:

5:

6:

7:

8:

9:

10:TargetType="Button"

11:x:Key="ButtonStyleA"

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

13:

14:

15:

16:

17:

18:

19:Button A

20:Button B

21:Button C

22:

23:

24:

25:

26:

27:

28:

29:

30:

31:

32:

二、控件模板（ControlTemplate）

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

1:

2:

32:

33:

34:

35:Width="100"Height="100"

36:Content="My Button">

37:

38:Common Button

39:

三、触发器

值得注意的是，这个时候，对于此按钮，无论是否获得焦点、鼠标是处于其上方，显示的外观均是相同的，如果要定义以上的一些效果，可以使用触发器来实现。

Style、ControlTemplate 和DataTemplate 都具有Triggers 属性，该属性可以包含一组触发器。某个属性值更改时，或某个事件引发时，触发器会相应地设置属性或启动操作（如动画操作）。

触发器包含以下几种：

?属性触发器

?EventTrigger 和Storyboard

?MultiTrigger、DataTrigger 和MultiDataTrigger

我们这里可以使用属性触发器来实现：

例如，在ControlTemplate中（即上段代码28行前插入以下代码）：

1:

2:

3:

4:

5:

6:

7:

8:

9:

10:

当按键获得键盘焦点时：

鼠标在其上时：

如果要做到一个应用程序其基本的内容不变，但改变整个应用程序的外观可以这样做：?对于每一套外观定义一个ResourceDictionary

?在应用程序中，动态加载此应用程序（或窗体）的Resource

例如，如下的应用程序，在选择不同的用户时，显示不同的Canvas背景及图片：

主题样式A：

主题样式B：

主题样式C：

主题样式A的ResourceDictionary的XAML文件内容：

1:

2:xmlns="https://www.sodocs.net/doc/6714160659.html,/winfx/2006/xaml/presentation"

3:xmlns:x="https://www.sodocs.net/doc/6714160659.html,/winfx/2006/xaml">

4:

5:

15:

样式B、样式C的XAML代码与其类似，在这里省略。

窗体应用程序的XAML及CS代码如下：

1:

2:xmlns="https://www.sodocs.net/doc/6714160659.html,/winfx/2006/xaml/presentation"

3:xmlns:x="https://www.sodocs.net/doc/6714160659.html,/winfx/2006/xaml"

4:Title="TheMe Demo"Height="223"Width="319"ResizeMode="NoResize"Loaded="Window_Load ed">

5:

6:

7:Canvas.Left="129"Canvas.Top="20"

8:x:Name="userImage"/>

9:

10:Text="Name:"TextWrapping="Wrap"

11:Canvas.Left="12"Canvas.Top="11"/>

12:

13:IsSynchronizedWithCurrentItem="True"

14:Canvas.Left="12"Canvas.Top="37"

15:x:Name="userName"SelectionChanged="userName_SelectionChanged"/>

16:

17:

1:using System;

2:using System.Windows;

3:using System.Windows.Controls;

4:using System.Windows.Media.Imaging;

5:

6:namespace StyleAndTemplete

7: {

8:///

11:public partial class TheMeDemo : Window

12: {

13:public TheMeDemo()

14: {

15: InitializeComponent();

16: }

17:

18:private void Window_Loaded(object sender, RoutedEventArgs e)

19: {

20: userName.Items.Add("Patrick");

21: userName.Items.Add("Abbey");

22: userName.Items.Add("Tobey");

23:

24: userName.SelectedIndex = 0;

25: }

26:

27:private void userName_SelectionChanged(object sender, SelectionChangedEventArgs e)

28: {

29:string selectedTitle = userName.SelectedItem.ToString();

30:string imgName = string.Format("/TitleImage/tile_{0}.png", selectedTitle); 31:

32: BitmapImage img = new BitmapImage(

33:new Uri(imgName,UriKind.Relative));

34:

35: userImage.Source = img;

36:

37:string dicName = string.Format(

38:"{0}Resource.xaml", selectedTitle);

39:

40:this.Resources = (ResourceDictionary)(Application.LoadComponent(

41:new Uri(dicName,UriKind.Relative)));

42: }

43: }

44: }

wpf自定义slider控件

自定义Slider控件 最终效果： 界面：