Add dialog entrance animation

This commit is contained in:
Yoshi Askharoun
2024-05-16 01:17:06 -05:00
parent b244bc138d
commit 87e1666b42
@@ -13,8 +13,9 @@
</d:UserControl.DataContext>
<Border Background="#AFFFFFFF">
<Border MaxHeight="400" MaxWidth="528"
Padding="32" VerticalAlignment="Center">
<Border x:Name="DialogBorder" MaxHeight="400" MaxWidth="528"
Padding="32" VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFFF" Offset="0"/>
@@ -22,6 +23,10 @@
</LinearGradientBrush>
</Border.Background>
<Border.RenderTransform>
<ScaleTransform />
</Border.RenderTransform>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
@@ -51,6 +56,29 @@
Direction="0" ShadowDepth="0"/>
</Border.Effect>
</Border>
<Border.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard x:Name="DialogEntranceAnimation">
<DoubleAnimation From="0.9" To="1.0" Duration="0:0:0.25"
Storyboard.TargetName="DialogBorder" Storyboard.TargetProperty="RenderTransform.ScaleX">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0.9" To="1.0" Duration="0:0:0.25"
Storyboard.TargetName="DialogBorder" Storyboard.TargetProperty="RenderTransform.ScaleY">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0" To="1.0" Duration="0:0:0.2" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</UserControl>