feat:popup animation.

This commit is contained in:
rabbitism
2024-12-24 17:41:23 +08:00
parent 5222e64197
commit f891e05e4c
5 changed files with 121 additions and 6 deletions

View File

@@ -0,0 +1,47 @@
<Styles xmlns="https://github.com/avaloniaui"
x:Class="Semi.Avalonia.PopupAnimations"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
<Design.PreviewWith>
<Border Padding="20">
<!-- Add Controls for Previewer Here -->
</Border>
</Design.PreviewWith>
<!-- Add Styles Here -->
<Style Selector="Popup LayoutTransformControl#PART_LayoutTransform">
<Setter Property="RenderTransformOrigin" Value="{Binding $parent[Popup].Placement, Converter={x:Static converters:PlacementToRenderTransformOriginConverter.Instance}}"></Setter>
</Style>
<Style Selector="Flyout LayoutTransformControl#PART_LayoutTransform">
<Setter Property="RenderTransformOrigin" Value="{Binding $parent[Flyout].Placement, Converter={x:Static converters:PlacementToRenderTransformOriginConverter.Instance}}"></Setter>
</Style>
<Style Selector="Popup[IsOpen=True] LayoutTransformControl#PART_LayoutTransform">
<Style.Animations>
<Animation Duration="0:0:0.2" FillMode="Forward">
<KeyFrame Cue="0.0">
<Setter Property="ScaleTransform.ScaleX" Value="0.95"/>
<Setter Property="ScaleTransform.ScaleY" Value="0.95"/>
</KeyFrame>
<KeyFrame Cue="1.0">
<Setter Property="ScaleTransform.ScaleX" Value="1.0"/>
<Setter Property="ScaleTransform.ScaleY" Value="1.0"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Popup[IsOpen=False] LayoutTransformControl#PART_LayoutTransform">
<Style.Animations>
<Animation Duration="0:0:0.2" FillMode="Forward">
<KeyFrame Cue="0.0">
<Setter Property="ScaleTransform.ScaleX" Value="0.95"/>
<Setter Property="ScaleTransform.ScaleY" Value="0.95"/>
</KeyFrame>
<KeyFrame Cue="1.0">
<Setter Property="ScaleTransform.ScaleX" Value="1.0"/>
<Setter Property="ScaleTransform.ScaleY" Value="1.0"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Styles>

View File

@@ -0,0 +1,8 @@
using Avalonia.Styling;
namespace Semi.Avalonia;
public class PopupAnimations: Styles
{
}

View File

@@ -11,12 +11,14 @@
<Panel>
<Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
<VisualLayerManager IsPopup="True">
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<LayoutTransformControl Name="PART_LayoutTransform">
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</LayoutTransformControl>
</VisualLayerManager>
</Panel>
</LayoutTransformControl>

View File

@@ -0,0 +1,57 @@
using System;
using System.Globalization;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Data.Converters;
namespace Semi.Avalonia.Converters;
public class PlacementToRenderTransformOriginConverter: IValueConverter
{
public static PlacementToRenderTransformOriginConverter Instance { get; } = new PlacementToRenderTransformOriginConverter();
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is not PlacementMode p)
{
return new RelativePoint(0.5, 0.5, RelativeUnit.Relative);
}
switch (p)
{
case PlacementMode.Bottom:
return new RelativePoint(0.5, 0.0, RelativeUnit.Relative);
case PlacementMode.Left:
return new RelativePoint(1.0, 0.5, RelativeUnit.Relative);
case PlacementMode.Right:
return new RelativePoint(0.0, 0.5, RelativeUnit.Relative);
case PlacementMode.Top:
return new RelativePoint(0.5, 1.0, RelativeUnit.Relative);
case PlacementMode.Pointer:
return new RelativePoint(0.0, 0.0, RelativeUnit.Relative);
case PlacementMode.Center:
case PlacementMode.AnchorAndGravity:
return new RelativePoint(0.5, 0.5, RelativeUnit.Relative);
case PlacementMode.BottomEdgeAlignedLeft:
return new RelativePoint(0.0, 0.0, RelativeUnit.Relative);
case PlacementMode.BottomEdgeAlignedRight:
return new RelativePoint(1.0, 0.0, RelativeUnit.Relative);
case PlacementMode.LeftEdgeAlignedTop:
return new RelativePoint(1.0, 1.0, RelativeUnit.Relative);
case PlacementMode.LeftEdgeAlignedBottom:
return new RelativePoint(1.0, 0.0, RelativeUnit.Relative);
case PlacementMode.RightEdgeAlignedTop:
return new RelativePoint(0.0, 1.0, RelativeUnit.Relative);
case PlacementMode.RightEdgeAlignedBottom:
return new RelativePoint(0.0, 0.0, RelativeUnit.Relative);
case PlacementMode.TopEdgeAlignedLeft:
return new RelativePoint(0.0, 1.0, RelativeUnit.Relative);
case PlacementMode.TopEdgeAlignedRight:
return new RelativePoint(1.0, 1.0, RelativeUnit.Relative);
}
return new RelativePoint(0.5, 0.5, RelativeUnit.Relative);
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}