标签 标签 标签

  • 一句话的事儿：

效果介绍

  • 鼠标放到按钮上，则字体会变大

  • 额外增加一个按钮载入时会旋转360°

    逻辑介绍

  • 这里的逻辑与给按钮变色是一个道理，接下来介绍旋转的逻辑

  • 首先旋转的对象是Grid，而非按钮
  • 这里需要引入RenderTransform
  • 设置旋转的中心点以及旋转角度，旋转时间

    源代码

    1. <Window x:Class="WPFDemo.MainWindow"
    2.       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.       xmlns:local="clr-namespace:WPFDemo"
    7.       mc:Ignorable="d"
    8.       Title="MainWindow" Height="450" Width="800">
    9.   <Grid>
    10.       <Button Width="150" Height="50" Click="Button_Click">
    11.           <Button.Template>
    12.               <ControlTemplate>
    13.                   <Grid RenderTransformOrigin="0.5,0.5">
    14.                       <Grid.RenderTransform>
    15.                           <RotateTransform Angle="0" x:Name="gridRotate"></RotateTransform>
    16.                       </Grid.RenderTransform>
    17.                       <TextBlock x:Name="txtBlock" Text="按钮" TextAlignment="Center" VerticalAlignment="Center" FontSize="25" Foreground="Blue"></TextBlock>
    18.                       <!--<Rectangle x:Name="rec" Width="100" Height="50" Fill="Violet" RadiusX="25" RadiusY="25" Opacity="0.5"></Rectangle>-->
    19.                       <Rectangle x:Name="rec" Width="100" Height="50" RadiusX="25" RadiusY="25" Opacity="0.5">
    20.                           <!--将填充部分单独写，为了后面单独调用做准备--> 
    21.                           <Rectangle.Fill>
    22.                               <!--采用刷子来填充-->
    23.                               <SolidColorBrush x:Name="recBrush" Color="Blue"></SolidColorBrush>
    24.                           </Rectangle.Fill>
    25.                           <Rectangle.Triggers>
    26.                               <EventTrigger RoutedEvent="MouseEnter">
    27.                                   <EventTrigger.Actions>
    28.                                       <BeginStoryboard>
    29.                                           <Storyboard>
    30.                                               <DoubleAnimation Storyboard.TargetName="txtBlock" Storyboard.TargetProperty="FontSize" To="30" Duration="0:0:0.5"></DoubleAnimation>
    31.                                               <ColorAnimation Storyboard.TargetName="recBrush" Storyboard.TargetProperty="Color" To="Gray" Duration="0:0:1"></ColorAnimation>
    32.                                           </Storyboard>
    33.                                       </BeginStoryboard>
    34.                                   </EventTrigger.Actions>
    35.                               </EventTrigger>
    36.                               <EventTrigger RoutedEvent="MouseLeave">
    37.                                   <EventTrigger.Actions>
    38.                                       <BeginStoryboard>
    39.                                           <Storyboard>
    40.                                               <DoubleAnimation Storyboard.TargetName="txtBlock" Storyboard.TargetProperty="FontSize" To="25" Duration="0:0:0.5"></DoubleAnimation>
    41.                                               <DoubleAnimation Storyboard.TargetName="txtBlock" Storyboard.TargetProperty="FontSize" To="25" Duration="0:0:0.5"></DoubleAnimation>
    42.                                               <ColorAnimation Storyboard.TargetName="recBrush" Storyboard.TargetProperty="Color" To="Blue" Duration="0:0:1"></ColorAnimation>
    43.                                           </Storyboard>
    44.                                       </BeginStoryboard>
    45.                                   </EventTrigger.Actions>
    46.                               </EventTrigger>
    47.                           </Rectangle.Triggers>
    48.                       </Rectangle>
    49.                       <Grid.Triggers>
    50.                           <EventTrigger RoutedEvent="Loaded">
    51.                               <EventTrigger.Actions>
    52.                                   <BeginStoryboard>
    53.                                       <Storyboard>
    54.                                           <DoubleAnimation Storyboard.TargetName="gridRotate" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:2"></DoubleAnimation>
    55.                                       </Storyboard>
    56.                                   </BeginStoryboard>
    57.                               </EventTrigger.Actions>
    58.                           </EventTrigger> 
    59.                       </Grid.Triggers>
    60.                   </Grid>
    61.               </ControlTemplate>
    62.           </Button.Template>
    63.       </Button>
    64.   </Grid>
    65. </Window>
  • 本文作者：GeekPower - Felix Sun
  • 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！