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>
  

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

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

    原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...

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

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  3. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  4. 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...

  5. 【转】WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...

  6. MUI框架-03-自定义MUI控件样式

    MUI框架-03-自定义MUI控件样式 开发请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 如何自定义MUI控件样式 mui 以 iOS 7的 UI 为基础,补充了 ...

  7. WPF——如何为项目设置全局样式。

    在项目中,需要为所有的Button.TextBox设置一个默认的全局样式,一个个的为多个控件设置相同的样式显然是不明智的.在WPF中可以通过资源设置全局样式,主要有俩种方法: 1.第一种就是先写好按钮 ...

  8. 【WPF】DataGrid多表头的样式设计

    需求 在使用WPF开发时,使用DataGrid列表显示数据时,有些字段可以进行分组显示,用于更好的表达它们之间存在的某种关系,因此就考虑到要对DataGrid的表头进行扩展,可以显示多行表头,让这些有 ...

  9. 如何引用CSS样式表

      如何使用样式 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化.有以下三种方式来插入样式表: 1.外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式 ...

随机推荐

  1. JavaWeb学习日记----XML的解析

    XML的解析简介: 在学习JavaScript时,我们用的DOM来解析HEML文档,根据HTML的层级结构在内存中分配一个树形结构,把HTML的标签啊,属性啊和文本之类的都封装成对象. 比如:docu ...

  2. 浅析多线程的对象锁和Class锁

    一.前言 本来想在另外一篇文章说的,发现可能篇幅有点大,所以还是另开一篇博文来说好了.知识参考<Java多线程编程核心技术>,评价下这本书吧——大量的代码,简单的说明,真像在看博客.不过这 ...

  3. Elasticsearch系列(1):认识Elasticsearch

    官方定义 Elasticsearch 是一个实时的分布式搜索分析引擎, 它能让你以一个之前从未有过的速度和规模,去探索你的数据. 它被用作全文检索.结构化搜索.分析以及这三个功能的组合. Elasti ...

  4. [ Laravel 5.5 文档 ] 快速入门 —— 目录结构篇

    简介 Laravel 默认的目录结构试图为不管是大型应用还是小型应用提供一个良好的起点.当然,你也可以按照自己的喜好重新组织应用的目录结构,因为 Laravel 对于指定类在何处被加载没有任何限制 — ...

  5. 亲测:LNMP环境下,解决项目缓冲慢、502以及配置https的问题

    在做的项目在nginx下访问缓冲时间过长,明显比apache下访问蛮11倍有余, 解决办法: 1增加nginx的upstream,其中upstream中为php-cgi的地址: 2利用nginx作为反 ...

  6. IO学习一(File类)

    File类 1.凡是与输入.输出相关的类.接口都定义在java.io包下 2.File有构造器来创建对象,此对象对应着一个文件或文件目录 支持文件类型:.txt .avi .doc .jpg .ppt ...

  7. POJ 2311 Cutting Game(二维SG+Multi-Nim)

    Cutting Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4798   Accepted: 1756 Desc ...

  8. Html5 和 CSS的简单应用

    本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...

  9. listview reclyerview上下拉刷新

    x写控件挺麻烦的,因为有很多细节要处理好,列表控件使用太频繁了,网上也各种自定义的方法,一般的listview自定义肯定会联想到加个头部,然后监听事件加动画,其实方式很多种,今天记录的方式是另外一种方 ...

  10. Java 内存模型和硬件内存架构笔记

    前言 可跟<主存存取和磁盘存取原理笔记>串着看 https://blog.csdn.net/suifeng3051/article/details/52611310 杂技 Java 内存模 ...