标签 标签 标签

  • 一句话的事儿：鼠标放到按钮上颜色是蓝色的，离开后是灰色的

效果介绍

  • 鼠标放到按钮上由蓝色变为灰色；

  • 鼠标离开按钮，由灰色变为蓝色；

    代码逻辑介绍

  • 鼠标悬停与离开

    • 通过事件触发器来实现
  • 变色，由蓝色变为灰色，由灰色变为蓝色
    • 变色行为动画通过动画来实现Animation来实现
    • 变色是通过Brush的方式来实现

      源代码

      1. <Button Width="150" Height="50" Click="Button_Click">
      2. <Button.Template>
      3.    <ControlTemplate>
      4.        <Grid>
      5.            <TextBlock Text="按钮" TextAlignment="Center" VerticalAlignment="Center" FontSize="25" Foreground="Blue"></TextBlock>
      6.            <!--<Rectangle x:Name="rec" Width="100" Height="50" Fill="Violet" RadiusX="25" RadiusY="25" Opacity="0.5"></Rectangle>-->
      7.            <Rectangle x:Name="rec" Width="100" Height="50" RadiusX="25" RadiusY="25" Opacity="0.5">
      8.                <!--将填充部分单独写，为了后面单独调用做准备--> 
      9.                <Rectangle.Fill>
      10.                    <!--采用刷子来填充-->
      11.                    <SolidColorBrush x:Name="recBrush" Color="Blue"></SolidColorBrush>
      12.                </Rectangle.Fill>
      13.                <Rectangle.Triggers>
      14.                    <EventTrigger RoutedEvent="MouseEnter">
      15.                        <EventTrigger.Actions>
      16.                            <BeginStoryboard>
      17.                                <Storyboard>
      18.                                    <ColorAnimation Storyboard.TargetName="recBrush" Storyboard.TargetProperty="Color" To="Gray" Duration="0:0:1"></ColorAnimation>
      19.                                </Storyboard>
      20.                            </BeginStoryboard>
      21.                        </EventTrigger.Actions>
      22.                    </EventTrigger>
      23.                    <EventTrigger RoutedEvent="MouseLeave">
      24.                        <EventTrigger.Actions>
      25.                            <BeginStoryboard>
      26.                                <Storyboard>
      27.                                    <ColorAnimation Storyboard.TargetName="recBrush" Storyboard.TargetProperty="Color" To="Blue" Duration="0:0:1"></ColorAnimation>
      28.                                </Storyboard>
      29.                            </BeginStoryboard>
      30.                        </EventTrigger.Actions>
      31.                    </EventTrigger>
      32.                </Rectangle.Triggers>
      33.            </Rectangle>
      34.        </Grid>
      35.    </ControlTemplate>
      36. </Button.Template>
      37. </Button>
  • 本文作者：GeekPower - Felix Sun
  • 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！