14WPF樣式與模板

1、一、WPF樣式類似于Web應(yīng)用程序中的CSS，在WPF中可以為控件定義統(tǒng)一的樣式（Style）。樣式屬于資源的一種，例如為Button定義統(tǒng)一的背景顏色和字體： 1: <Window.Resources> 2: <Style 3: TargetType="Button"> 4: <Setter Property="Background" Value="Yellow" /> 5: <Setter Property="Margin" Value="5" /&

2、gt; 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="

3、;Red" Background="White">Button B</Button> 13: </StackPanel>從執(zhí)行的結(jié)果上來看：· 在Style中定義的屬性及值，影響到Window中的所有類型為Button的控件的樣式 · 在Button中可以新定義其他屬性（如Foreground），覆蓋Style中的定義（Background） 這種樣式，類似于CSS中的類型選擇器，為某種類型定義樣式。此外還可以在Style中加入x:Key屬性，做為特定的樣式（注意，這種也需要定義TargetType）；定義時還可以

4、基于已定義的某種樣式，例如，基于剛才的Button的樣式，更改字體的大小及文本的前景及背景顏色： 1: <Window.Resources> 2: <Style 3: TargetType="Button"> 4: <Setter Property="Background" Value="Yellow" /> 5: <Setter Property="Margin" Value="5" /> 6: <Setter Property="

5、;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 Pro

6、perty="Background" Value="Green" /> 14: <Setter Property="Foreground" Value="Yellow" /> 15: <Setter Property="FontSize" Value="28"/> 16: </Style> 17: </Window.Resources> 18: <StackPanel> 19: <Button>Bu

7、tton 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">

8、; 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="#0

9、000FF" /> 28: </LinearGradientBrush.GradientStops> 29: </LinearGradientBrush> 30: </Button.Foreground> 31: </Button> 32: </StackPanel>二、控件模板（ControlTemplate）當(dāng)使用一個控件時，如果控件的屬性、方法、事件滿足程序的需求，但控件的外觀不滿足要求的時候，除了自定義控件這種方法外，我們還可以通過使用“控件模板”的方式更改控件的外觀。例如定義一個圓形的按鈕： 1: <W

10、indow.Resources> 2: <Style TargetType="Button" x:Key="ButtonStyle"> 3: <!-設(shè)置按鈕的默認的樣式-> 4: <Setter Property="FontFamily" Value="Comic Sans MS"/> 5: <Setter Property="FontSize" Value="14"/> 6: <Setter Property=&q

11、uot;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"

12、; Color="#fff" /> 12: <GradientStop Offset="1.0" Color="#009" /> 13: </LinearGradientBrush.GradientStops> 14: </LinearGradientBrush> 15: </Setter.Value> 16: </Setter> 17: <!-設(shè)置按鈕的模板-> 18: <Setter Property="Template">

13、; 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"

14、/> 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"

15、 36: Content="My Button"> 37: </Button> 38: <Button Margin="5" Width="200">Common Button</Button> 39: </StackPanel>三、觸發(fā)器值得注意的是，這個時候，對于此按鈕，無論是否獲得焦點、鼠標(biāo)是處于其上方，顯示的外觀均是相同的，如果要定義以上的一些效果，可以使用觸發(fā)器來實現(xiàn)。Style、ControlTemplate 和 DataTemplate 都具有 Triggers 屬性

16、，該屬性可以包含一組觸發(fā)器。某個屬性值更改時，或某個事件引發(fā)時，觸發(fā)器會相應(yīng)地設(shè)置屬性或啟動操作（如動畫操作）。觸發(fā)器包含以下幾種：· 屬性觸發(fā)器 · EventTrigger 和 Storyboard · MultiTrigger、DataTrigger 和 MultiDataTrigger 我們這里可以使用屬性觸發(fā)器來實現(xiàn)：例如，在ControlTemplate中（即上段代碼28行前插入以下代碼）： 1: <ControlTemplate.Triggers> 2: <Trigger Property="IsMouseOver" Value="True"> 3: <!-鼠標(biāo)在上移動時-> 4: <Setter Property="Foreground" Value="Yellow" /> 5: </Trigger&