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，这样可以对所有按钮有效。