C# Avalonia 16- Animation- ExpandElement2

ExpandElement2.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="500" Height="400"
        x:Class="AvaloniaUI.ExpandElement2"
        xmlns:local="using:AvaloniaUI"
        x:DataType="local:ExpandElementViewModel"
        Title="ExpandElement2">
    <Window.Styles>
        <Style Selector="Rectangle#rectangle">
            <Style.Animations>
                <!-- https://docs.avaloniaui.net/docs/reference/controls/datagrid/ -->
                <Animation Duration="0:0:2.5" FillMode="Forward">

                    <!-- 起始 -->
                    <KeyFrame Cue="0%">
                        <Setter Property="IsVisible" Value="true"/>
                        <Setter Property="Opacity" Value="0.2"/>
                        <Setter Property="ScaleTransform.ScaleX" Value="0"/>
                        <Setter Property="ScaleTransform.ScaleY" Value="0"/>
                        <Setter Property="RotateTransform.Angle" Value="70"/>
                    </KeyFrame>

                    <!-- 展开动画 -->
                    <KeyFrame Cue="80%">
                        <Setter Property="Opacity" Value="1"/>
                        <Setter Property="ScaleTransform.ScaleX" Value="1"/>
                        <Setter Property="ScaleTransform.ScaleY" Value="1"/>
                        <Setter Property="RotateTransform.Angle" Value="0"/>
                    </KeyFrame>

                    <!-- 弹性缩放 -->
                    <KeyFrame Cue="90%">
                        <Setter Property="ScaleTransform.ScaleX" Value="0.98"/>
                        <Setter Property="ScaleTransform.ScaleY" Value="0.98"/>
                    </KeyFrame>

                    <KeyFrame Cue="100%">
                        <Setter Property="IsVisible" Value="false"/>
                        <Setter Property="ScaleTransform.ScaleX" Value="1"/>
                        <Setter Property="ScaleTransform.ScaleY" Value="1"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </Window.Styles>
    <Grid>
        <Border Name="element"
                   Background="LightGoldenrodYellow"
                   BorderBrush="DarkBlue"
                   BorderThickness="2"
                   CornerRadius="5">
            <ScrollViewer>
                <StackPanel Margin="5">
                    <TextBlock Text="The foof feature is indispensable. You can configure the foof feature using the Foof Options dialog box."
                               TextWrapping="Wrap" />
                    <Button Content="Open Foof Options"
                            HorizontalAlignment="Left"
                            Margin="0,5,0,15" />

                    <TextBlock Text="Largest Cities in the Year 100"
                               FontSize="20"
                               FontWeight="Bold"
                               Margin="0,10" />

                    <DataGrid CanUserSortColumns="False"
                              AutoGenerateColumns="False"
                              ItemsSource="{Binding Cities}">
                        <DataGrid.ColumnHeaderTheme>
                            <ControlTheme TargetType="DataGridColumnHeader">
                                <Setter Property="Background" Value="#444" />
                                <Setter Property="FontSize" Value="15"/>
                                <Setter Property="Foreground" Value="White" />
                                <Setter Property="BorderThickness" Value="0"/>
                                <Setter Property="BorderBrush" Value="Transparent"/>
                                <Setter Property="FontWeight" Value="Bold" />
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                <Setter Property="VerticalContentAlignment" Value="Center"/>
                            </ControlTheme>
                        </DataGrid.ColumnHeaderTheme>
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Rank" Binding="{Binding Rank}" />
                            <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                            <DataGridTextColumn Header="Population" Binding="{Binding Population}" />
                        </DataGrid.Columns>
                    </DataGrid>
                </StackPanel>
            </ScrollViewer>
        </Border>
        
        <Rectangle Name="rectangle" IsVisible="False">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding #element}"/>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform></ScaleTransform>
                    <RotateTransform></RotateTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</Window>

ExpandElement2.axaml.cs代码 - 和ExpandElement的ExpandElementViewModel一样

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace AvaloniaUI;

public partial class ExpandElement2 : Window
{
    public ExpandElement2()
    {
        InitializeComponent();
        this.DataContext = new ExpandElementViewModel();
    }
}

运行效果