WPF中使用Style设置界面控件外观属性

样式类似于Html中的CSS，如果你的界面有许多元素（例如按钮）的外观有相同的属性，那么可以把这些属性集中到一个称为资源的元素中，之后每个元素可以通过引用相应的资源来达到外观一致性的目的。

下面的Xaml演示了上述的效果：

 

< DockPanel  xmlns ="http://schemas.microsoft.com/winfx/avalon/2005"  

xmlns:x ="http://schemas.microsoft.com/winfx/xaml/2005"

>

< DockPanel .Resources >

     < Style  TargetType ="{x:Type Menu}"   >

         < Setter  Property ="FontSize"  Value ="12"   />

         < Setter  Property ="FontFamily"  Value ="Verdana"   />

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

     </ Style >

     < Style  x:Key ="Header"  TargetType ="{x:Type StackPanel}" >

         < Setter  Property ="Background" >

             < Setter .Value >

                 < LinearGradientBrush  StartPoint ="0,0"  EndPoint ="1,0" >

                     < LinearGradientBrush .GradientStops >

                         < GradientStop  Offset ="0"  Color ="#0000FF"   />

                         < GradientStop  Offset ="0.5"  Color ="#FFFFFF"   />

                         < GradientStop  Offset ="1"  Color ="#0000FF"   />

                     </ LinearGradientBrush.GradientStops >

                 </ LinearGradientBrush >

             </ Setter.Value >

     </ Setter >

     </ Style >

     < Style  TargetType ="{x:Type Button}" >

< Setter  Property ="Margin"  Value ="10,10,10,0" />

< Setter  Property ="DockPanel.Dock"  Value ="Top" />

< Setter  Property ="Height"  Value ="25" />

< Setter  Property ="Width"  Value ="100" />

< Setter  Property ="Foreground"  Value ="Black" />

< Setter  Property ="Background" >

   < Setter .Value >

     < RadialGradientBrush >

         < RadialGradientBrush .GradientStops >

< GradientStop  Offset ="0"  Color ="#FFFFFF"   />

< GradientStop  Offset ="2"  Color ="#0000FF"   />

         </ RadialGradientBrush.GradientStops >

     </ RadialGradientBrush >

   </ Setter.Value >

</ Setter >

       </ Style >

   </ DockPanel.Resources >

 

< StackPanel  Name ="Header"  DockPanel.Dock ="Top"  Height ="100"  Style ="{StaticResource Header}" />  

< Menu  DockPanel.Dock ="Top" >

< MenuItem  Header ="File" />

< MenuItem  Header ="Eidt"   />

< MenuItem  Header ="View"   />

< MenuItem  Header ="Tools" />

< MenuItem  Header ="Help" />

</ Menu >

 

< StackPanel  DockPanel.Dock ="Bottom"  Height ="40"  Background ="DarkBlue"   />

< StackPanel  DockPanel.Dock ="Left"  Width ="120"  Background ="LightGray" >

 

< Button  Height ="30"  HorizontalAlignment ="Left"  FontFamily ="VerDana" >

First </ Button >

< Button  Height ="30"  HorizontalAlignment ="Left"  FontFamily ="VerDana" >

Second </ Button >

< Button  Height ="30"  HorizontalAlignment ="Left"  FontFamily ="VerDana" >

Third </ Button >

< Button  Height ="30"  HorizontalAlignment ="Left"  FontFamily ="VerDana" >

Quit </ Button >

 

</ StackPanel >

< StackPanel  />

 

</ DockPanel >

 

 在代码中，我们在DockPanel的资源定义了Header的StackPanel背景以及Button的背景和其他属性。因为有多个StackPanel，我们只要求Header有渐变的背景，所以必须给Style一个Key，这样Header面板就可以通过Style="{StaticResource Header}"引用资源的设置。

在按钮的样式定义中，我们并没有设置key，这样可以对所有按钮有效。