码迷,mamicode.com
首页 > 其他好文 > 详细

WPF触发器

时间:2014-08-10 21:26:01      阅读:487      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   os   io   数据   

WPF中有五种触发器。Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger。最近做WPF的项目,需要学习下。参考了好多人的文章。

1、Trigger 单一触发器

   1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:         Title="StyleTrigger" Height="300" Width="300">
   5:     <Window.Resources>
   6:         <!--单一条件触发器-->
   7:         <Style  TargetType="TextBlock"  x:Key="TextBlockStyle">
   8:             <!--基本属性设置-->
   9:             <Setter Property="Foreground" Value="Red"/>
  10:             <Setter Property="FontSize" Value="30" />
  11:             <Setter Property="FontWeight" Value="ExtraBold"/>
  12:             <!--单一触发器 当鼠标移过控件的时候,控件的风格发生变化-->
  13:             <Style.Triggers >
  14:                 <Trigger Property="IsMouseOver" Value="true">
  15:                     <Setter Property="Foreground" Value="Yellow"/>
  16:                     <Setter Property="FontSize" Value="50"/>
  17:                 </Trigger>
  18:             </Style.Triggers>
  19:         </Style>
  20:     </Window.Resources>
  21:     <StackPanel>
  22:         <TextBlock Style="{StaticResource TextBlockStyle}">第一个例子</TextBlock>
  23:         <TextBlock Style="{StaticResource TextBlockStyle}">单一触发器</TextBlock>
  24:     </StackPanel>
  25: </Window>

bubuko.com,布布扣

注:鼠标离开的时候,它会自动返回原来的样式。

2、MultiTrigger 多条件的触发器

   1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:         Title="StyleTrigger" Height="402.632" Width="470.301">
   5:     <Window.Resources>
   6:         <!--例子1 Trigger 单一条件触发器-->
   7:         <Style  TargetType="TextBlock"  x:Key="TriggerTextBlockStyle">
   8:             <!--基本属性设置-->
   9:             <Setter Property="Foreground" Value="Red"/>
  10:             <Setter Property="FontSize" Value="30" />
  11:             <Setter Property="FontWeight" Value="ExtraBold"/>
  12:             <!--单一触发器 当鼠标移过控件的时候,控件的风格发生变化-->
  13:             <Style.Triggers >
  14:                 <Trigger Property="IsMouseOver" Value="true">
  15:                     <Setter Property="Foreground" Value="Yellow"/>
  16:                     <Setter Property="FontSize" Value="50"/>
  17:                 </Trigger>
  18:             </Style.Triggers>
  19:         </Style>
  20:  
  21:         <!--例子2 MultiTrigger 多条件触发器-->
  22:         <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
  23:             <!--基本属性设置-->
  24:             <Setter Property="Foreground" Value="Red"/>
  25:             <Setter Property="FontSize" Value="30"/>
  26:             <Setter Property="FontWeight" Value="Bold"/>
  27:             <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
  28:             <Style.Triggers>
  29:                 <!--1 单一触发器-->
  30:                 <Trigger Property="IsMouseOver" Value="true">
  31:                     <Setter Property="FontSize" Value="40"></Setter>
  32:                 </Trigger>
  33:                 <!--2 多条件触发器-->
  34:                 <MultiTrigger>
  35:                     <!--触发条件-->
  36:                     <MultiTrigger.Conditions>
  37:                         <Condition Property="IsMouseOver" Value="true"/>
  38:                         <!--条件1-->
  39:                         <Condition Property="IsPressed" Value="true" />
  40:                         <!--条件2-->
  41:                     </MultiTrigger.Conditions>
  42:                     <Setter Property="Background" Value="Green"/>
  43:                     <Setter Property="Foreground" Value="Aqua" />
  44:                     <Setter Property="FontStyle" Value="Italic" />
  45:                     <Setter Property="FontSize" Value="70"/>
  46:                 </MultiTrigger>
  47:             </Style.Triggers>
  48:         </Style>
  49:  
  50:     </Window.Resources>
  51:     <StackPanel>
  52:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子</TextBlock>
  53:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器</TextBlock>
  54:         <Button Content="第二个例子" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
  55:     </StackPanel>
  56: </Window>

bubuko.com,布布扣

注:在这个里面加了个单一触发器,用于两者的比较。

3、DataTrigger 数据触发器

DataTrigger和MultiTrigger这一对触发器和Trigger及MultiTrigger非常类似。但是DataTrigger多了一个Binding属性。语法如下:

<DataTrigger Binding="{Binding Elementname=控件名,Path=控件中的相应属性" value="相关属性的值">

如:

   1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:         Title="StyleTrigger" Height="402.632" Width="470.301">
   5:     <Window.Resources>
   6:         <!--例子1 Trigger 单一条件触发器-->
   7:         <Style  TargetType="TextBlock"  x:Key="TriggerTextBlockStyle">
   8:             <!--基本属性设置-->
   9:             <Setter Property="Foreground" Value="Red"/>
  10:             <Setter Property="FontSize" Value="30" />
  11:             <Setter Property="FontWeight" Value="ExtraBold"/>
  12:             <!--单一触发器 当鼠标移过控件的时候,控件的风格发生变化-->
  13:             <Style.Triggers >
  14:                 <Trigger Property="IsMouseOver" Value="true">
  15:                     <Setter Property="Foreground" Value="Yellow"/>
  16:                     <Setter Property="FontSize" Value="50"/>
  17:                 </Trigger>
  18:             </Style.Triggers>
  19:         </Style>
  20:  
  21:         <!--例子2 MultiTrigger 多条件触发器-->
  22:         <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
  23:             <!--基本属性设置-->
  24:             <Setter Property="Foreground" Value="Red"/>
  25:             <Setter Property="FontSize" Value="30"/>
  26:             <Setter Property="FontWeight" Value="Bold"/>
  27:             <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
  28:             <Style.Triggers>
  29:                 <!--1 单一触发器-->
  30:                 <Trigger Property="IsMouseOver" Value="true">
  31:                     <Setter Property="FontSize" Value="40"></Setter>
  32:                 </Trigger>
  33:                 <!--2 多条件触发器-->
  34:                 <MultiTrigger>
  35:                     <!--触发条件-->
  36:                     <MultiTrigger.Conditions>
  37:                         <Condition Property="IsMouseOver" Value="true"/>
  38:                         <!--条件1-->
  39:                         <Condition Property="IsPressed" Value="true" />
  40:                         <!--条件2-->
  41:                     </MultiTrigger.Conditions>
  42:                     <Setter Property="Background" Value="Green"/>
  43:                     <Setter Property="Foreground" Value="Aqua" />
  44:                     <Setter Property="FontStyle" Value="Italic" />
  45:                     <Setter Property="FontSize" Value="70"/>
  46:                 </MultiTrigger>
  47:             </Style.Triggers>
  48:         </Style>
  49:  
  50:         <!--例子3 DataTrigger 数据触发器-->
  51:         <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
  52:             <Setter Property="Foreground" Value="Black"/>
  53:             <Setter Property="FontSize" Value="60"/>
  54:             <Setter Property="FontWeight" Value="Regular"/>
  55:             <Style.Triggers>
  56:                 <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value="true">
  57:                     <Setter Property="Background" Value="Violet"/>
  58:                     <Setter Property="FontSize" Value="30"/>
  59:                     <Setter Property="FontWeight" Value="SemiBold"/>
  60:                 </DataTrigger>
  61:             </Style.Triggers>
  62:         </Style>
  63:     </Window.Resources>
  64:     <StackPanel>
  65:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子Trigger</TextBlock>
  66:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器Trigger</TextBlock>
  67:         <Button Content="第二个例子MultiTrigger" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
  68:         <Button Name="btnDataTrigger"  Content="第三个例子DataTrigger"  Style="{StaticResource DataTriggerButtonStyle}"></Button>
  69:     </StackPanel>
  70: </Window>

按钮事件

   1: /// <summary>
   2: /// 第三个 DataTrigger测试
   3: /// </summary>
   4: private void Button_Click_1(object sender, RoutedEventArgs e)
   5: {
   6:     btnDataTrigger.Content = "DataTrigger";
   7: }

bubuko.com,布布扣bubuko.com,布布扣

4、MultiDatatrigger 多条件数据触发器

   1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:         Title="StyleTrigger" Height="402.632" Width="470.301">
   5:     <Window.Resources>
   6:         <!--例子1 Trigger 单一条件触发器-->
   7:         <Style  TargetType="TextBlock"  x:Key="TriggerTextBlockStyle">
   8:             <!--基本属性设置-->
   9:             <Setter Property="Foreground" Value="Red"/>
  10:             <Setter Property="FontSize" Value="30" />
  11:             <Setter Property="FontWeight" Value="ExtraBold"/>
  12:             <!--单一触发器 当鼠标移过控件的时候,控件的风格发生变化-->
  13:             <Style.Triggers >
  14:                 <Trigger Property="IsMouseOver" Value="true">
  15:                     <Setter Property="Foreground" Value="Yellow"/>
  16:                     <Setter Property="FontSize" Value="50"/>
  17:                 </Trigger>
  18:             </Style.Triggers>
  19:         </Style>
  20:  
  21:         <!--例子2 MultiTrigger 多条件触发器-->
  22:         <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
  23:             <!--基本属性设置-->
  24:             <Setter Property="Foreground" Value="Red"/>
  25:             <Setter Property="FontSize" Value="30"/>
  26:             <Setter Property="FontWeight" Value="Bold"/>
  27:             <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
  28:             <Style.Triggers>
  29:                 <!--1 单一触发器-->
  30:                 <Trigger Property="IsMouseOver" Value="true">
  31:                     <Setter Property="FontSize" Value="40"></Setter>
  32:                 </Trigger>
  33:                 <!--2 多条件触发器-->
  34:                 <MultiTrigger>
  35:                     <!--触发条件-->
  36:                     <MultiTrigger.Conditions>
  37:                         <Condition Property="IsMouseOver" Value="true"/>
  38:                         <!--条件1-->
  39:                         <Condition Property="IsPressed" Value="true" />
  40:                         <!--条件2-->
  41:                     </MultiTrigger.Conditions>
  42:                     <Setter Property="Background" Value="Green"/>
  43:                     <Setter Property="Foreground" Value="Aqua" />
  44:                     <Setter Property="FontStyle" Value="Italic" />
  45:                     <Setter Property="FontSize" Value="70"/>
  46:                 </MultiTrigger>
  47:             </Style.Triggers>
  48:         </Style>
  49:  
  50:         <!--例子3 DataTrigger 数据触发器-->
  51:         <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
  52:             <Setter Property="Foreground" Value="Black"/>
  53:             <Setter Property="FontSize" Value="60"/>
  54:             <Setter Property="FontWeight" Value="Regular"/>
  55:             <Style.Triggers>
  56:                 <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value="true">
  57:                     <Setter Property="Background" Value="Violet"/>
  58:                     <Setter Property="FontSize" Value="30"/>
  59:                     <Setter Property="FontWeight" Value="SemiBold"/>
  60:                 </DataTrigger>
  61:                 <!--用Click按钮进行点击测试 改变btnDataTrigger的内容,使它的字体变为100-->
  62:                 <DataTrigger Binding="{Binding ElementName=btnDataTrigger,Path=Content}" Value="DataTrigger">
  63:                     <Setter Property="FontSize" Value="100"/>
  64:                 </DataTrigger>
  65:             </Style.Triggers>
  66:         </Style>
  67:  
  68:         <!--例子4 MultiDataTrigger 数据触发器-->
  69:         <Style TargetType="Button" x:Key="MultiDataTriggerButtonStyle">
  70:             <Style.Triggers>
  71:                 <MultiDataTrigger>
  72:                     <MultiDataTrigger.Conditions>
  73:                         <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsCancel}" Value="true"/>
  74:                         <!--条件1-->
  75:                         <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsDefault}" Value="true"/>
  76:                         <!--条件2-->
  77:                     </MultiDataTrigger.Conditions>
  78:                     <Setter Property="Width" Value="400"/>
  79:                     <Setter Property="Height" Value ="200"/>
  80:                     <Setter Property="Foreground" Value="Blue"/>
  81:                 </MultiDataTrigger>
  82:             </Style.Triggers>
  83:         </Style>
  84:     </Window.Resources>
  85:     <StackPanel>
  86:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子Trigger</TextBlock>
  87:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器Trigger</TextBlock>
  88:         <Button Content="第二个例子MultiTrigger" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
  89:         <Button Name="btnDataTrigger"  Content="第三个例子DataTrigger"  Style="{StaticResource DataTriggerButtonStyle}"></Button>
  90:         <Button Name="btnMultiDataTrigger"  Content="第四个例子MultiDataTrigger"  Style="{StaticResource MultiDataTriggerButtonStyle}"></Button>
  91:         <Button Width="180" Height="60"  Content="例子3 DataTrigger Click"  Click="Button_Click_1" ></Button>
  92:         <Button Width="180" Height="60"  Content="例子4 MultiDataTrigger Click"   Click="Button_Click_2" ></Button>
  93:     </StackPanel>
  94: </Window>

bubuko.com,布布扣bubuko.com,布布扣

5、EventTrigger 事件触发器

   1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
   2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:         Title="StyleTrigger" Height="402.632" Width="470.301">
   5:     <Window.Resources>
   6:  
   7:         <!--例子1 Trigger 单一条件触发器-->
   8:         <Style  TargetType="TextBlock"  x:Key="TriggerTextBlockStyle">
   9:             <!--基本属性设置-->
  10:             <Setter Property="Foreground" Value="Red"/>
  11:             <Setter Property="FontSize" Value="30" />
  12:             <Setter Property="FontWeight" Value="ExtraBold"/>
  13:             <!--单一触发器 当鼠标移过控件的时候,控件的风格发生变化-->
  14:             <Style.Triggers >
  15:                 <Trigger Property="IsMouseOver" Value="true">
  16:                     <Setter Property="Foreground" Value="Yellow"/>
  17:                     <Setter Property="FontSize" Value="50"/>
  18:                 </Trigger>
  19:             </Style.Triggers>
  20:         </Style>
  21:  
  22:         <!--例子2 MultiTrigger 多条件触发器-->
  23:         <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
  24:             <!--基本属性设置-->
  25:             <Setter Property="Foreground" Value="Red"/>
  26:             <Setter Property="FontSize" Value="30"/>
  27:             <Setter Property="FontWeight" Value="Bold"/>
  28:             <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
  29:             <Style.Triggers>
  30:                 <!--1 单一触发器-->
  31:                 <Trigger Property="IsMouseOver" Value="true">
  32:                     <Setter Property="FontSize" Value="40"></Setter>
  33:                 </Trigger>
  34:                 <!--2 多条件触发器-->
  35:                 <MultiTrigger>
  36:                     <!--触发条件-->
  37:                     <MultiTrigger.Conditions>
  38:                         <Condition Property="IsMouseOver" Value="true"/>
  39:                         <!--条件1-->
  40:                         <Condition Property="IsPressed" Value="true" />
  41:                         <!--条件2-->
  42:                     </MultiTrigger.Conditions>
  43:                     <Setter Property="Background" Value="Green"/>
  44:                     <Setter Property="Foreground" Value="Aqua" />
  45:                     <Setter Property="FontStyle" Value="Italic" />
  46:                     <Setter Property="FontSize" Value="70"/>
  47:                 </MultiTrigger>
  48:             </Style.Triggers>
  49:         </Style>
  50:  
  51:         <!--例子3 DataTrigger 数据触发器-->
  52:         <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
  53:             <Setter Property="Foreground" Value="Black"/>
  54:             <Setter Property="FontSize" Value="60"/>
  55:             <Setter Property="FontWeight" Value="Regular"/>
  56:             <Style.Triggers>
  57:                 <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value="true">
  58:                     <Setter Property="Background" Value="Violet"/>
  59:                     <Setter Property="FontSize" Value="30"/>
  60:                     <Setter Property="FontWeight" Value="SemiBold"/>
  61:                 </DataTrigger>
  62:                 <!--用Click按钮进行点击测试 改变btnDataTrigger的内容,使它的字体变为100-->
  63:                 <DataTrigger Binding="{Binding ElementName=btnDataTrigger,Path=Content}" Value="DataTrigger">
  64:                     <Setter Property="FontSize" Value="100"/>
  65:                 </DataTrigger>
  66:             </Style.Triggers>
  67:         </Style>
  68:  
  69:         <!--例子4 MultiDataTrigger 数据触发器-->
  70:         <Style TargetType="Button" x:Key="MultiDataTriggerButtonStyle">
  71:             <Style.Triggers>
  72:                 <MultiDataTrigger>
  73:                     <MultiDataTrigger.Conditions>
  74:                         <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsCancel}" Value="true"/>
  75:                         <!--条件1-->
  76:                         <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsDefault}" Value="true"/>
  77:                         <!--条件2-->
  78:                     </MultiDataTrigger.Conditions>
  79:                     <Setter Property="Width" Value="400"/>
  80:                     <Setter Property="Height" Value ="200"/>
  81:                     <Setter Property="Foreground" Value="Blue"/>
  82:                 </MultiDataTrigger>
  83:             </Style.Triggers>
  84:         </Style>
  85:  
  86:         <!--例子5 EventTrigger 事件触发器-->
  87:         <Style x:Key="EventTrigger" >
  88:             <Style.Triggers>
  89:                 <EventTrigger RoutedEvent="Mouse.MouseEnter">
  90:                     <!--鼠标进入-->
  91:                     <EventTrigger.Actions>
  92:                         <BeginStoryboard Name="ExpendWidth">
  93:                             <Storyboard>
  94:                                 <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Width" To="300"></DoubleAnimation>
  95:                                 <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Height" To="200"></DoubleAnimation>
  96:                                 <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="FontSize" To="30" ></DoubleAnimation>
  97:                             </Storyboard>
  98:                         </BeginStoryboard>
  99:                     </EventTrigger.Actions>
 100:                 </EventTrigger>
 101:                 <EventTrigger RoutedEvent="Mouse.MouseLeave">
 102:                     <!--鼠标离开-->
 103:                     <EventTrigger.Actions>
 104:                         <BeginStoryboard >
 105:                             <Storyboard>
 106:                                 <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Width" To="30"></DoubleAnimation>
 107:                                 <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Height" To="20"></DoubleAnimation>
 108:                                 <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="FontSize" To="12"></DoubleAnimation>
 109:                             </Storyboard>
 110:                         </BeginStoryboard>
 111:                     </EventTrigger.Actions>
 112:                 </EventTrigger>
 113:             </Style.Triggers>
 114:         </Style>
 115:  
 116:     </Window.Resources>
 117:  
 118:     <StackPanel>
 119:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子Trigger</TextBlock>
 120:         <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器Trigger</TextBlock>
 121:         <Button Content="第二个例子MultiTrigger" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
 122:         <Button Name="btnDataTrigger"  Content="第三个例子DataTrigger"  Style="{StaticResource DataTriggerButtonStyle}"></Button>
 123:         <Button Name="btnMultiDataTrigger"  Content="第四个例子MultiDataTrigger"  Style="{StaticResource MultiDataTriggerButtonStyle}"></Button>
 124:         <Label Height="40" Name="label4" Margin="0,0,0,10"  Width="120" Style="{StaticResource EventTrigger}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">第五个例子EventTrigger</Label>
 125:         <Button Width="180" Height="60"  Content="例子3 DataTrigger Click"  Click="Button_Click_1" ></Button>
 126:         <Button Width="180" Height="60"  Content="例子4 MultiDataTrigger Click"   Click="Button_Click_2" ></Button>
 127:     </StackPanel>
 128:  
 129: </Window>

正常样式:bubuko.com,布布扣

鼠标进入:bubuko.com,布布扣

label ‘第五个例子EventTrigger’渐渐变大

鼠标离开:bubuko.com,布布扣

label ‘第五个例子EventTrigger’渐渐变小。

界面不是太漂亮,只是学学了解下这些触发器。

WPF触发器,布布扣,bubuko.com

WPF触发器

标签:des   style   blog   http   color   os   io   数据   

原文地址:http://www.cnblogs.com/zhaox583132460/p/3903381.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!