C# Avalonia 16- Animation- RotateButtonWithLayout

自定义扩展已经更新 C# Avalonia 扩展 - 所有例子必备

RotateButtonWithLayout.axaml代码

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Width="300" Height="300"
        x:Class="AvaloniaUI.RotateButtonWithLayout"
        Title="RotateButtonWithLayout">

    <Window.Styles>
        <!-- 针对所有 Button 的基础样式 -->
        <Style Selector="LayoutTransformControl">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="RenderTransformOrigin" Value="50%,50%"/>
            <Setter Property="Margin" Value="2"/>

            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform Angle="0"/>
                </Setter.Value>
            </Setter>

            <Style Selector="^:pointerover">
                <Style.Animations>
                    <Animation Duration="0:0:2" IterationCount="INFINITE" FillMode="None">
                        <KeyFrame Cue="0%">
                            <Setter Property="RotateTransform.Angle" Value="0"/>
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="RotateTransform.Angle" Value="360"/>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>

            <Style Selector="^:not(:pointerover)">
                <Style.Animations>
                    <Animation Duration="0:0:0.18" FillMode="Forward">
                        <KeyFrame Cue="100%">
                            <Setter Property="RotateTransform.Angle" Value="0"/>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>
        </Style>
    </Window.Styles>
    <StackPanel x:Name="stackPanel" Margin="5" Button.Click="cmd_Clicked">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
        <Button>Four</Button>
        <TextBlock Name="lbl" Margin="5"/>
    </StackPanel>
</Window>

RotateButtonWithLayout.axaml.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Media;
using Shares.Avalonia;
using System;
using System.Linq;

namespace AvaloniaUI;

public partial class RotateButtonWithLayout : Window
{
    public RotateButtonWithLayout()
    {
        InitializeComponent();
        var buttons = stackPanel.Children.OfType<Button>().ToList();
        foreach (var button in buttons)
        {
            button.LayoutTransform();
        }
    }

    private void cmd_Clicked(object? sender, RoutedEventArgs e)
    {
        lbl.Text = "Clicked: " + (e.Source as Button)?.Content;
    }
}

运行效果