样式
样式类似于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,这样对所有按钮有效。
本例中我们不打算对代码做更多的解释,仔细研究代码,想必你会理解。下一次我们介绍图形功能。
WPF体验(一)
WPF体验(二)
WPF体验(四)
WPF体验(五)