WPF界面设计技巧(10)-样式的继承

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

 

WPF界面设计技巧(10)-样式的继承

 

PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnblogs.com/SkyD/archive/2008/08/09/1264083.html 

欢迎帮我捉虫,以及与我交流WPF技术WPF界面设计技巧(10)-样式的继承

 

WPF的样式的继承属性极少被文章提及,以至于我在编写MailMail期间为此踌躇数日,最后终于在E文版的MS社区得到指点才得以解惑。

 

现将其分享出来,这是一个非常有用的特性,这是所有教程在讲Style时就该顺带讲出来的,我希望更多人看到,以少走弯路。

 

WPF的样式需要显示声明继承,即使用Style的BasedOn属性。

 

我们先在资源中定义一个基样式:

 

WPF界面设计技巧(10)-样式的继承      <Style x:Key="BASE">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Control.Margin" Value="6"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Control.Background">
WPF界面设计技巧(10)-样式的继承            
<Setter.Value>
WPF界面设计技巧(10)-样式的继承               
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="1" Color="#FF7A0000"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0.5" Color="#FFFF0000"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0.5" Color="#FFD40000"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0" Color="#FFFFC5C5"/>
WPF界面设计技巧(10)-样式的继承               
</LinearGradientBrush>
WPF界面设计技巧(10)-样式的继承            
</Setter.Value>
WPF界面设计技巧(10)-样式的继承         
</Setter>
WPF界面设计技巧(10)-样式的继承      
</Style>

 

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

 

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

 

WPF界面设计技巧(10)-样式的继承      <Style BasedOn="{StaticResource BASE}" TargetType="Button">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Foreground" Value="#FFFFFB92"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Padding" Value="8,3"/>
WPF界面设计技巧(10)-样式的继承      
</Style>
WPF界面设计技巧(10)-样式的继承      
<Style BasedOn="{StaticResource BASE}" TargetType="TextBox">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Foreground" Value="#FFFFFFFF"/>
WPF界面设计技巧(10)-样式的继承      
</Style>

 

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

 

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

 

WPF界面设计技巧(10)-样式的继承      <DockPanel Width="225" Height="256">
WPF界面设计技巧(10)-样式的继承         
<Button DockPanel.Dock="Bottom">Button
WPF界面设计技巧(10)-样式的继承         
</Button>
WPF界面设计技巧(10)-样式的继承         
<TextBox AcceptsReturn="True" DockPanel.Dock="Top" VerticalScrollBarVisibility="Visible">TextBox Test Test Test Test Test
WPF界面设计技巧(10)-样式的继承         
</TextBox>
WPF界面设计技巧(10)-样式的继承      
</DockPanel>

 

现在界面效果如下:

WPF界面设计技巧(10)-样式的继承

可以看到,按钮和文本框都继承了基样式中的背景和外边距。

 

此外,还可以使用BasedOn来继承现有样式。

 

这里的现有样式不是指WPF自带的主题基础样式,而是控件当前的样式,就是你上面看到的样式,我们下面将继承于当前的按钮样式,再进行一些改变。

 

在资源中新增:

 

WPF界面设计技巧(10)-样式的继承      <Style x:Key="NewButton" BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="FontWeight" Value="Bold"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="FontSize" Value="22"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="BorderBrush">
WPF界面设计技巧(10)-样式的继承            
<Setter.Value>
WPF界面设计技巧(10)-样式的继承               
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0" Color="#FFFF7300"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="1" Color="#03FF0000"/>
WPF界面设计技巧(10)-样式的继承               
</LinearGradientBrush>
WPF界面设计技巧(10)-样式的继承            
</Setter.Value>
WPF界面设计技巧(10)-样式的继承         
</Setter>
WPF界面设计技巧(10)-样式的继承      
</Style>

 

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

 

添加一个新按钮,应用这个样式:

 

WPF界面设计技巧(10)-样式的继承         <Button DockPanel.Dock="Bottom" Style="{StaticResource NewButton}">NewButton
WPF界面设计技巧(10)-样式的继承         
</Button>

 

现在的界面效果:

 

WPF界面设计技巧(10)-样式的继承

继承现有效果有什么意义?

 

比如我们引用了一个外来的整套界面样式,但在局部界面上需要修改一下,这时如果新设一个样式将会是大费周折的事,直接修改控件自身的属性又会造成冗余和不一致性,继承就是最佳的选择了。

 

 

通过继承基样式及充分地重用通用资源(如色彩、笔刷),我们不难实现界面的色彩风格切换功能。

 

为一套样式定义多种风格供选,或是让用户*定制他们喜欢的色彩主题,将是一项激动人心的功能。

 

完整代码:

 

WPF界面设计技巧(10)-样式的继承WPF界面设计技巧(10)-样式的继承Code
WPF界面设计技巧(10)-样式的继承
WPF界面设计技巧(10)-样式的继承
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
WPF界面设计技巧(10)-样式的继承   
<Page.Resources>
WPF界面设计技巧(10)-样式的继承      
<Style x:Key="BASE">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Control.Margin" Value="6"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Control.Background">
WPF界面设计技巧(10)-样式的继承            
<Setter.Value>
WPF界面设计技巧(10)-样式的继承               
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="1" Color="#FF7A0000"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0.5" Color="#FFFF0000"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0.5" Color="#FFD40000"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0" Color="#FFFFC5C5"/>
WPF界面设计技巧(10)-样式的继承               
</LinearGradientBrush>
WPF界面设计技巧(10)-样式的继承            
</Setter.Value>
WPF界面设计技巧(10)-样式的继承         
</Setter>
WPF界面设计技巧(10)-样式的继承      
</Style>
WPF界面设计技巧(10)-样式的继承      
<Style BasedOn="{StaticResource BASE}" TargetType="Button">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Foreground" Value="#FFFFFB92"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Padding" Value="8,3"/>
WPF界面设计技巧(10)-样式的继承      
</Style>
WPF界面设计技巧(10)-样式的继承      
<Style BasedOn="{StaticResource BASE}" TargetType="TextBox">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="Foreground" Value="#FFFFFFFF"/>
WPF界面设计技巧(10)-样式的继承      
</Style>
WPF界面设计技巧(10)-样式的继承      
<Style x:Key="NewButton" BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
WPF界面设计技巧(10)-样式的继承         
<Setter Property="FontWeight" Value="Bold"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="FontSize" Value="22"/>
WPF界面设计技巧(10)-样式的继承         
<Setter Property="BorderBrush">
WPF界面设计技巧(10)-样式的继承            
<Setter.Value>
WPF界面设计技巧(10)-样式的继承               
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="0" Color="#FFFF7300"/>
WPF界面设计技巧(10)-样式的继承                  
<GradientStop Offset="1" Color="#03FF0000"/>
WPF界面设计技巧(10)-样式的继承               
</LinearGradientBrush>
WPF界面设计技巧(10)-样式的继承            
</Setter.Value>
WPF界面设计技巧(10)-样式的继承         
</Setter>
WPF界面设计技巧(10)-样式的继承      
</Style>
WPF界面设计技巧(10)-样式的继承   
</Page.Resources>
WPF界面设计技巧(10)-样式的继承   
<Grid>
WPF界面设计技巧(10)-样式的继承      
<DockPanel Width="225" Height="256">
WPF界面设计技巧(10)-样式的继承         
<Button DockPanel.Dock="Bottom">Button
WPF界面设计技巧(10)-样式的继承         
</Button>
WPF界面设计技巧(10)-样式的继承         
<Button DockPanel.Dock="Bottom" Style="{StaticResource NewButton}">NewButton
WPF界面设计技巧(10)-样式的继承         
</Button>
WPF界面设计技巧(10)-样式的继承         
<TextBox AcceptsReturn="True" DockPanel.Dock="Top" VerticalScrollBarVisibility="Visible">TextBox Test Test Test Test Test
WPF界面设计技巧(10)-样式的继承         
</TextBox>
WPF界面设计技巧(10)-样式的继承      
</DockPanel>
WPF界面设计技巧(10)-样式的继承   
</Grid>
WPF界面设计技巧(10)-样式的继承
</Page>

 

 

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

 

没关系,重在分享,不怕丢龈~:

 

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

 

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

 

WPF界面设计技巧(10)-样式的继承

 

上一篇:Xcode使用技巧


下一篇:设计模式(二)工厂方法(创建型)