css的伪类,鼠标移动上去,点击,等改变样式。

简单触发器

  1. <Window.Resources>
  2. <Style x:Key="AStyle" TargetType="Button">
  3. <Setter Property="Height" Value="30"></Setter>
  4. <Setter Property="Width" Value="60"></Setter>
  5. <Style.Triggers>
  6. <Trigger Property="IsMouseOver" Value="True">
  7. <Setter Property="Foreground" Value="red"></Setter>
  8. </Trigger>
  9. <Trigger Property="IsMouseOver" Value="False">
  10. <Setter Property="Foreground" Value="Green"></Setter>
  11. </Trigger>
  12. </Style.Triggers>
  13. </Style>
  14. </Window.Resources>
  15. <Grid>
  16. <StackPanel>
  17. <Button Style="{StaticResource AStyle}">按钮1</Button>
  18. <Button Style="{StaticResource AStyle}">按钮2</Button>
  19. </StackPanel>
  20. </Grid>

在样式里面写标签,里面可以放多个触发器,简单触发器标签,(还有其他的触发器,数据触发器,事件触发器等)Property属性用来设置是什么样的事情触发
这里设置的IsMouseOver是否鼠标移动上去了,Value值是True或者False,移动上去了,没移动上去。

没有移动上去是绿色的,移动上去就变成红色的。
image.pngimage.png

多条件触发器

  1. <Window.Resources>
  2. <Style x:Key="AStyle" TargetType="Button">
  3. <Setter Property="Height" Value="30"></Setter>
  4. <Setter Property="Width" Value="60"></Setter>
  5. <Style.Triggers>
  6. <MultiTrigger>
  7. <MultiTrigger.Conditions>
  8. <Condition Property="IsFocused" Value="True"></Condition>
  9. <Condition Property="IsMouseOver" Value="True"></Condition>
  10. </MultiTrigger.Conditions>
  11. <MultiTrigger.Setters>
  12. <Setter Property="Foreground" Value="blue"></Setter>
  13. </MultiTrigger.Setters>
  14. </MultiTrigger>
  15. </Style.Triggers>
  16. </Style>
  17. </Window.Resources>
  18. <Grid>
  19. <StackPanel>
  20. <Button Style="{StaticResource AStyle}">按钮1</Button>
  21. <Button Style="{StaticResource AStyle}">按钮2</Button>
  22. </StackPanel>
  23. </Grid>

多条件触发器,里面包含触发的条件集合,条件集合里面包含触发的条件,条件的Property和上面的简单触发器一样。当多条件的触发器的全部条件都满足了,就会设置里面的样式。

上面的例子,按钮要鼠标移动上去后,还要点击聚焦后,才会变成蓝色。
image.png

事件触发器

有点难