艾伟:WPF中的Style(风格,样式)

简介: 在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而不必分别设置每个按钮的风格。

在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而不必分别设置每个按钮的风格。

Style是作为一种资源被保存下来的. 看下面的例子:

  < Window .Resources >    
    
< Style  TargetType ="Button" >
      
< Setter  Property ="Foreground"   Value ="Blue" />
      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
    
Style>      
 
Window.Resources>

我们声明了一个Style,它被声明在Window.Resources中说明它的有效范围是当前窗体,TargetType="Button" 指示该Style的作用对象是Button类的实例,也就是说在当前窗体中的所有Button实例都将受到该Style的影响(除非某Button有明确地指明它所使用的是另外的Style)。
<Setter Property="Foreground"  Value="Blue"/> 这里的Setter是一个设置器,用来设置该Style要对TargetType的那些属性或对象进行设置,我们这里设置的是Button的Foreground属性,将其值设置为Blue,同理,我们将Button的FontFamily属性设置为CourierNew

这样一来,在默认情况下,被加载到窗口中的所有Button对象都将受到这个Style的影响,从而文本变成统一的蓝色CourierNew字体。
你可以粘贴以下代码到XamlPad中查看效果:

< Window 
    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Title
="StyleDemo"  Height ="417"  Width ="579"
    
>
  
  
  
< Window .Resources >     
    
< Style  TargetType ="Button" >
      
< Setter  Property ="Foreground"   Value ="Blue" />
      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
    
Style>       
  
Window.Resources>
  
  
    
<Grid ShowGridLines="True">
      
      
<Grid.ColumnDefinitions>
        
<ColumnDefinition  Width="50*"/>
        
<ColumnDefinition Width="50*" />
      
Grid.ColumnDefinitions>
      
<Grid.RowDefinitions>
        
<RowDefinition  Height="25*"/>
        
<RowDefinition  Height="25*"/>
        
<RowDefinition  Height="25*"/>
      
Grid.RowDefinitions>

      
<Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">button1 Button>
      
<Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">button2 Button>
     
    
Grid>
  
Window>


接下来很容易想到的一个问题是,想上述代码的强制窗口的所有按钮都受声明的Style的影响是不是有点强奸民意,如果我只想我定义的Style影响指定的Button对象而不是所有的Button对象应该怎么办呢?
参考以下代码:我们为Style添加一个x:Key="ButtonStyle"

   < Window .Resources >
    
    
< Style  TargetType ="Button"  x:Key ="ButtonStyle" >
      
< Setter  Property ="Foreground"   Value ="Blue" />
      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
    
Style>
        
  
Window.Resources>

然后我们使用Button的Style属性来指定该Button所要使用的Style,而其他没有将我们声明的Style指定为其样式的按钮将不受到该Style的影响。
< Button > normal button Button>
<Button Style="{StaticResource ButtonStyle}">styled button Button>

这样就很好的解决了Style强制影响每个Button的问题,你可以粘贴以下代码到XamlPad中查看效果:

< Window 
    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Title
="StyleDemo"  Height ="417"  Width ="579"
    
>
  
  
  
< Window .Resources >    
    
< Style  TargetType ="Button"  x:Key ="ButtonStyle" >
      
< Setter  Property ="Foreground"   Value ="Blue" />
      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
    
Style>    
  
Window.Resources>
  
  
    
<Grid ShowGridLines="True">
      
      
<Grid.ColumnDefinitions>
        
<ColumnDefinition  Width="50*"/>
        
<ColumnDefinition Width="50*" />
      
Grid.ColumnDefinitions>
      
<Grid.RowDefinitions>
        
<RowDefinition  Height="25*"/>
        
<RowDefinition  Height="25*"/>
        
<RowDefinition  Height="25*"/>
      
Grid.RowDefinitions>

      
<Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">normal button Button>
      
<Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button1 Button>
      
<Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button2 Button>
    
    
Grid>
  
Window>



为了让我们的Style对外界的交互做出外观上的相应,比如当鼠标按下时蓝色的文本变成红色,当鼠标松开时文本又恢复蓝色,我们可以在Style中添加Trigger(触发器),除此之外,与类的继承原理相类似,我们还可以使用BaseOn来使一个Style“继承”另一个Style。
参考以下代码:

  < Window .Resources >
    
    
< Style  TargetType ="Button"  x:Key ="ButtonStyle" >
      
< Setter  Property ="Foreground"   Value ="Blue" />
      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
    
Style>
    
    
<Style TargetType="Button" x:Key="TriggerButtonStyle" BasedOn="{StaticResource ButtonStyle}">
      
<Style.Triggers>
        
<Trigger  Property="IsPressed" Value="True">
          
<Setter Property="Foreground" Value="Red"/>
        
Trigger>
      
Style.Triggers>
    
Style>
    
  
Window.Resources>

我们所声明的第二个Style,即TriggerButtonStyle,它“继承”于ButtonStyle,那么TriggerButtonStyle将会从ButtonStyle那里得到蓝色CourierNew文本的性质。然后我们使用了Trigger来响应鼠标按下,  <Trigger  Property="IsPressed" Value="True"> 表示当Button的IsPressed属性值变为True的时候,将做如下设置<Setter Property="Foreground" Value="Red"/>,即将Button的Foreground属性设置为Red。这里有一个隐含的意思是:当当Button的IsPressed属性值变为False的时候,Foreground属性将恢复原值。
你可以粘贴以下代码到XamlPad中查看效果:

<Window 
    
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Title
="StyleDemo" Height="417" Width="579"
    
>
  
  
  
<Window.Resources>
    
    
<Style TargetType="Button" x:Key="ButtonStyle">
      
<Setter Property="Foreground"  Value="Blue"/>
      
<Setter Property="FontFamily " Value="CourierNew"/>
    
Style>
    
    
<Style TargetType="Button" x:Key="TriggerButtonStyle" BasedOn="{StaticResource ButtonStyle}">
      
<Style.Triggers>
        
<Trigger  Property="IsPressed" Value="True">
          
<Setter Property="Foreground" Value="Red"/>
        
Trigger>
      
Style.Triggers>
    
Style>
    
  
Window.Resources>
  
  
    
<Grid ShowGridLines="True">
      
      
<Grid.ColumnDefinitions>
        
<ColumnDefinition  Width="50*"/>
        
<ColumnDefinition Width="50*" />
      
Grid.ColumnDefinitions>
      
<Grid.RowDefinitions>
        
<RowDefinition  Height="25*"/>
        
<RowDefinition  Height="25*"/>
        
<RowDefinition  Height="25*"/>
      
Grid.RowDefinitions>

      
<Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">normal button Button>
      
<Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button Button>
      
<Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource TriggerButtonStyle}">trigger button Button>
    
    
Grid>
  
Window>
目录
相关文章
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
282 0
|
16天前
|
开发者 C# 存储
WPF开发者必读:资源字典应用秘籍,轻松实现样式与模板共享,让你的WPF应用更上一层楼!
【8月更文挑战第31天】在WPF开发中,资源字典是一种强大的工具,用于共享样式、模板、图像等资源,提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践,并通过示例展示了如何在项目中有效利用资源字典,实现资源的重用和动态绑定。
34 0
|
16天前
|
开发者 C# 存储
WPF开发者必读:样式与模板的艺术,轻松定制UI外观,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性,而模板则允许自定义控件布局与子控件,两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识,通过示例展示了如何创建并应用它们来改变按钮的外观,从而提升用户体验。
24 0
|
1月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
31 0
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:【WPF】右下角弹出自定义通知样式(Notification)——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
2976 0
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
200 1
|
4月前
|
C#
浅谈WPF之样式与资源
WPF通过样式,不仅可以方便的设置控件元素的展示方式,给用户呈现多样化的体验,还简化配置,避免重复设置元素的属性,以达到节约成本,提高工作效率的目的,样式也是资源的一种表现形式。本文以一个简单的小例子,简述如何设置WPF的样式以及资源的应用,仅供学习分享使用,如有不足之处,还请指正。
98 0
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
171 0
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
181 0
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
108 0