WPF界面设计技巧（10）-样式的继承

原文:WPF界面设计技巧（10）-样式的继承

<Style x:Key="BASE">

<Setter Property="Control.Margin" Value="6"/>

<Setter Property="Control.Background">

<Setter.Value>

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

<GradientStop Offset="1" Color="#FF7A0000"/>

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

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

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

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

注意它设置属性时都是采用“Control.”前缀，因为我们没有为之确定TargetType，如果不使用这个前缀将会报错。

然后我们定义两个继承自它的样式，分别为对应按钮和文本框的样式：

<Style BasedOn="{StaticResource BASE}" TargetType="Button">

<Setter Property="Foreground" Value="#FFFFFB92"/>

<Setter Property="Padding" Value="8,3"/>

</Style>

<Style BasedOn="{StaticResource BASE}" TargetType="TextBox">

<Setter Property="Foreground" Value="#FFFFFFFF"/>

</Style>

BasedOn属性设为了我们先前设置的“BASE”，各自追加了一些属性的设置。

现在在界面上添加一个按钮和一个文本框控件：

<DockPanel Width="225" Height="256">

<Button DockPanel.Dock="Bottom">Button

</Button>

<TextBox AcceptsReturn="True" DockPanel.Dock="Top" VerticalScrollBarVisibility="Visible">TextBox Test Test Test Test Test

</TextBox>

</DockPanel>

现在界面效果如下：

<Style x:Key="NewButton" BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">

<Setter Property="FontWeight" Value="Bold"/>

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

<Setter Property="BorderBrush">

<Setter.Value>

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

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

<GradientStop Offset="1" Color="#03FF0000"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

BasedOn属性设为了按钮类型，在样式中改变了字体的尺寸和粗细以及按钮边框的颜色。

添加一个新按钮，应用这个样式：

<Button DockPanel.Dock="Bottom" Style="{StaticResource NewButton}">NewButton

</Button>

现在的界面效果：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Page.Resources>

<Style x:Key="BASE">

<Setter Property="Control.Margin" Value="6"/>

<Setter Property="Control.Background">

<Setter.Value>

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

<GradientStop Offset="1" Color="#FF7A0000"/>

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

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

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

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

<Style BasedOn="{StaticResource BASE}" TargetType="Button">

<Setter Property="Foreground" Value="#FFFFFB92"/>

<Setter Property="Padding" Value="8,3"/>

</Style>

<Style BasedOn="{StaticResource BASE}" TargetType="TextBox">

<Setter Property="Foreground" Value="#FFFFFFFF"/>

</Style>

<Style x:Key="NewButton" BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">

<Setter Property="FontWeight" Value="Bold"/>

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

<Setter Property="BorderBrush">

<Setter.Value>

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

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

<GradientStop Offset="1" Color="#03FF0000"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

</Page.Resources>

<Grid>

<DockPanel Width="225" Height="256">

<Button DockPanel.Dock="Bottom">Button

</Button>

<Button DockPanel.Dock="Bottom" Style="{StaticResource NewButton}">NewButton

</Button>

<TextBox AcceptsReturn="True" DockPanel.Dock="Top" VerticalScrollBarVisibility="Visible">TextBox Test Test Test Test Test

</TextBox>

</DockPanel>

</Grid>

</Page>

尽管有严重的火星嫌疑...

没关系，重在分享，不怕丢龈～：

我还是要顺路推荐一下这款XAML编辑器——Kaxaml：http://www.kaxaml.com/

实在太好用了，比微软那个XamlPad强老了，一定要普及到人手一份才对。