WPF旋转鼠标上方按钮的内容/背景

本文关键字：背景 按钮 鼠标 旋转 方按钮 WPF | 更新日期: 2023-09-27 18:01:59

当鼠标悬停在按钮上时，我正在尝试旋转按钮的内容或背景。

不确定这是否是正确的方法，但我卡住了:

 <Button Width="48" Height="48" Grid.Column="1"
                BorderThickness="0">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Storyboard.TargetName="xxx" 
                               Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                               By="-360" Duration="0:0:4"
                               AutoReverse="False" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
      <Button.Background>
        <VisualBrush>
          <VisualBrush.Visual>
            <Grid x:Name="xxx" RenderTransformOrigin="0.5,0.5" Width="48" Height="48">
              <Rectangle Fill="Blue" Width="48" Height="48" />
              <Rectangle Fill="Green" Width="14" Height="14" />
              <Grid.RenderTransform>
                <RotateTransform />
              </Grid.RenderTransform>
            </Grid>
          </VisualBrush.Visual>
        </VisualBrush>
      </Button.Background>
    </Button>

我的按钮最初是这样的，它需要旋转内容(在这个例子中是网格):

         <Button Width="48" Height="48" Grid.Column="1"
                BorderThickness="0">
            <Grid>
              <Rectangle Fill="Blue" Width="48" Height="48" />
              <Rectangle Fill="Green" Width="14" Height="14" />
            </Grid>
    </Button>

我尝试过通过一个风格，但也卡住了。: s

WPF旋转鼠标上方按钮的内容/背景

你几乎就在那里了-使用你原来的按钮，向网格添加一个转换。从你的解决方案中取出Eventtrigger，只添加Grid的名称("RotationGrid"在我的解决方案中)。

<Button Width="48" Height="48">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="RotateGrid" 
                       Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                       By="-360" Duration="0:0:4"
                       AutoReverse="False" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="RotateGrid" 
                       Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                       By="0" Duration="0:0:4"
                       AutoReverse="False" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
    <Grid x:Name="RotateGrid">
            <Rectangle Fill="Blue" Width="48" Height="48" />
            <Rectangle Fill="Green" Width="14" Height="14" />
            <Grid.RenderTransform>
                <RotateTransform Angle="0" CenterX="24" CenterY="24"></RotateTransform>
            </Grid.RenderTransform>
    </Grid>
</Button>
相关文章：