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

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

时间： 2024-10-12 18:13:17

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

从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第一讲 WPF中 windows消息机制

谈到桌面应用程序,我们第一反应就是它的消息机制是怎么处理的,那么我们就先聊聊这个windows消息机制 谈起“消息机制”这个词,我们都会想到Windows的消息机制,系统将键盘鼠标的行为包装成一个Windows Message,然后系统主动将这些Windows Message派发给特定的窗口,实际上消息是被Post到特定窗口所在线程的消息队列,应用程序的消息循环再不断的从消息队列当中获取消息,然后再派发给特定窗口类的窗口过程来处理,在窗口过程中完成一次用户交互. 其实,WPF的底层也是基于Win

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

后面在我们这项目中会大量用到模板,主要指的是空间模板,数据模板会用得比较少,下面我想介绍下控件模板和数据模板,我看到有位大神写得比较不错,我整理了下,让大家能更好理解,供大家参考, 首先介绍 DataTemplate DataTemplate: 是数据内容的表现,一条数据显示成什么样子 1. 数据模版常用的地方有以下几处: ContentControl的ContentTemplate属性. ItemsControl的ItemTemplate属性. GridViewColumn的CellTempl

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

上讲我们介绍了DataTemplate,现在我们就介绍下ControlTemplate,可能后面大多在编码时候会出现一些英文,工作习惯,请见谅. ControlTemplate: 控件的外观,也就是控件是什么样子 后面在我们这个项目中会大量用到这个东西, 现在我大概介绍一下你怎样去使用一个控件模板,首先你得定义一个控件模板,基本格式如下: <ControlTemplate x:Key="按钮控件模板名称"> 在这里就可以去定义你当前这个模板的具体样式,比如你定义一个按钮的样

从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第七讲 WPF 系统UI结构说明与AvalonDock的使用

说到WPF UI, 现在网上到处都有现成的UI, 我觉得还是AvalonDock算是比较适合企业级系统点,一般向ModernUI之类的只能做做小的App还凑合这用. 这边我分享一个DLL, AvalonDock.dll 访问密码 2f90 , 你们可以去下载,后面我们的demo中就是用这样一种UI结构. 其实对于一个系统的设计,我们要考虑到整体的业务逻辑,数据结构,业务需求与拓展等各方面,我这主要还是分模块一步步慢慢介绍下去,没有具体的项目,我就分模块去慢慢介绍. 这里就说Avalondock的

从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第十讲 WPF 系统MainWindow

之前有个前辈和我说过这样一句话,其实写代码就和你写一本书一样,要有章节可循,要让读者一看就明白要点在哪里,要找什么信息就能够知道从哪里去找,这就是一门艺术,说的这些我一直记在心里,一直都朝这个方向去发展. 现在我们就翻开这个项目的第一页,当然一本书得有一个包装,接下来我们就来实现我们的MainWindow一块. 首先我们就为我们的MainWindow做一个Template,就按照传统的来说,第一栏是标题,下面就是menu 和 toobar, 再下面就是一个左侧栏和一个右侧栏,接着最下面就是一个状

WPF MVVM模式的一些理解

/*本文转自 http://www.cnblogs.com/sirkevin/archive/2012/11/28/2793471.html */ 使用WPF+Mvvm开发一年多,期间由于对Mvvm模式的理解不足,遇到了很多问题,也绕了很多弯子:网上提供的Mvvm的示例比较简单,实际项目中的需求也各种各样.不过经过几个项目,也有了一些对Mvvm模式的理解: 1. Mvvm是什么,Mvvm是怎么来的?Mvvm模式广泛应用在WPF项目开发中,使用此模式可以把UI和业务逻辑分离开,使UI设计人员和业务

WPF MVVM从入门到精通6：RadioButton等一对多控件的绑定

原文:WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 ? WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF MVVM从入门到精通4:命令和事件 WPF MVVM从入门到精通5:PasswordBox的绑定 WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 WPF MVVM从入门到精通7:关闭窗口和打开新窗口 WPF MVVM从入门到精通8:数据验证

WPF MVVM从入门到精通3：数据绑定

原文:WPF MVVM从入门到精通3:数据绑定 ? WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF MVVM从入门到精通4:命令和事件 WPF MVVM从入门到精通5:PasswordBox的绑定 WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 WPF MVVM从入门到精通7:关闭窗口和打开新窗口 WPF MVVM从入门到精通8:数据验证 完整示例代码下载LoginDe

WPF MVVM从入门到精通8：数据验证

原文:WPF MVVM从入门到精通8:数据验证 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF MVVM从入门到精通4:命令和事件 WPF MVVM从入门到精通5:PasswordBox的绑定 WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 WPF MVVM从入门到精通7:关闭窗口和打开新窗口 WPF MVVM从入门到精通8:数据验证 完整示例代码下载LoginDemo