WPF教程(九)样式入门二

2018年09月13日 15:15:17 yangwenxue1989 阅读数:89  

在我看来,WPF的Trigger是一个非常聪明的设计,Winform要大量的代码才绘出的皮肤,在这里轻松就能搞定。但我也不是鄙视Winform,它也有自己的优势,抛开界面美化,在一些控件的使用上,明显比WPF好用,就拿DateTimePicker控件,一个能具体到小时,一个只有日期。我坚信存在即合理,各有用处。

言归正传,触发器,是System.Windows.TriggerBase的派生类的实例,可以根据属性或事件发生变化时进行响应,并自动调整样式。触发器在Style的 Triggers集合中定义,每个样式都可以有任意多个触发器。

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

PropertyTrigger,属性触发器是在当某个依赖属性的值发生变化时触发执行一个Setter的集合,当属性失去这个值时,这些被处罚执行的Setter集合会自动被撤销。

  1.   <StackPanel>
  2.   <Button Content= "TriggerBtn" Click="Trigger_Click">
  3.   <Button.Resources >
  4.   <Style TargetType= "Button">
  5.   <Style.Triggers>
  6.   <Trigger Property= "IsMouseOver" Value="True">
  7.   <Setter Property= "RenderTransform">
  8.   <Setter.Value>
  9.   <!-->旋转角度<-->
  10.   <RotateTransform Angle= "10"></RotateTransform>
  11.   </Setter.Value>
  12.   </Setter>
  13.   <!-->原点比例位置<-->
  14.   <Setter Property= "RenderTransformOrigin" Value="0.5,0.5"></Setter>
  15.   <Setter Property= "Background" Value="#FF0CC030" />
  16.   </Trigger>
  17.   </Style.Triggers>
  18.   </Style>
  19.   </Button.Resources>
  20.   </Button>
  21.   </StackPanel>

MultiPropertyTTrigger ,多条件属性触发器是在满足多个依赖属性的值发生变化时触发执行一个Setter的集合,当属性失去这个值时,这些被处罚执行的Setter集合会自动被撤销。

  1.   <StackPanel>
  2.   <Button Content= "TriggerBtn" Click="Trigger_Click" >
  3.   <Button.Resources >
  4.   <Style TargetType= "Button">
  5.   <Style.Triggers>
  6.   <MultiTrigger>
  7.   <MultiTrigger.Conditions>
  8.   <Condition Property= "IsMouseOver" Value="True"/>
  9.   <Condition Property= "IsPressed" Value="True"/>
  10.   </MultiTrigger.Conditions>
  11.   <Setter Property= "RenderTransform">
  12.   <Setter.Value>
  13.   <!-->旋转角度<-->
  14.   <RotateTransform Angle= "10"/>
  15.   </Setter.Value>
  16.   </Setter>
  17.   <!-->原点比例位置<-->
  18.   <Setter Property= "RenderTransformOrigin" Value="0.5,0.5"/>
  19.   <Setter Property= "Background" Value="#FF0CC030" />
  20.   </MultiTrigger>
  21.   </Style.Triggers>
  22.   </Style>
  23.   </Button.Resources>
  24.   </Button>
  25.   </StackPanel>

DataTrigger,数据触发器和属性触发器除了面对的对象类型不一样外其它完全相同。数据触发器是来检测非依赖属性(也就是用户自定义的.NET属性)值发生变化时来触发并调用符合条件的一系列Setter集合,看下面两个例子:

1.点击Button改变文本颜色

  1.   <Window.Resources>
  2.   <Style x:Key= "styData" TargetType="{x:Type Label}">
  3.   <Style.Triggers>
  4.   <DataTrigger Binding= "{Binding Path=Text}" Value="Hello World">
  5.   <!--如果后台类的属性Text等于Hello World时,就会触发属性,将字体颜色改变红色-->
  6.   <Setter Property= "Foreground" Value="Red"></Setter>
  7.   </DataTrigger>
  8.   </Style.Triggers>
  9.   </Style>
  10.   </Window.Resources>
  11.   <Grid>
  12.   <Grid Background= "Bisque">
  13.   <Label Content= "name:lbl" Height="37" HorizontalAlignment="Left" Margin="224,110,0,0" Name="lbl" VerticalAlignment="Top" Width="auto" Style="{StaticResource styData}" />
  14.   <Button Content= "点击变色" Height="auto" HorizontalAlignment="Left" Margin="224,204,0,0" Name="btnPrint" VerticalAlignment="Top" Width="auto" Click="btnPrint_Click" />
  15.   </Grid>
  16.   </Grid>
  1.   class changetext
  2.   {
  3.   public string _text;
  4.   public string Text
  5.   {
  6.   get { return _text; }
  7.   set { _text = value; }
  8.   }
  9.   }
  10.   public partial class MainWindow : Window
  11.   {
  12.    
  13.   changetext st = new changetext();
  14.   public MainWindow()
  15.   {
  16.   InitializeComponent();
  17.    
  18.   }
  19.   private void btnPrint_Click(object sender, RoutedEventArgs e)
  20.   {
  21.   st.Text = "Hello World";
  22.   lbl.DataContext = st;
  23.   }
  24.   }

2. ListBox的内容不同颜色显示

  1.   <Window.Resources>
  2.   <Style TargetType= "ListBoxItem">
  3.   <Style.Triggers>
  4.   <DataTrigger Binding= "{Binding Path=Publisher}" Value="Wrox Press">
  5.   <Setter Property= "Background" Value="Red"/>
  6.   </DataTrigger>
  7.   <DataTrigger Binding= "{Binding Path=Publisher}" Value="Dummies">
  8.   <Setter Property= "Background" Value="Yellow"/>
  9.   </DataTrigger>
  10.   <DataTrigger Binding= "{Binding Path=Publisher}" Value="Sybex">
  11.   <Setter Property= "Background" Value="LightBlue"/>
  12.   </DataTrigger>
  13.   </Style.Triggers>
  14.   </Style>
  15.   </Window.Resources>
  16.   <Grid>
  17.   <ListBox x:Name= "list1" Width="300" Height="200" Margin="12,87,191,24" Grid.Row="0" />
  18.   </Grid>
  1.   class Book
  2.   {
  3.   public string Title { get; set; } //书名
  4.   public string Publisher { get; set; } //出版商
  5.   public override string ToString()//不可能显示一个对象,系统会调用对象的ToString()来显示
  6.   {
  7.   return Title;
  8.   }
  9.   }
  10.   public partial class MainWindow : Window
  11.   {
  12.   public MainWindow()
  13.   {
  14.   InitializeComponent();
  15.   list1.Items.Add( new Book
  16.   {
  17.   Title = "Professional C# 4.0",
  18.   Publisher = "Wrox Press"
  19.   });
  20.   list1.Items.Add( new Book
  21.   {
  22.   Title = "C# 2008 for Dummies",
  23.   Publisher = "Dummies"
  24.   });
  25.   list1.Items.Add( new Book
  26.   {
  27.   Title = "Mastering Integrated HTML and CSS",
  28.   Publisher = "Sybex"
  29.   });
  30.   }
  31.   }

MultiDataTrigger,在绑定数据满足一组条件时一项或多项属性值执行操作,我们将上述例2的资源样式改成MultiDataTrigger,明显不是全部都能触发。

  1.   <Window.Resources>
  2.   <Style TargetType= "ListBoxItem">
  3.   <Style.Triggers>
  4.   <MultiDataTrigger>
  5.   <MultiDataTrigger.Conditions>
  6.   <Condition Binding= "{Binding Path=Publisher}" Value="Wrox Press"/>
  7.   <Condition Binding= "{Binding Path=Publisher}" Value="Dummies"/>
  8.   </MultiDataTrigger.Conditions>
  9.   <Setter Property= "Background" Value="Red"/>
  10.   </MultiDataTrigger>
  11.   <MultiDataTrigger>
  12.   <MultiDataTrigger.Conditions>
  13.   <Condition Binding= "{Binding Path=Publisher}" Value="Dummies"/>
  14.   <Condition Binding= "{Binding Path=Publisher}" Value="Sybex"/>
  15.   </MultiDataTrigger.Conditions>
  16.   <Setter Property= "Background" Value="Yellow"/>
  17.   </MultiDataTrigger>
  18.   <DataTrigger Binding= "{Binding Path=Publisher}" Value="Sybex">
  19.   <Setter Property= "Background" Value="LightBlue"/>
  20.   </DataTrigger>
  21.   </Style.Triggers>
  22.   </Style>
  23.   </Window.Resources>

EventTrigger,在事件发生时激活,即触发路由事件时会被调用。

  1.   <StackPanel>
  2.   <Button Content= "TriggerBtn">
  3.   <Button.Resources>
  4.   <Style TargetType= "{x:Type Button}">
  5.   <Style.Triggers>
  6.   <EventTrigger RoutedEvent= "Mouse.MouseEnter" >
  7.   <BeginStoryboard>
  8.   <!--一个为其所包含的动画提供目标信息的容器。除非动画放在Storyboard中,负责不能在XMAL中被实例化-->
  9.   <Storyboard>
  10.   <DoubleAnimation Duration= "00:00:10" Storyboard.TargetProperty="FontSize" To="18" />
  11.   </Storyboard>
  12.   </BeginStoryboard>
  13.   </EventTrigger>
  14.   <EventTrigger RoutedEvent= "Mouse.MouseLeave">
  15.   <EventTrigger.Actions>
  16.   <BeginStoryboard>
  17.   <Storyboard>
  18.   <DoubleAnimation Duration= "00:00:10" Storyboard.TargetProperty="FontSize" To="12" />
  19.   </Storyboard>
  20.   </BeginStoryboard>
  21.   </EventTrigger.Actions>
  22.   </EventTrigger>
  23.   </Style.Triggers>
  24.   </Style>
  25.   </Button.Resources>
  26.   </Button>
  27.   </StackPanel>

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄