WPF样式使用方法

最新推荐文章于 2023-11-15 13:26:04 发布
最新推荐文章于 2023-11-15 13:26:04 发布
阅读量939 收藏 1
点赞数
分类专栏： WPF

 前面简单的说到了wpf中几种样式的用法，wpf有着类似web中的CSS一样，为界面上的元素定制外观，以提供更好的用户界面,这种灵活性也是winForm所不能及的，从前面讲到的可以知道在WPF应用程序中，通过控件的属性，我们也可以实现更改控件的外观。但是，这种方式局限性大、不灵活且不利于维护，比如一个，二个按钮的样式可以这样，如果有二十，三十个，甚至更多，难道也这样吗，显然这不是很好的选择，如果我们将上述控件的属性归纳起来，写到一段样式中，为按钮指定该样式（甚至用元素类型样式时，都不需要指定按钮样式），所有按钮就具有统一样式和外观了。如果想修改按钮外观，我们只需要改一下样式代码即可，所有按钮外观都会随之变化。

样式的使用有多种方法，如内联样式（定义在元素内部）、已命名样式（为样式命名，使用时通过名称引用）、元素类型样式（为一种类型的元素，指定一种样式）等等。

一、内联样式

比如下面的为textBox加样式

复制代码 
<TextBox Text="内容">
            <TextBox.Style>
                <Style>
                    <Setter Property="TextBox.FontSize" Value="16"></Setter>
                    <Setter Property="TextBox.Width" Value="80"></Setter>
                    <Setter Property="TextBox.Height" Value="40"></Setter>
          
                </Style>
            </TextBox.Style>
        </TextBox>
复制代码

就是说，我们可以通过在元素内部通过拓展属性Style来定义样式。但是缺点也是显而易见的，如果有多个这样的控件指向同一个样式，该怎么办呢，只能每个都要写，所以很不好，所以我们可以在资源中定义一个样式，然后让多个控件调用这一个样式即可

二、已命名样式

　将相同的内敛样式归纳起来，放入资源中，构成一个样式，并为它起一个名字。这样，就可以通过名字为元素指定该样式。

  <Window.Resources>
        <Style x:Key="buttonStyle">
            <Setter Property="Foreground" Value="#999999"/>
        </Style>
    
    </Window.Resources>

然后调用即可

 <Button Content="Button" Height="23" Style="{StaticResource buttonStyle}"  
HorizontalAlignment="Left" Margin="10,204,0,0" Name="button5" VerticalAlignment="Top" Width="75" />

如果给样式指定一种类型，则属性中的名字可以去掉，加上指定目标类型（TargetType）

    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="#999999"/>
        </Style>
    </Window.Resources>

　上述中的TargetType可以改成Control ，因为Button是从Control派生而来的。

如果其他控件也是派生自Control可以将Style1指定给这些控件也是合适的。这样就能使多种元素共用一种样式。

如：

复制代码 
  <Window.Resources>  
      <Style x:Key="Style1" TargetType="{x:Type Control }">          
  <Setter Property="FontSize" Value="16"></Setter>            <Setter Property="Width" Value="180"></Setter>   
         <Setter Property="Height" Value="30">
</Setter>       
 </Style>    
</Window.Resources>   
 <Grid>        
<Button Style="{StaticResource Style1}" Margin="23,32,95,139">Button1</Button>   
     <CheckBox Style="{StaticResource Style1}" Margin="23,130,95,41">Checkbox1</CheckBox> 
   </Grid>
复制代码

　Button、Check可以使用Style1，而TextBlock则不行，原因是TextBlock不是派生自Control。

重用样式（Reusing Styles）

　　重用样式指的是，样式可以拥有目标所没有的属性。比如，我们想定义一种样式，其中含有不想被所有元素共享的属性，而只希望这些非共享属性应用到特定的元素上。这时，我们就可以去掉目标类型，重新加上前缀。

复制代码 
    <Window.Resources>     
   <Style x:Key="Style1">   
         <Setter Property="CheckBox.FontSize" Value="16"></Setter>        
    <Setter Property="Button.Foreground" Value="Red"></Setter>    
        <Setter Property="CheckBox.IsChecked" Value="True"></Setter>     
   </Style>  
  </Window.Resources>  
  <Grid>      
  <CheckBox Style="{StaticResource Style1}" Margin="23,32,95,139">Button1</CheckBox>     
   <TextBlock Style="{StaticResource Style1}">TextBlock1</TextBlock>  
  </Grid>
复制代码

　将Style1同时指定给CheckBox1和TextBlock1，TextBlocak会自动忽略不适用它们自身的样式属性IsChecked。而二者公有的属性（比如Foreground、FontSize），不论加不加前缀，对二者都有效。

重写样式（Overriding Style）

　　重写样式属性类似于面向对象中的重写，其效果也类似于CSS中的样式覆盖。最终的外观取决于最近的样式或者属性。比如，给一个元素指定了一个样式，其中包含FontSize属性值为14。而在元素定义时，重新给它的属性FontSize设置了一个值18。最终元素文本的FontSize将为18。

 

复制代码 
  <Window.Resources>     
   <Style x:Key="Style1">    
        <Setter Property="Button.FontSize" Value="14"></Setter>    
    </Style>  
  </Window.Resources>   
 <Grid>       
 <Button Width="80" Height="30" FontSize="18">Button1</Button>   
 </Grid>
复制代码

　拓展样式（Extending Styles）

　　可以对现有样式进行拓展，类似于面向对象中的继承或派生，可以在添加新的属性或者重载已存在的属性。

复制代码 
  <Window.Resources>      
  <Style x:Key="Style1" TargetType="Button">
            <Setter Property="FontSize" Value="16"></Setter>  
          <Setter Property="Foreground" Value="Red"></Setter>        </Style>    
    <Style x:Key="Style2" BasedOn="{StaticResource Style1}" TargetType="Button">       
     <!--添加新属性-->           
 <Setter Property="FontWeight" Value="Bold"></Setter>  
          <!--重载-->          
  <Setter Property="Foreground" Value="Yellow"></Setter>      
  </Style>    </Window.Resources>    <Grid>       
 <Button Style="{StaticResource Style1}"  Width="80" Height="30" FontSize="18" Margin="109,55,109,116">Button1</Button>   
     <Button Style="{StaticResource Style2}" Width="80" Height="30" FontSize="18" Margin="109,120,109,51">Button2</Button> 
   </Grid>
复制代码

三、元素类型样式

　一般来说，我们希望用户界面上的控件拥有统一外观，比如所有按钮大小相同、颜色一致等，这时我们可以定义一种元素的样式，对一个范围内的所有元素都有效，这就是元素类型样式。

　　同一类型元素共享外观

　　倘若希望一个顶级窗口内所有的元素，具有相同的样式和外观——可以这样实现：1.在顶级窗口资源中定义一个样式，不标记x:Key，将TargetType设置为一种元素类型。2.定义元素，不用指定Style，窗口中所有该类型的元素，都将使用资源中定义的样式，并具有统一外观。

复制代码 
<Window.Resources>    
    <!--Button 样式-->     
   <Style TargetType="{x:Type Button}">  
          <Setter Property="FontWeight" Value="Normal"></Setter>          
  <Setter Property="Foreground" Value="Green"></Setter>      
  </Style>       
    <!--TextBlock 样式-->     
   <Style TargetType="TextBlock">   
         <Setter Property="FontSize" Value="16"></Setter>      
      <Setter Property="Foreground" Value="Red"></Setter>     
   </Style>   
 </Window.Resources> 
   <Grid>  
      <Button Name="Button1" Width="80" Height="30" Margin="46,41,172,130">Button1</Button>    
            <Button Name="Button2" Width="80" Height="30" Margin="46,90,172,80">Button2</Button>   
     <TextBlock Name="TextBlock1" Margin="164,41,38,0" Height="30" VerticalAlignment="Top">TextBlock1</TextBlock>   
     <TextBlock Name="TextBlock2" Margin="164,90,38,80">TextBlock2</TextBlock>  
  </Grid>
复制代码

　作用范围

　　以上的共享外观不仅仅局限于顶级窗口，而是根据你定义的样式所在的范围。如果你将样式定义在一个面板资源中，共享外观将仅仅作用该面板。

　　窗口范围（作用于该窗口）

 

复制代码 
<Window ...>
    <Window.Resources>
        <!--Button 样式-->
        <Style TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="Green"></Setter>
        </Style>           
    </Window.Resources>
</Window>
复制代码

面板范围（作用于该面板）

复制代码 
<Grid>
        <Grid.Resources>
            <!--Button 样式-->
            <Style TargetType="{x:Type Button}">
                <Setter Property="Foreground" Value="Green"></Setter>
            </Style>
        </Grid.Resources>
        <!---->
    </Grid>
复制代码

　应用程序范围（作用于该应用程序）

复制代码 
<Application ...>   
 <Application.Resources>     
   <!--Button 样式-->   
     <Style TargetType="{x:Type Button}">    
        <Setter Property="Foreground" Value="Green">
</Setter>      
  </Style>  
  </Application.Resources>
</Application>　　
复制代码

四、编程控制样式

通过代码更改按钮Button1的样式：

复制代码 
<Window.Resources>
        <!--Style1-->
        <Style x:Key="Style1" TargetType="{x:Type Button}">
            <Setter Property="FontWeight" Value="Normal"></Setter>
            <Setter Property="Foreground" Value="Green"></Setter>
        </Style>
        <!--Style2-->
        <Style x:Key="Style2" TargetType="{x:Type Button}">
            <Setter Property="FontWeight" Value="Bold"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>                        
        </Style>
    </Window.Resources>

    <Grid>
        <Button Name="Button1" Width="100" Height="40" Style="{StaticResource Style1}">Button</Button>        
        <Button Name="Button2" Width="150" Height="30" Click="Button2_Click" Margin="79,143,69,28">Change Button1's Style</Button>
    </Grid>
复制代码 
private void Button2_Click(object sender, RoutedEventArgs e)
{
    this.Button1.Style = (Style)FindResource("Style2");
}

 五、触发器

样式（Styles）由三部分构成：设置器（Setter）、触发器（Triggers）、资源（Resources）。触发器，让样式的使用更加准确、灵活和高效。触发器（Triggers）主要分为三类，属性触发器（检查从属属性即WPF元素自身属性）、数据触发器（检查任意可绑定的属性）、事件触发器（用于监听事件）。

属性触发器

　　检查从属属性的值，即WPF元素自身属性。比如按钮的内容、字体的大小、颜色等等。

复制代码 
<Window.Resources> 
       <Style TargetType="Button">    
        <Style.Triggers>           
     <Trigger Property="Content" Value="按钮">         
           <Setter Property="ToolTip" Value="这是一个按钮">
</Setter>              
  </Trigger>         
   </Style.Triggers>   
     </Style>    
</Window.Resources>
 <Button Content="按钮" Height="23" HorizontalAlignment="Left" Margin="28,6,0,0" Name="button1" VerticalAlignment="Top" Width="102" />
复制代码

注意的是： <Trigger Property="Content" Value="按钮">        一定要和<Button Content="按钮"..   content的值一样，否则掉不出来
　

多属性触发器

复制代码 
 <Window.Resources> 
       <Style TargetType="Button">      
      <Style.Triggers>     
           <Trigger Property="Content" Value="按钮">             
       <Setter Property="ToolTip" Value="这是一个按钮"></Setter>           
     </Trigger>           
     <Trigger Property="Content" Value="Button">   
                 <Setter Property="ToolTip" Value="This is a button"></Setter>          
      </Trigger>         
   </Style.Triggers>    
    </Style>    
</Window.Resources>
复制代码

多条件属性触发器

复制代码 
  <Window.Resources>   
     <Style TargetType="Button">   
         <Style.Triggers>        
        <MultiTrigger>           
         <!--条件列表-->            
        <MultiTrigger.Conditions>        
                <Condition Property="Content" Value="按钮"></Condition>      
                
  <Condition Property="Visibility" Value="Visible"></Condition>                    </MultiTrigger.Conditions>       
             <!--样式-->           
         <Setter Property="ToolTip" Value="这是一个可见按钮"></Setter>            
    </MultiTrigger>       
     </Style.Triggers>    
    </Style>  
  </Window.Resources>
复制代码

　数据触发器

　　可以检查任意可绑定的属性，比如CLR对象属性、XPath声明等。相对于属性触发器，数据触发器通常用来检查不可见的对象属性。

   

复制代码 
<Window x:Class="WpfApplication2.样式的用法.styleDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="styleDemo" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Name}" Value="dd">
                    <Setter Property="Foreground" Value="Tomato"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="{Binding Path=Name}" Height="23" Margin="103,94,120,84" Name="button1" Width="75"/>
    </Grid>
</Window>
复制代码
复制代码 
  public partial class styleDemo : Window
    {
        public styleDemo() 
        {
            InitializeComponent(); 
            DataContext = new Person("dddd", "dd"); }

        class Person { 
            string _Name;
            public string Name { get { return _Name; }
            set { _Name = value; } }
            string _Age; 
            public string Age { get { return _Age; } 
                set { _Age = value; } }
            public Person(string name, string age) 
            { _Name = name; _Age = age; } }
    }
复制代码

多条件数据触发器

复制代码 
<Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <MultiDataTrigger>
                    <!--条件列表-->
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=Name}" Value="李宝亨"/>
                        <Condition Binding="{Binding Path=Age}" Value="21"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Foreground" Value="Tomato"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="{Binding Path=Name}" Height="23" Margin="103,94,120,84" Name="button1" Width="75"/>
    </Grid>
复制代码

事件触发器

复制代码 
<Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <!--事件触发器-->
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.1" Duration="0:0:3"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>


转载自：http://www.cnblogs.com/shuang121/archive/2013/01/14/2860455.html
沙漠飞鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF实现DNA螺旋粒子动画特效
dnazhd的博客
09-08 841
实现效果如下： 步骤： 1、粒子类Particle.cs /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary> public Point Position; 2、粒子系统ParticleS
WPF实现仿Glitch闪烁特效
dnazhd的博客
08-28 1047
实现效果如下： 思路：利用关键帧动画和ClipPath来实现。 步骤：这里仅提供一个大致思路，具体样式可以根据需求调整。 1、窗体样式 <Grid Width="600" Height="300" ClipToBounds="True"> <Image Name="myBgImage" Source="Images/bg.jpg" Stretch="Fill"></Image> <Grid x:Name="myA
在WPF中将RoutedCommands下沉到ViewModel命令
04-11
这是“在WPF中将RoutedCommands与ViewModel一起使用”的替代方法。
WPF 样式的应用
weixin_33721427的博客
01-14 141
       前面简单的说到了wpf中几种样式的用法，wpf有着类似web中的CSS一样，为界面上的元素定制外观，以提供更好的用户界面,这种灵活性也是winForm所不能及的，从前面讲到的可以知道在WPF应用程序中，通过控件的属性，我们也可以实现更改控件的外观。但是，这种方式局限性大、不灵活且不利于维护，比如一个，二个按钮的样式可以这样，如果有二十，三十个，甚至更多，难道也这样吗，显然这不是很好的...
WPF 控件的外发光效果的简单实现
01-30 2067
主要是利用DropShadowEffect 具体数值设置如下 <DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="#FFA7D1E2" /> 颜色和宽度可以自行调整 效果如图 ...
html特效 wpf,利用WPF实现一个简单的文字粒子闪烁动画特效
weixin_39828331的博客
06-09 346
利用WPF实现一个简单的文字粒子闪烁动画特效发布时间：2020-11-06 16:04:19来源：亿速云阅读：124作者：Leah本篇文章给大家分享的是有关利用WPF实现一个简单的文字粒子闪烁动画特效，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。实现效果如下：思路：首先根据显示文本创建文本路径Geometry，然后在路径内随机生成圆形...
WPF自定义MenuItem样式的实现方法
12-31
默认的MenuItem样式比较普通，这次自定义MenuItem的样式也只是对MenuItem的颜色风格进行变化。需要其他功能的变化，大家可以根据样式代码进行扩展。 MenuItem的样式代码： <!--MenuItem--> <Style Target...
WPF ListView 漂亮样式
07-04
WPF ListView 漂亮样式，自己还可以根据自己的需求进行样式修改，表头、列表都可以根据注释进行拓展，很实用
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
WPF样式 WpfToolkit-master
12-29
WPF样式 WpfToolkit-master
Bootstrap风格的WPF样式
09-01
此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.这篇文章主要介绍了Bootstrap风格的WPF样式的相关资料，需要的朋友参考下
aspx网页背景图片设置代码_Vue+CSS3制作双螺旋DNA动画：代码详解和基础知识复习
weixin_39853968的博客
11-22 229
1 效果：2 知识点：=======2.1 html的基础知识。2.2 css3的基础知识。2.3 vue的基础知识。2.4 代码讲解非常清楚，小白看了都会。3 html骨架：========3.1 代码：Vue-CSS3-DNA/*css设置内容*/3.2 ：HTML5 中仅仅规定这一种声明。没有结束标签，声明不区分大小写。总是给您的 HTML 文档添加 声明，确保浏览器能够预先知道文档类型。...
WPF实现3D粒子波浪效果
dnazhd的博客
07-13 1063
实现效果如下： 步骤： 1、3D粒子类Particle.cs public class Particle { public Point3D Position;//位置 public double Size;//尺寸 public int XIndex;//X位置标识 public int YIndex;//Y位置标识 } 2、粒子系统ParticleSystem类 public class Pa
WPF实现圆形菜单动态展开折叠效果
dnazhd的博客
09-10 2550
实现效果如下： 思路：根据子菜单个数计算旋转角度动态生成子菜单，并设置展开折叠动画。 步骤： 1、自定义按钮MyButton，建立展示图像属性DisplayImage public class MyButton : Button { public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(
WPF样式的使用
zhruifei的专栏
08-30 713
原文链接：http://blog.csdn.net/pan_junbiao/article/details/50987932 样式的定义 样式的元素名称为Style,通过TargetType来声明作用的目标的类型，通过Setter来声明作用目标的属性，一个Style中可以添加多个Setter，在控件中使用Style的x:key值来引用这个样式，下面实现对按钮的样式定义。 1.1 定义样式<Wi
WPF学习系列之七 （样式与行为）
weixin_30376083的博客
09-24 77
样式（Styles）是组织和重用格式化选项的重要工具。不是使用重复的标记填充XAML，以设置诸如边距、颜色及字体等细节，而可以创建一系列封装所有这些细节的样式。然后可以在需要之处通过一个属性应用样式。 行为（behavior）是一个重用用户界面代码的工具，它封装了一些通用的UI功能。如果具有适当的行为，可以使用一两行XAML标记将其附加到一个元素，从而可以节省编写和调试代码的工作。 创建样...
WPF入门教程系列003-WPF的样式
最新发布
qq_52036416的博客
11-15 324
在WPF中，样式由一组属性和事件设置组成，它们定义了控件的外观、行为和布局。样式通常包含在XAML（可扩展应用程序标记语言）中，并可以应用于单个控件或整个应用程序。首先，让我们定义一个简单的样式来更改按钮的外观。在XAML中，我们可以使用元素来定义样式，并使用元素设置控件的属性。
WPF高级教程（十六）样式
白话屋
03-16 762
概念 样式是可以应用于元素的一系列属性值的集合。 样式期望使用一份xaml代码来设置一系列元素的细节，比如内外边距，字体颜色等。 样式类似于CSS但是要比CSS更加强大，强大之处在于： 可以设置依赖项属性，使其可以控制控件行为 支持触发器 可以使用模板重新定义控件的内置外观 定义和设置样式 定义样式 <Window.Resources> <Style x:Key="B...
wpf样式
05-31
WPF样式是一种在WPF应用程序中定义和应用视觉外观的方法。WPF样式定义了一个控件的外观和行为，并可应用于多个控件实例。样式包括属性设置，如字体大小和颜色，以及控件模板，如边框和背景。以下是一个示例样式定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值