首页 > 其他分享 >WPF中的Style(风格,样式)

WPF中的Style(风格,样式)

时间:2023-06-06 16:05:02浏览次数:48  
标签:Style 样式 Button 设置 styled WPF button 属性

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

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

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

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

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

WPF中的Style(风格,样式)_sed

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

WPF中的Style(风格,样式)_sed

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

WPF中的Style(风格,样式)_sed

<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的影响。

WPF中的Style(风格,样式)_sed

<Button>normal button</Button>
<Button Style="{StaticResource ButtonStyle}">styled button</Button>

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

WPF中的Style(风格,样式)_sed

<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。
参考以下代码:

WPF中的Style(风格,样式)_sed

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

,即将Button的Foreground属性设置为Red。这里有一个隐含的意思是:当当Button的IsPressed属性值变为False的时候,Foreground属性将恢复原值。
你可以粘贴以下代码到XamlPad中查看效果:

WPF中的Style(风格,样式)_sed

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


标签:Style,样式,Button,设置,styled,WPF,button,属性
From: https://blog.51cto.com/u_4018548/6425142

相关文章

  • WPF 中的 经典的ModelView 通知页面更新 UI
    viewmodel------------------------------------------------------------------------------usingHPControls.Helper;usingSystem;usingSystem.ComponentModel;usingSystem.Threading;usingXiaowei.Models;usingXiaowei.Services;usingXiaowei.Settings;nam......
  • 如何设计React应用程序的样式——比较不同的选项
    样式在创建具有视觉吸引力和用户友好的Web应用程序方面起着至关重要的作用。对于React应用程序,可以通过多种方式来设置组件和UI元素的样式。在本文中,我们将探讨几个流行的选项,包括纯CSS、CSS模块、CSS预处理器、TailwindCSS、CSS-in-JS库(如StyledComponents)以及预构......
  • 如何使用TypeScript和Styled-Components构建图像轮播组件
    近年来,OTT(over-the-top)视频流媒体平台变得更加创新和易于使用。在他们的用户界面中,电影和连续剧的标题排列得清晰可见。在本教程中,我将指导您完成创建图像轮播组件的过程,该组件看起来就像您在许多OTT平台(想想Netflix)上看到的一样。我们将从创建原子组件开始,例如Tags、Descrip......
  • WPF教程(四)RelativeSource属性
    我们进行Bingding时,如果明确知道数据源的Name,就能用Source或者ElementName进行绑定,但是有时候我们需要绑定的数据源可能没有明确的Name,此时我们就需要利用Bingding的RelativeSource进行绑定,这种办法的意思是指当前元素和绑定源的位置关系。(1)控件关联自身的属性——Self <Windowx:......
  • WPF自学入门(四)WPF路由事件之自定义路由事件
      在上一篇博文中写到了内置路由事件,其实除了内置的路由事件,我们也可以进行自定义路由事件。接下来我们一起来看一下WPF中的自定义路由事件怎么进行创建吧。创建自定义路由事件分为3个步骤:1、声明并注册路由事件。2、利用CLR事件包装路由事件(封装路由事件)。3、创建可以激发路由......
  • wpf 自定义 RadioButton.
    <StyleTargetType="RadioButton"x:Key="nav"><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="RadioButton">......
  • [原]Wpf应用Path路径绘制圆弧
    1. 移动指令:MoveCommand(M):M起始点 或者:m起始点比如:M100,240或m100,240使用大写M时,表示绝对值;使用小写m时;表示相对于前一点的值,如果前一点没有指定,则使用(0,0)。2. 绘制指令(DrawCommand):我们可以绘制以下形状:(1)直线:Line(L)(2)水平直线:Horizontalline(H)(3)垂......
  • wpf 绘图
                       ......
  • WPF.Basic.深入Style
    Style用来在类型的不同实例之间共享属性、资源和事件处理程序,您可以将Style看作是将一组属性值应用到多个元素的捷径。这是MSDN上对Style的描述,翻译的还算中规中矩。Style(样式),简单来说,就是一种对属性值的批处理,类似于Html的CSS,可以快速的设置一系列属性值到UI元素。示......
  • WPF.Basic.样式基础及控件模板
    合集-WPF从入门到放弃(3)1.WPF入门笔记-01-入门基础以及常用布局05-202.WPF入门笔记-02-布局综合应用05-283.WPF入门笔记-03-样式基础及控件模板06-03收起......