C# Avalonia 16- Animation- ExpandElement

置顶的 C# Avalonia配置 已经更新

ExpandElement.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"xmlns:local="using:AvaloniaUI"x:Class="AvaloniaUI.ExpandElement"x:DataType="local:ExpandElementViewModel"Title="ExpandElement"><Window.Styles><Style Selector="Border#element"><Style.Animations><!-- https://docs.avaloniaui.net/docs/reference/controls/datagrid/ --><Animation Duration="0:0:2.5" FillMode="Forward"><!-- 起始 --><KeyFrame Cue="0%"><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="ScaleTransform.ScaleX" Value="1"/><Setter Property="ScaleTransform.ScaleY" Value="1"/></KeyFrame></Animation></Style.Animations></Style></Window.Styles><Grid><Border Name="element"Margin="3"Background="LightGoldenrodYellow"BorderBrush="DarkBlue"BorderThickness="2"CornerRadius="5"Opacity="0.2"><Border.RenderTransform><TransformGroup><ScaleTransform/><RotateTransform/></TransformGroup></Border.RenderTransform><ScrollViewer><StackPanel Margin="10"><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>        </Grid>
</Window>

ExpandElement.axaml.cs代码

using Avalonia;
using Avalonia.Controls;
using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;namespace AvaloniaUI;
public class City
{public int Rank { get; set; }public string? Name { get; set; }public string? Population { get; set; }
}public class ExpandElementViewModel : ObservableObject
{public ObservableCollection<City> Cities { get; set; } = new(){new City { Rank = 1, Name = "Rome", Population = "450,000" },new City { Rank = 2, Name = "Luoyang (Honan), China", Population = "420,000" },new City { Rank = 3, Name = "Seleucia (on the Tigris), Iraq", Population = "250,000" },new City { Rank = 4, Name = "Alexandria, Egypt", Population = "250,000" },new City { Rank = 5, Name = "Antioch, Turkey", Population = "150,000" },new City { Rank = 6, Name = "Anuradhapura, Sri Lanka", Population = "130,000" },new City { Rank = 7, Name = "Peshawar, Pakistan", Population = "120,000" },new City { Rank = 8, Name = "Carthage, Tunisia", Population = "100,000" },new City { Rank = 9, Name = "Suzhou, China", Population = "n/a" },new City { Rank = 10, Name = "Smyrna, Turkey", Population = "90,000" }};
}
public partial class ExpandElement : Window
{public ExpandElement(){InitializeComponent();this.DataContext = new ExpandElementViewModel();}
}

运行效果