WPF 样式(定义样式、引用样式、样式作用域、Trigger触发器)

1、定义 资源字典

  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  2.  

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  3.  

    <RadialGradientBrush x:Key="mybrush">

  4.  

    <GradientStop Color="#FF0000" Offset="0"/>

  5.  

    <GradientStop Color="#00ff00" Offset="1"/>

  6.  

    <GradientStop Color="#0000ff" Offset="0.6669"/>

  7.  

    </RadialGradientBrush>

  8.  

    </ResourceDictionary>

2、引用 资源字典

  1. <!--定义应用程序对象-->

  2.  

    <Application x:Class="WpfApplication1.App"

  3.  

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  4.  

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  5.  

    StartupUri="Window5.xaml" Exit="AppExit">

  6.  

    <!--StartupUri 启动时,显示那个xaml-->

  7.  

    <x:Code>

  8.  

    <![CDATA[

  9.  

    private void AppExit(object sender,ExitEventArgs e)

  10.  

    {

  11.  

    MessageBox.Show("App has Exit!");

  12.  

    }

  13.  

    ]]>

  14.  

    </x:Code>

  15.  

  16.  

    <Application.Resources>

  17.  

    <ResourceDictionary>

  18.  

    <ResourceDictionary.MergedDictionaries>

  19.  

    <!--外部库名称;Component/编译的二进制资源名称-->

  20.  

    <ResourceDictionary Source="/MyBrushesLibrary;Component/MyBrushes.xaml"/>

  21.  

    <ResourceDictionary Source="......"/>

  22.  

    </ResourceDictionary.MergedDictionaries>

  23.  

    </ResourceDictionary>

  24.  

    </Application.Resources>

  25.  

    </Application>

3、应用

  1. <Window x:Class="WpfApplication1.Window5"

  2.  

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3.  

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4.  

    Title="Window5" Height="300" Width="300">

  5.  

    <StackPanel Orientation="Vertical">

  6.  

    <Button Width="204" Height="73" Content="OK" x:Name="BtnOK" Background="{DynamicResource myBrush}" Click="BtnOK_Click"></Button>

  7.  

    <Button Width="204" Height="73" Content="Cancel" x:Name="BtnName2" Background="{StaticResource myBrush}"/>

  8.  

    </StackPanel>

  9.  

    </Window>

推荐阅读:http://blog.csdn.net/pan_junbiao/article/details/50987932

一、样式

1、定义样式

  1. <Window.Resources>

  2.  

    <!--定义按钮公共样式-->

  3.  

    <!--x:Key 引用这个样式,TargetType作用目标类型-->

  4.  

    <Style x:Key="gButton" TargetType="{x:Type Button}">

  5.  

    <!--Setter设置目标属性-->

  6.  

    <Setter Property="Cursor" Value="Hand"/>

  7.  

    <Setter Property="Width" Value="150"/>

  8.  

    <Setter Property="Height" Value="80"/>

  9.  

    </Style>

  10.  

    </Window.Resources>

2、引用样式

  1. <Grid>

  2.  

    <Button Content="红色">

  3.  

    <Button.Style>

  4.  

    <!--BasedOn属性:通过设置BasedOn属性,可以继承某个样式-->

  5.  

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource gButton}">

  6.  

    <Setter Property="Background" Value="Red"/>

  7.  

    <Setter Property="FontSize" Value="24"/>

  8.  

    <Setter Property="Foreground" Value="Red"/>

  9.  

    <Setter Property="Margin" Value="20"/>

  10.  

    </Style>

  11.  

    </Button.Style>

  12.  

    </Button>

  13.  

    </Grid>

二、样式作用域

1、全局样式

把样式写在App.xaml中即可

  1. <Application x:Class="WpfApplication1.App"

  2.  

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3.  

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4.  

    StartupUri="MainWindow.xaml">

  5.  

    <!--全局应用程序资源-->

  6.  

    <Application.Resources>

  7.  

    <!--定义全局样式-->

  8.  

  9.  

    </Application.Resources>

  10.  

    </Application>

2、局部样式

  1. <!--窗口资源-->

  2.  

    <Window.Resources>

  3.  

    <!--定义局部样式-->

  4.  

  5.  

    </Window.Resources>

3、内部样式

  1. <Button Content="红色" Width="150" Height="80">

  2.  

    <Button.Style>

  3.  

    <!--定义内部-->

  4.  

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource gBut}">

  5.  

    <!--背景色-->

  6.  

    <Setter Property="Background" Value="Red"/>

  7.  

    <!--字号-->

  8.  

    <Setter Property="FontSize" Value="24"/>

  9.  

    </Style>

  10.  

    </Button.Style>

  11.  

    </Button>

以上的样式引用时的方法是一样的,都是使用Resources,内部样式的使用仅限于改控件本身,因为它没有被放到资源字典之中,xxx.Resources是支持向下继承的,并可以应用它在资源中的定义样式,例如:

  1. <Grid>

  2.  

    <!--定义Grid控件的资源-->

  3.  

    <Grid.Resources>

  4.  

    <!--定义按钮样式1-->

  5.  

    <Style x:Key="grid_button" TargetType="{x:Type Button}">

  6.  

    <Setter Property="Width" Value="260"/>

  7.  

    <Setter Property="Height" Value="160"/>

  8.  

    <Setter Property="FontSize" Value="26"/>

  9.  

    <Setter Property="Content" Value="应用父级样式"/>

  10.  

    </Style>

  11.  

    </Grid.Resources>

  12.  

    <!--应用父级样式的按钮-->

  13.  

    <Button Style="{StaticResource grid_button}"></Button>

  14.  

    </Grid>

运行结果所示,XAML代码中的按钮除了Style="{StaticResource grid_button}"之外并没有声明任何属性,按钮的尺寸和内容都是通过应用父级Grid资源样式来呈现的,所以只要父级的对象定义了资源,父级以下的元素均可以访问它的资源字典。

三、Style中的Trigger

Trigger,触发器,即当某些条件满足时会触发一个行为(比如某些值的变化或动画的发生等)。触发器比较像事件。事件一般是由用户操作触发的,而触发器除了有事件触发型的EventTrigger外还有数据变化触发型的Trigger/DataTrigger及多条件触发型MultiTrigger/MultiDataTrigger等。

1、基础Trigger

Trigger类是最基本的触发器。类似于Setter,Trigger也有Property和Value这两个属性,Property是Trigger关注的属性名称,Value是触发条件。Trigger类还有一个Setters属性,此属性值是一组Setter,一旦触发条件被满足,这组Setter的“属性—值”就会被应用,触发条件不再满足后,各属性值会被还原。

下面这个例子中包含一个针对CheckBox的Style,当CheckBox的IsChecked属性为true的时候前景色和字体会改变。XAML代码如下:

  1. <Window.Resources>

  2.  

    <Style TargetType="CheckBox">

  3.  

    <Style.Triggers>

  4.  

    <Trigger Property="IsChecked" Value="True">

  5.  

    <Setter Property="FontSize" Value="20"/>

  6.  

    <Setter Property="Foreground" Value="Orange"/>

  7.  

    </Trigger>

  8.  

    </Style.Triggers>

  9.  

    </Style>

  10.  

    </Window.Resources>

  11.  

  12.  

    <StackPanel>

  13.  

    <CheckBox Content="111" Margin="5"/>

  14.  

    <CheckBox Content="222" Margin="5"/>

  15.  

    <CheckBox Content="333" Margin="5"/>

  16.  

    </StackPanel>

2、MultiTrigger

MultiTrigger比Trigger多了一个Conditions属性,需要同时成立的条件就储存在这个集合中。

让我们稍微改动一下上面的例子,要求同时满足CheckBox被选中且Content为“333”时才会被触发。

XAML代码如下:

  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="333"/>

  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="111" Margin="5"/>

  20.  

    <CheckBox Content="222" Margin="5"/>

  21.  

    <CheckBox Content="333" Margin="5"/>

  22.  

    </StackPanel>

3、数据触发的DataTrigger

程序中经常会遇到基于数据执行某些判断情况,遇到这种情况时我们可以考虑使用DataTrigger。

DataTrigger对象的Binding属性会把数据源不断送过来,一旦送了的值与Value属性一致,DataTrigger即被触发。

下面例子中,当TextBox的Text长度小于7个字符时其Border会保持红色。

XAML代码如下:

  1. <Window x:Class="WpfApplication2.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:WpfApplication2"

  5.  

    Title="MainWindow" Height="350" Width="525">

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

  11.  

    Path=Text.Length,

  12.  

    Converter={StaticResource cvtr}}" Value="false">

  13.  

    <Setter Property="BorderBrush" Value="Red"/>

  14.  

    <Setter Property="BorderThickness" Value="1"/>

  15.  

    </DataTrigger>

  16.  

    </Style.Triggers>

  17.  

    </Style>

  18.  

    </Window.Resources>

  19.  

  20.  

    <StackPanel>

  21.  

    <TextBox Margin="5"/>

  22.  

    <TextBox Margin="5,0"/>

  23.  

    <TextBox Margin="5"/>

  24.  

    </StackPanel>

  25.  

    </Window>

  1. public class L2BConverter:IValueConverter

  2.  

    {

  3.  

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  4.  

    {

  5.  

    int textLength = (int)value;

  6.  

    return textLength > 6 ? true : false;

  7.  

    }

  8.  

  9.  

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  10.  

    {

  11.  

    throw new NotImplementedException();

  12.  

    }

  13.  

    }

4、多条件触发的MultiDataTrigger

有时候我们会遇到要求多个数据条件同时满足时才能触发变化的需求,此时可以考虑使用MultiDataTrigger。

比如有这样一个需求:用户界面使用ListBox显示了一列Student数据,当Student对象同时满足ID为2、Name为Tom的时候,条目就高亮显示,

XAML代码如下:

  1. using System;

  2.  

    using System.Collections.Generic;

  3.  

    using System.Linq;

  4.  

    using System.Text;

  5.  

    using System.Windows;

  6.  

    using System.Windows.Controls;

  7.  

    using System.Windows.Data;

  8.  

    using System.Windows.Documents;

  9.  

    using System.Windows.Input;

  10.  

    using System.Windows.Media;

  11.  

    using System.Windows.Media.Imaging;

  12.  

    using System.Windows.Navigation;

  13.  

    using System.Windows.Shapes;

  14.  

  15.  

    namespace WpfApplication2

  16.  

    {

  17.  

    /// <summary>

  18.  

    /// MainWindow.xaml 的交互逻辑

  19.  

    /// </summary>

  20.  

    public partial class MainWindow : Window

  21.  

    {

  22.  

    public MainWindow()

  23.  

    {

  24.  

    InitializeComponent();

  25.  

    List<Student> stuList = new List<Student>(){

  26.  

    new Student(){ID="1",Name="Peter",Age=25},

  27.  

    new Student(){ID="2",Name="Tom",Age=27},

  28.  

    new Student(){ID="3",Name="Ben",Age=20}

  29.  

    };

  30.  

  31.  

    this.listBoxStudent.ItemsSource = stuList;

  32.  

    }

  33.  

    }

  34.  

  35.  

    /// <summary>

  36.  

    /// 学生类

  37.  

    /// </summary>

  38.  

    public class Student

  39.  

    {

  40.  

    public string ID { get; set; }

  41.  

    public string Name { get; set; }

  42.  

    public int Age { get; set; }

  43.  

    }

  44.  

    }

  1. <Window x:Class="WpfApplication2.MainWindow"

  2.  

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3.  

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4.  

    Title="MainWindow" Height="350" Width="525">

  5.  

    <Window.Resources>

  6.  

    <Style TargetType="ListBoxItem">

  7.  

    <!--使用Style设置DataTemplate-->

  8.  

    <Setter Property="ContentTemplate">

  9.  

    <Setter.Value>

  10.  

    <DataTemplate>

  11.  

    <StackPanel Orientation="Horizontal">

  12.  

    <TextBlock Text="{Binding ID}" Width="60"/>

  13.  

    <TextBlock Text="{Binding Name}" Width="120"/>

  14.  

    <TextBlock Text="{Binding Age}" Width="60"/>

  15.  

    </StackPanel>

  16.  

    </DataTemplate>

  17.  

    </Setter.Value>

  18.  

    </Setter>

  19.  

    <!--MultiDataTrigger-->

  20.  

    <Style.Triggers>

  21.  

    <MultiDataTrigger>

  22.  

    <MultiDataTrigger.Conditions>

  23.  

    <Condition Binding="{Binding Path=ID}" Value="2"/>

  24.  

    <Condition Binding="{Binding Path=Name}" Value="Tom"/>

  25.  

    </MultiDataTrigger.Conditions>

  26.  

    <MultiDataTrigger.Setters>

  27.  

    <Setter Property="Background" Value="Orange"/>

  28.  

    </MultiDataTrigger.Setters>

  29.  

    </MultiDataTrigger>

  30.  

    </Style.Triggers>

  31.  

    </Style>

  32.  

    </Window.Resources>

  33.  

  34.  

    <StackPanel>

  35.  

    <ListBox x:Name="listBoxStudent" Margin="5"/>

  36.  

    </StackPanel>

  37.  

    </Window>

效果:

5、由事件触发的EventTrigger

EventTrigger是触发器中最特殊的一个。首先,它不是由属性值或数据的变化来触发而是由事件来触发;其次,被触发后它并非应用一组Setter,而是执行一段动画。

因此,UI层的动画效果往往与EventTrigger相关联。

在下面这个例子中创建了一个针对Button的Style,这个Style包含两个EventTrigger,一个由MouseEnter事件触发,另一个由MouseLeave事件触发。
      鼠标进入按钮时变大,离开时恢复原样。

XAML代码如下:

  1. <Window.Resources>

  2.  

    <Style TargetType="Button">

  3.  

    <Style.Triggers>

  4.  

    <!--鼠标进入-->

  5.  

    <EventTrigger RoutedEvent="MouseEnter">

  6.  

    <BeginStoryboard>

  7.  

    <Storyboard>

  8.  

    <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>

  9.  

    <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>

  10.  

    </Storyboard>

  11.  

    </BeginStoryboard>

  12.  

    </EventTrigger>

  13.  

    <!--鼠标离开-->

  14.  

    <EventTrigger RoutedEvent="MouseLeave">

  15.  

    <BeginStoryboard>

  16.  

    <Storyboard>

  17.  

    <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>

  18.  

    <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>

  19.  

    </Storyboard>

  20.  

    </BeginStoryboard>

  21.  

    </EventTrigger>

  22.  

    </Style.Triggers>

  23.  

    </Style>

  24.  

    </Window.Resources>

  25.  

  26.  

    <Canvas>

  27.  

    <Button Width="40" Height="40" Content="OK"/>

  28.  

    </Canvas>

原文地址:https://www.cnblogs.com/yelanggu/p/10278272.html

时间: 2024-10-26 03:10:52

WPF 样式(定义样式、引用样式、样式作用域、Trigger触发器)的相关文章

WPF 动态添加控件以及样式字典的引用(Style introduction)

原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的对象就可以了. 下面是Ui,其中定义了一个WrapPanel来存放CheckBox,还有两个按钮,用于测试相关功能. <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c

WPF自定义控件与样式(3)-TextBox &amp; RichTextBox &amp; PasswordBox样式、水印、Label标签、功能扩展

原文:WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展 一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文本框TextBox控件样式及扩展功能,实现了样式.水印.Label标签.功能扩展: 富

WPF之设置多控件样式

需求是这样的,系统要监测风,雨,雪多个自然灾害.在界面上有这些灾害突发的报警框.本来报警框的背景是由于级别不同显示不同的颜色,但是现在发现,当报警背景为蓝色是,黑色字体 看不出来.又由于技术文档上规定背景颜色了,所以现在只能改变所有lbl的字体.而这些控件都是WPF自定义控件的一些 元素. 要实现这个功能,有很多种方式.WPF的好处 就是既可以像Html+CSS 去设置, 也可以像Winform一样去更改.重点说一下解决方式. 这个功能要调用的有大概10多处,每个窗体有6个左右lbl,所以每次给

wpf 中DataGrid 控件的样式设置及使用

本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </summary> public class Experience { /// <summary> /// 获取或设置工作的起始时间 /// </summary> public string Start { get; set; } /// <summary> /// 获

CSS基础概念 第一节 引用CSS样式表

引用CSS样式有四种方法,它们包含了:文档内部样式的引用.文档外部样式表的引用. 1.LINK 元素 LINK元素在HTML和XHTML中创建,用来引用外部样式表到当前文档中 通用的语法 <link rel="..." type="text/css" href="..." media="..."> 属性 rel="..." 此属性描述当前文档与链接文件的关系.对于外部样式表,有两种可能的值:st

WPF 重写微调自带的样式,ListView、DataGrid、TreeView等所有控件的默认样式

原文:WPF 重写微调自带的样式,ListView.DataGrid.TreeView等所有控件的默认样式 不知道各位在开发中有没有遇到这样的窘迫,开发一个UI,设计给出的效果图和自带的样式的区别很大,然后有的样式通过属性是修改不了的,比如TreeView的子项TreeViewItem,想完全透明背景色就做不到,只有重写Template,然而重写了模板发现很多默认的功能失效了,等等一些列问题:又比如需要重新DataGrid,的DataGridRowHeader模板,又不知这个模板哪些属性必须要给

Silverlight样式定义

方法一.定义在控件内部 1 <Canvas Background="Red" Height="100" HorizontalAlignment="Left" Margin="90,80,0,0" Name="canvas1" VerticalAlignment="Top" Width="200" /> 方法二.定义在控件外部 1 <UserContr

JavaScript 将多个引用(样式或者脚本)放入一个文件进行引用

1.将样式放入一个文件进行引用 @import url("../media/css/bootstrap.min.css"); @import url("../media/css/bootstrap-responsive.min.css"); @import url("../media/css/font-awesome.min.css"); @import url("../media/css/style-metro.css");

Yii框架下CDataColumn中filter应用+jeditable+pager样式定义应用实例

应用环境在Yii1.1框架下,CDataColumn的filter应用给CGridView带来了极大的方便,可以根据某一字段的值来过滤显示现有的表格数据,这是个重要的功能,可惜一来Yii的中文资料实在不够详细,二来百度出的东西重复的太多,有用的很少.参考很多英文资料后,我把自己写的实例贴出来供大家参考,如果有必要我以后还会陆续贴一些Yii文章出来. filter首先要有自己的数据源,这个可以是当前表格使用的model,也可以是其他一些array,这个实例中我使用了当前model,CGridVie