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();}
}

运行效果