WPF界面设计技巧(10)-样式的继承-阿里云开发者社区

开发者社区> 老朱教授> 正文

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

简介:
+关注继续查看

 

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

欢迎帮我捉虫,以及与我交流WPF技术

 

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

 

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

 

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

 

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

 

      <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>

 

现在界面效果如下:

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

 

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

 

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

 

在资源中新增:

 

      <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>

 

现在的界面效果:

 

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

 

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

 

 

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

 

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

 

完整代码:

 

ContractedBlock.gifCode

 

 

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

 

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

 

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

 

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

 

 


本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/08/09/1264294.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF界面设计技巧(2)—自定义漂亮的按钮样式
原文:WPF界面设计技巧(2)—自定义漂亮的按钮样式  上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Design 辅助了。
1825 0
WPF界面设计技巧(1)—不规则窗体图文指南
原文:WPF界面设计技巧(1)—不规则窗体图文指南  初到园子,奉上第一篇入门级教程,请勿见笑。 以往WinForm编程中,实现不规则窗体是有一定难度的,更难的是不规则窗体的边缘抗锯齿及局部透明处理。
934 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9936 0
借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制
原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的。
914 0
WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心     流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更强的编程支持及对WPF其他元素的兼容。
1125 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10878 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13673 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载