WPF中的Style(风格,样式)

原文地址为: WPF中的Style(风格,样式)

                                                                             WPF中的Style(风格,样式)
                                                                                                            周银辉

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

Style是作为一种资源被保存下来的. 看下面的例子:
None.gif   < Window .Resources >    
None.gif    
< Style  TargetType ="Button" >
None.gif      
< Setter  Property ="Foreground"   Value ="Blue" />
None.gif      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
None.gif    
</ Style >       
None.gif 
</ 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中查看效果:
None.gif < Window 
None.gif    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
None.gif    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
None.gif    Title
="StyleDemo"  Height ="417"  Width ="579"
None.gif    
>
None.gif  
None.gif  
None.gif  
< Window .Resources >     
None.gif    
< Style  TargetType ="Button" >
None.gif      
< Setter  Property ="Foreground"   Value ="Blue" />
None.gif      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
None.gif    
</ Style >        
None.gif  
</ Window.Resources >
None.gif  
None.gif  
None.gif    
< Grid  ShowGridLines ="True" >
None.gif      
None.gif      
< Grid .ColumnDefinitions >
None.gif        
< ColumnDefinition   Width ="50*" />
None.gif        
< ColumnDefinition  Width ="50*"   />
None.gif      
</ Grid.ColumnDefinitions >
None.gif      
< Grid .RowDefinitions >
None.gif        
< RowDefinition   Height ="25*" />
None.gif        
< RowDefinition   Height ="25*" />
None.gif        
< RowDefinition   Height ="25*" />
None.gif      
</ Grid.RowDefinitions >
None.gif
None.gif      
< Button  Grid.Column ="0"  Grid.ColumnSpan ="1"  Grid.Row ="0"  Grid.RowSpan ="1" > button1 </ Button >
None.gif      
< Button  Grid.Column ="2"  Grid.ColumnSpan ="1"  Grid.Row ="1"  Grid.RowSpan ="1" > button2 </ Button >
None.gif     
None.gif    
</ Grid >
None.gif  
None.gif
</ Window >
None.gif


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

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

然后我们使用Button的Style属性来指定该Button所要使用的Style,而其他没有将我们声明的Style指定为其样式的按钮将不受到该Style的影响。
None.gif < Button > normal button </ Button >
None.gif
< Button  Style ="{StaticResource ButtonStyle}" > styled button </ Button >
这样就很好的解决了Style强制影响每个Button的问题,你可以粘贴以下代码到XamlPad中查看效果:
None.gif < Window 
None.gif    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
None.gif    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
None.gif    Title
="StyleDemo"  Height ="417"  Width ="579"
None.gif    
>
None.gif  
None.gif  
None.gif  
< Window .Resources >    
None.gif    
< Style  TargetType ="Button"  x:Key ="ButtonStyle" >
None.gif      
< Setter  Property ="Foreground"   Value ="Blue" />
None.gif      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
None.gif    
</ Style >     
None.gif  
</ Window.Resources >
None.gif  
None.gif  
None.gif    
< Grid  ShowGridLines ="True" >
None.gif      
None.gif      
< Grid .ColumnDefinitions >
None.gif        
< ColumnDefinition   Width ="50*" />
None.gif        
< ColumnDefinition  Width ="50*"   />
None.gif      
</ Grid.ColumnDefinitions >
None.gif      
< Grid .RowDefinitions >
None.gif        
< RowDefinition   Height ="25*" />
None.gif        
< RowDefinition   Height ="25*" />
None.gif        
< RowDefinition   Height ="25*" />
None.gif      
</ Grid.RowDefinitions >
None.gif
None.gif      
< Button  Grid.Column ="0"  Grid.ColumnSpan ="1"  Grid.Row ="0"  Grid.RowSpan ="1" > normal button </ Button >
None.gif      
< Button  Grid.Column ="1"  Grid.ColumnSpan ="1"  Grid.Row ="1"  Grid.RowSpan ="1"  Style ="{StaticResource ButtonStyle}" > styled button1 </ Button >
None.gif      
< Button  Grid.Column ="0"  Grid.ColumnSpan ="1"  Grid.Row ="2"  Grid.RowSpan ="1"  Style ="{StaticResource ButtonStyle}" > styled button2 </ Button >
None.gif    
None.gif    
</ Grid >
None.gif  
None.gif
</ Window >
None.gif


为了让我们的Style对外界的交互做出外观上的相应,比如当鼠标按下时蓝色的文本变成红色,当鼠标松开时文本又恢复蓝色,我们可以在Style中添加Trigger(触发器),除此之外,与类的继承原理相类似,我们还可以使用BaseOn来使一个Style“继承”另一个Style。
参考以下代码:
None.gif   < Window .Resources >
None.gif    
None.gif    
< Style  TargetType ="Button"  x:Key ="ButtonStyle" >
None.gif      
< Setter  Property ="Foreground"   Value ="Blue" />
None.gif      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
None.gif    
</ Style >
None.gif    
None.gif    
< Style  TargetType ="Button"  x:Key ="TriggerButtonStyle"  BasedOn ="{StaticResource ButtonStyle}" >
None.gif      
< Style .Triggers >
None.gif        
< Trigger   Property ="IsPressed"  Value ="True" >
None.gif          
< Setter  Property ="Foreground"  Value ="Red" />
None.gif        
</ Trigger >
None.gif      
</ Style.Triggers >
None.gif    
</ Style >
None.gif    
None.gif  
</ 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中查看效果:
None.gif < Window 
None.gif    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
None.gif    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
None.gif    Title
="StyleDemo"  Height ="417"  Width ="579"
None.gif    
>
None.gif  
None.gif  
None.gif  
< Window .Resources >
None.gif    
None.gif    
< Style  TargetType ="Button"  x:Key ="ButtonStyle" >
None.gif      
< Setter  Property ="Foreground"   Value ="Blue" />
None.gif      
< Setter  Property ="FontFamily "  Value ="CourierNew" />
None.gif    
</ Style >
None.gif    
None.gif    
< Style  TargetType ="Button"  x:Key ="TriggerButtonStyle"  BasedOn ="{StaticResource ButtonStyle}" >
None.gif      
< Style .Triggers >
None.gif        
< Trigger   Property ="IsPressed"  Value ="True" >
None.gif          
< Setter  Property ="Foreground"  Value ="Red" />
None.gif        
</ Trigger >
None.gif      
</ Style.Triggers >
None.gif    
</ Style >
None.gif    
None.gif  
</ Window.Resources >
None.gif  
None.gif  
None.gif    
< Grid  ShowGridLines ="True" >
None.gif      
None.gif      
< Grid .ColumnDefinitions >
None.gif        
< ColumnDefinition   Width ="50*" />
None.gif        
< ColumnDefinition  Width ="50*"   />
None.gif      
</ Grid.ColumnDefinitions >
None.gif      
< Grid .RowDefinitions >
None.gif        
< RowDefinition   Height ="25*" />
None.gif        
< RowDefinition   Height ="25*" />
None.gif        
< RowDefinition   Height ="25*" />
None.gif      
</ Grid.RowDefinitions >
None.gif
None.gif      
< Button  Grid.Column ="0"  Grid.ColumnSpan ="1"  Grid.Row ="0"  Grid.RowSpan ="1" > normal button </ Button >
None.gif      
< Button  Grid.Column ="1"  Grid.ColumnSpan ="1"  Grid.Row ="1"  Grid.RowSpan ="1"  Style ="{StaticResource ButtonStyle}" > styled button </ Button >
None.gif      
< Button  Grid.Column ="0"  Grid.ColumnSpan ="1"  Grid.Row ="2"  Grid.RowSpan ="1"  Style ="{StaticResource TriggerButtonStyle}" > trigger button </ Button >
None.gif    
None.gif    
</ Grid >
None.gif  
None.gif
</ Window >
None.gif

转载请注明本文地址: WPF中的Style(风格,样式)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF可以使用Style来定义控件的外观和行为,可以通过编辑Style来自定义控件的外观和行为。 首先,你需要在XAML定义一个Style,可以使用<Style>标签或者<Window.Resources>标签的<Style>标签。例如,下面是一个定义Button控件Style的示例: ``` <Window.Resources> <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Background" Value="Green"/> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="14"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Padding" Value="10,5"/> <Setter Property="Margin" Value="5"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> ``` 在这个示例,我们定义了一个名为“MyButtonStyle”的Button控件Style,设置了Button的背景、前景、字体大小、字体粗细、内边距、外边距、水平对齐方式、垂直对齐方式和模板。 接下来,你可以将这个Style应用到Button控件上,例如: ``` <Button Content="Click me!" Style="{StaticResource MyButtonStyle}"/> ``` 通过这种方式,你可以编辑Style来自定义控件的外观和行为。你可以在Style设置控件的属性,例如背景、前景、字体等,也可以设置控件的模板,来自定义控件的外观和行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值