码迷,mamicode.com
首页 > Windows程序 > 详细

从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第五讲 WPF中 Style

时间:2015-11-18 14:17:18      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:

Style这个东西几乎是无处不在,这个类似于web开发中的css样式,想要做一个很丰富的UI,这个东西是必不可少的,我也不是专业的UI开发者,这边只能介绍Style在WPF中的用法

 

下面有一个下载地址,这个demo还可以供初学者学习

 

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>
 
参考: http://www.cnblogs.com/zhouyinhui/archive/2007/03/27/690431.html
技术分享

 

从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第五讲 WPF中 Style

标签:

原文地址:http://www.cnblogs.com/hwy425/p/4974149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!