WPF样式的使用

最新推荐文章于 2024-03-06 18:29:24 发布
最新推荐文章于 2024-03-06 18:29:24 发布
阅读量3.3k 收藏 3
点赞数 2
分类专栏： C#

一.样式的定义

1.不显式定义key标记

当样式中没有定义key标记时，则对应的样式会指定应用到所有的目标对象上。如果要 使其不引用事先定义的样式，使用 Style =" {x:Null} " 

<Window x:Class="StyleDemo.StyleDefineAndUse"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Window.Resources>
        <!--定义样式-->
        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="Times New Roman" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>
    <StackPanel Margin="5">
        <!--由于前面定义的样式没有定义key标记,如果没有显示指定Style为null，这按钮将指定引用事先定义的样式-->
        <Button Padding="5" Margin="5">Customized Button</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <!--使其不引用事先定义的样式-->
        <Button Padding="5" Margin="5" Style="{x:Null}">A Normal Button</Button>
    </StackPanel>
</Window>
具体的运行效果如下图所示：

2.显式定义key

如果显式为样式定义了key标记的话，则必须显式指定样式Key的方式，对应的样式才会被应用到目标对象上
 
<Window x:Class="StyleDemo.ReuseFontWithStyles"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ReuseFontWithStyles" Height="300" Width="300">
    <Window.Resources>
        <!--带有key标签的样式-->
        <Style TargetType="Button" x:Key="BigButtonStyle">
            <Setter Property="FontFamily" Value="Times New Roman" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>
    <StackPanel Margin="5">
        <!--如果不显式指定样式key将不会应用样式-->
        <Button Padding="5" Margin="5">Normal Button</Button>
        <Button Padding="5" Margin="5" Style="{StaticResource BigButtonStyle}">Big Button</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <!--使其不引用事先定义的样式-->
        <Button Padding="5" Margin="5" Style="{x:Null}">A Normal Button</Button>
    </StackPanel>
</Window>
具体的运行效果如下图所示：

3.BasedOn属性：通过设置BasedOn属性，可以继承某个样式

  1. <Window.Resources>  
  2.     <!--定义按钮公共样式-->  
  3.     <Style x:Key="gBut" TargetType="{x:Type Button}">  
  4.         <!--手型-->  
  5.         <Setter Property="Cursor" Value="Hand"/>  
  6.         <!--宽度-->  
  7.         <Setter Property="Width" Value="150"/>  
  8.         <!--长度-->  
  9.         <Setter Property="Height" Value="80"/>  
  10.     </Style>  
  11.           
  12.     <!--定义按钮样式1-->  
  13.     <Style x:Key="cBtn1" TargetType="{x:Type Button}" BasedOn="{StaticResource gBut}">  
  14.         <!--背景色-->  
  15.         <Setter Property="Background" Value="Black"/>  
  16.         <!--字号-->  
  17.         <Setter Property="FontSize" Value="24"/>  
  18.         <!--字颜色-->  
  19.         <Setter Property="Foreground" Value="Blue"/>  
  20.         <!--字间距-->  
  21.         <Setter Property="Margin" Value="20"/>  
  22.     </Style>  
  23.   
  24.     <!--定义按钮样式2-->  
  25.     <Style x:Key="cBtn2" TargetType="{x:Type Button}" BasedOn="{StaticResource gBut}">  
  26.         <!--背景色-->  
  27.         <Setter Property="Background" Value="White"/>  
  28.         <!--字号-->  
  29.         <Setter Property="FontSize" Value="24"/>  
  30.         <!--字颜色-->  
  31.         <Setter Property="Foreground" Value="Red"/>  
  32.         <!--字间距-->  
  33.         <Setter Property="Margin" Value="10"/>  
  34.     </Style>  
  35. </Window.Resources>

二.样式触发器

1.属性触发器

　　WPF样式还支持触发器，在样式中定义的触发器，只有在该属性或事件发生时才会被触发，下面具体看看简单的样式触发器是如何定义和使用的，具体的XAML代码如下所示：

<Window x:Class="StyleDemo.SimpleTriggers"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleTriggers" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="BigFontButton">
            <Style.Setters>
                <Setter Property="Control.FontFamily" Value="Times New Roman" />
                <Setter Property="Control.FontSize" Value="18" />

            </Style.Setters>
            <!--样式触发器-->
            <Style.Triggers>
                <!--获得焦点时触发-->
                <Trigger Property="Control.IsFocused" Value="True">
                    <Setter Property="Control.Foreground" Value="Red" />
                </Trigger>
                <!--鼠标移过时触发-->
                <Trigger Property="Control.IsMouseOver" Value="True">
                    <Setter Property="Control.Foreground" Value="Yellow" />
                    <Setter Property="Control.FontWeight" Value="Bold" />
                </Trigger>
                <!--按钮按下时触发-->
                <Trigger Property="Button.IsPressed" Value="True">
                    <Setter Property="Control.Foreground" Value="Blue" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel Margin="5">
        <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButton}" 
              >A Big Button</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <Button Padding="5" Margin="5"
            >A Normal Button</Button>
    </StackPanel>
</Window>

　　此时的运行效果如下图所示：


2.事件触发器

　　上面定义的触发器都是在某个属性发生变化时触发的，也可以定义当某个事件激活时的触发器，我们也把这样的触发器称为事件触发器，下面示例定义的事件触发器是等待MouseEnter事件，一旦触发MouseEnter事件，则动态改变按钮的FontSize属性来形成动画效果，具体的XAML代码如下所示：

<Window x:Class="StyleDemo.EventTrigger"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="EventTrigger" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="BigFontButton">
            <Style.Setters>
                <Setter Property="Control.FontFamily" Value="Times New Roman" />
                <Setter Property="Control.FontSize" Value="18" />
                <Setter Property="Control.FontWeight" Value="Bold" />
            </Style.Setters>
            <Style.Triggers>
                <!--定义事件触发器-->
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <!--事件触发时只需的操作-->
                    <EventTrigger.Actions>
                        <!--把动画放在动画面板中-->
                        <BeginStoryboard>
                            <!--在0.2秒的时间内将字体放大到22单位-->
                            <Storyboard>
                                <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="FontSize"
                  To="22"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <!--鼠标移开触发的事件-->
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <!--在1秒的时间内将字体尺寸缩小到原来的大小-->
                            <!--如果目标字体尺寸没有明确指定，则WPF将默认使用第一次动画之前按钮的字体尺寸-->
                            <Storyboard>
                                <DoubleAnimation
                  Duration="0:0:1"
                  Storyboard.TargetProperty="FontSize"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>     
    </Window.Resources>
    <StackPanel Margin="5">
        <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButton}" 
              >A Big Button</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <Button Padding="5" Margin="5"
            >A Normal Button</Button>
    </StackPanel>
</Window>

　　此时的运行效果如下图所示：



3.MultiTrigger

MultiTrigger是个容易让人误解的名字，会让人以为是多个Trigger集成在一起，实际上叫MultiConditionTrigger更合适，因为必须多个条件同时成立时才会触发。MultiTrigger比Trigger多了一个Conditions属性，需要同时成立的条件就储存在这个集合中。
  1. <Window.Resources>  
  2.     <Style TargetType="CheckBox">  
  3.         <Style.Triggers>  
  4.             <MultiTrigger>  
  5.                 <MultiTrigger.Conditions>  
  6.                     <Condition Property="IsChecked" Value="true"/>  
  7.                     <Condition Property="Content" Value="正如我悄悄的来"/>  
  8.                 </MultiTrigger.Conditions>  
  9.                 <MultiTrigger.Setters>  
  10.                     <Setter Property="FontSize" Value="20"/>  
  11.                     <Setter Property="Foreground" Value="Orange"/>  
  12.                 </MultiTrigger.Setters>  
  13.             </MultiTrigger>  
  14.         </Style.Triggers>  
  15.     </Style>  
  16. </Window.Resources>  
  17.       
  18. <StackPanel>  
  19.     <CheckBox Content="悄悄的我走了" Margin="5"/>  
  20.     <CheckBox Content="正如我悄悄的来" Margin="5,0"/>  
  21.     <CheckBox Content="我挥一挥衣袖" Margin="5"/>  
  22.     <CheckBox Content="不带走一片云彩" Margin="5,0"/>  
  23. </StackPanel>  

4.由数据触发的DataTrigger

程序中经常会遇到基于数据执行某些判断情况，遇到这种情况时我们可以考虑使用DataTrigger。DataTrigger对象的Binding属性会把数据源不断送过来，一旦送了的值与Value属性一致，DataTrigger即被触发。

下面例子中，当TextBox的Text长度小于7个字符时其Border会保持红色。XAML代码如下：

  1. <Window x:Class="WpfApplication1.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:local="clr-namespace:WpfApplication1"  
  5.         Title="WPF样式的使用" Height="500" Width="800" WindowStartupLocation="CenterScreen">  
  6.     <Window.Resources>  
  7.         <local:L2BConverter x:Key="cvtr" />  
  8.         <Style TargetType="TextBox">  
  9.             <Style.Triggers>  
  10.                 <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text.Length,Converter={StaticResource cvtr}}" Value="false">  
  11.                     <Setter Property="BorderBrush" Value="Red"/>  
  12.                     <Setter Property="BorderThickness" Value="1"/>  
  13.                 </DataTrigger>  
  14.             </Style.Triggers>  
  15.         </Style>  
  16.     </Window.Resources>  
  17.       
  18.     <StackPanel>  
  19.         <TextBox Margin="5"/>  
  20.         <TextBox Margin="5,0"/>  
  21.         <TextBox Margin="5"/>  
  22.     </StackPanel>  
  23. </Window> 
这里用到了Converter，我们创建如下的Converter：
  1. using System;  
  2. using System.Windows.Data;  
  3.   
  4. namespace WpfApplication1  
  5. {  
  6.     public class L2BConverter : IValueConverter  
  7.     {  
  8.         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
  9.         {  
  10.             int textLength = (int)value;  
  11.             return textLength > 6 ? true : false;  
  12.         }  
  13.   
  14.         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
  15.         {  
  16.             throw new NotImplementedException();  
  17.         }  
  18.     }  
  19. } 
经Converter转换后，长度值会转换成bool类型值。DataTrigger的Value被设置为false，也就是说当TextBox的文本长度小于7时DataTrigger会使用自己的一组Setter把TextBox的边框设置为红色。

5.多条件触发的MultiDataTrigger

有时候我们会遇到要求多个数据条件同时满足时才能触发变化的需求，此时可以考虑使用MultiDataTrigger。比如有这样一个需求：用户界面使用ListBox显示了一列Student数据，当Student对象同时满足ID为2、Name为Tom的时候，条目就高亮显示，XAML代码如下：
  1. <Window x:Class="WpfApplication1.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:local="clr-namespace:WpfApplication1"  
  5.         Title="WPF样式的使用" Height="500" Width="800" WindowStartupLocation="CenterScreen">  
  6.     <Window.Resources>  
  7.         <Style TargetType="ListBoxItem">  
  8.             <!--使用Style设置DataTemplate-->  
  9.             <Setter Property="ContentTemplate">  
  10.                 <Setter.Value>  
  11.                     <DataTemplate>  
  12.                         <StackPanel Orientation="Horizontal">  
  13.                             <TextBlock Text="{Binding ID}" Width="60"/>  
  14.                             <TextBlock Text="{Binding Name}" Width="120"/>  
  15.                             <TextBlock Text="{Binding Age}" Width="60"/>  
  16.                         </StackPanel>  
  17.                     </DataTemplate>  
  18.                 </Setter.Value>  
  19.             </Setter>  
  20.             <!--MultiDataTrigger-->  
  21.             <Style.Triggers>  
  22.                 <MultiDataTrigger>  
  23.                     <MultiDataTrigger.Conditions>  
  24.                         <Condition Binding="{Binding Path=ID}" Value="2"/>  
  25.                         <Condition Binding="{Binding Path=Name}" Value="Tom"/>  
  26.                     </MultiDataTrigger.Conditions>  
  27.                     <MultiDataTrigger.Setters>  
  28.                         <Setter Property="Background" Value="Orange"/>  
  29.                     </MultiDataTrigger.Setters>  
  30.                 </MultiDataTrigger>  
  31.             </Style.Triggers>  
  32.         </Style>  
  33.     </Window.Resources>  
  34.       
  35.     <StackPanel>  
  36.         <ListBox x:Name="listBoxStudent" Margin="5"/>  
  37.     </StackPanel>  
  38. </Window>
后台代码：
  1. /// <summary>  
  2. /// MainWindow.xaml 的交互逻辑  
  3. /// </summary>  
  4. public partial class MainWindow : Window  
  5. {  
  6.     public MainWindow()  
  7.     {  
  8.         InitializeComponent();  
  9.   
  10.         List<Student> stuList = new List<Student>(){  
  11.             new Student(){ID="1",Name="Peter",Age=25},  
  12.             new Student(){ID="2",Name="Tom",Age=27},  
  13.             new Student(){ID="3",Name="Ben",Age=20}  
  14.         };  
  15.   
  16.         this.listBoxStudent.ItemsSource = stuList;  
  17.     }  
  18.   
  19. }  
  20.   
  21. /// <summary>  
  22. /// 学生类  
  23. /// </summary>  
  24. public class Student{  
  25.     public string ID{get;set;}  
  26.     public string Name { get; set; }  
  27.     public int Age { get; set; }  
  28. }  

fenyu8
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF控件主题样式，含21种不同风格漂亮主题
08-15
WPF控件主题资源，包括TabControl、ListBox、ComboBox、Button、ToggleButton、RadioButton、CheckBox、Slider、ProgressBar、TreeView等多个控件的样式。
BaseOn，Style=“{x:Null}“，Trigger
qq_41617901的博客
11-14 223
1.BaseOn是用于样式的继承； 2.Style="{x:Null}"是指不采用任何样式； <Window.Resources> <Style x:Key="BigFontButtonStyle"> <Setter Property="TextBlock.FontSize" Value="18"/> <Setter Property="Control.FontWeight" Value="B..
WPF样式中使用BasedOn 注意顺序问题
狂奔之林的博客
06-07 4468
 &lt;Style x:Key="LabelTextBox"      BasedOn="{StaticResource DefaultTextBox}"  DefaultTextBox的定义，在文件中的位置要放置在饮用它的所有样式之前，否则会无法找到。 ...
wpf TextBlock 介绍
最新发布
nbspzs的专栏
03-06 164
【代码】wpf TextBlock 介绍。
WPF样式（Style）入门
热门推荐
Rhine
10-14 5万+
WPF的样式是非常强大的，除了与HTML标记中的CSS类似，它还能够支持触发器（Trigger），比如当元素属性发生变化时，可通过触发器改变控件样式。用最最直观的例子说明效果。
WPF ListView 漂亮样式
07-04
WPF ListView 漂亮样式，自己还可以根据自己的需求进行样式修改，表头、列表都可以根据注释进行拓展，很实用
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
WPF样式 WpfToolkit-master
12-29
WPF样式 WpfToolkit-master
WPF使用外部字体文件
11-27
WPF导入使用外部字体文件，使用FontFamily加载字体，在App.xaml或者资源字典中定义，引用字体样式，设置字体为全局的默认字体
Bootstrap风格的WPF样式
09-01
此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.这篇文章主要介绍了Bootstrap风格的WPF样式的相关资料，需要的朋友参考下
WPF样式大全，20多套不同风格的样式
01-22
WPF样式大全，20多套不同风格的样式，包含tabcontrol、datagrid、button、combobox、menu、Progressbar、expander、textbox等常用的控件样式。
WPF经典教程之StackPanel、WrapPanel、DockPanel布局
10-05
一、StackPanel StackPanel是以堆叠的方式显示其中的控件 1、可以使用Orientation属性更改堆叠的顺序 ........ 更多WPF资源：http://cleopard.download.csdn.net/
使用WPF样式
ccvah的博客
05-23 295
在前一章，我们介绍了样式的概念，我们使用了本地定义样式的一个基础示例，它针对特定类型的控件 - TextBlock。 但是，样式可以在几个不同的范围中定义，具体取决于您希望在何处以及如何使用它们，甚至可以将样式限制为仅在您明确需要的控件上使用。 在本章中，我将向您展示定义样式的所有不同方式。 本地控件的特定样式 您可以直接在控件上定义样式，如下所示： <Window x:Class=...
WPF－样式的定义和使用
yqj234的专栏
03-18 624
app.xmal              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              StartupUri="MainWindow
WPF样式使用
ShineRoyal
03-03 261
当页面中有多个元素的时候，可以通过样式来批量对参数赋值。 &lt;Window x:Class="Effluent.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006...
C#之WPF样式的使用
J.Anson的博客
03-20 1515
C#样式的使用，添加自定义样式需对控件的属性相对熟悉，且需要对样式引用的格式熟悉（wpf对自定义样式中控件属性不给出提示，需自己写）。 下面是对StackPanel板式添加的自定义按钮样式
WPF基础之UI样式Style
yigu4011的博客
06-20 870
触发器：基础样式：1. 通过TargetType设置样式通过控件类型，统一设置样式【如：字体，大小，边距等】，以便于形成统一的风格，通过设置样式的TargetType="Button"，则可以使所有的按钮应用同一个样式，统一风格2. 通过Key设置样式：如果需要对每一个控件元素，都设置不同的样式，则可以通过不同的Key加以区分。
wpf样式
05-31
WPF样式是一种在WPF应用程序中定义和应用视觉外观的方法。WPF样式定义了一个控件的外观和行为，并可应用于多个控件实例。样式包括属性设置，如字体大小和颜色，以及控件模板，如边框和背景。以下是一个示例样式定义...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值