csharpc-sharpdotnetxamlavaloniauicross-platformcross-platform-xamlavaloniaguimulti-platformuser-interfacedotnetcore
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.5 KiB
91 lines
3.5 KiB
<UserControl xmlns="https://github.com/avaloniaui">
|
|
<Grid>
|
|
<Grid.Styles>
|
|
<Styles>
|
|
<Style Selector="Rectangle.Test">
|
|
<Setter Property="Margin" Value="15"/>
|
|
<Setter Property="Width" Value="100"/>
|
|
<Setter Property="Height" Value="100"/>
|
|
</Style>
|
|
<Style Selector="Rectangle.Rect1:pointerover">
|
|
<Style.Animations>
|
|
<Animation Duration="0:0:2.5" Easing="BounceEaseInOut">
|
|
<TransformKeyFrames Property="RotateTransform.Angle">
|
|
<KeyFrame Cue="0%" Value="0"/>
|
|
<KeyFrame Cue="100%" Value="360"/>
|
|
</TransformKeyFrames>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
<Style Selector="Rectangle.Rect2:pointerover">
|
|
<Style.Animations>
|
|
<Animation Duration="0:0:0.5" Easing="SineEaseInOut">
|
|
<TransformKeyFrames Property="ScaleTransform.ScaleX">
|
|
<KeyFrame Cue="0%" Value="0.8"/>
|
|
<KeyFrame Cue="100%" Value="1"/>
|
|
</TransformKeyFrames>
|
|
<TransformKeyFrames Property="ScaleTransform.ScaleY">
|
|
<KeyFrame Cue="0%" Value="0.8"/>
|
|
<KeyFrame Cue="100%" Value="1"/>
|
|
</TransformKeyFrames>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
<Style Selector="Rectangle.Rect3:pointerover">
|
|
<Style.Animations>
|
|
<Animation Duration="0:0:3" Easing="BounceEaseInOut">
|
|
<TransformKeyFrames Property="TranslateTransform.Y">
|
|
<KeyFrame Cue="0%" Value="0"/>
|
|
<KeyFrame Cue="48%" Value="-100"/>
|
|
<KeyFrame Cue="100%" Value="0"/>
|
|
</TransformKeyFrames>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
<Style Selector="Rectangle.Rect4:pointerover">
|
|
<Style.Animations>
|
|
<Animation Duration="0:0:3" Easing="CircularEaseInOut">
|
|
<TransformKeyFrames Property="SkewTransform.AngleX">
|
|
<KeyFrame Cue="0%" Value="0"/>
|
|
<KeyFrame Cue="25%" Value="-20"/>
|
|
<KeyFrame Cue="75%" Value="20"/>
|
|
<KeyFrame Cue="100%" Value="0"/>
|
|
</TransformKeyFrames>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
</Styles>
|
|
</Grid.Styles>
|
|
<StackPanel VerticalAlignment="Center"
|
|
HorizontalAlignment="Center"
|
|
ClipToBounds="False">
|
|
<TextBlock HorizontalAlignment="Center">
|
|
Hover to activate Transform Keyframe Animations.
|
|
</TextBlock>
|
|
<StackPanel Orientation="Horizontal"
|
|
ClipToBounds="False">
|
|
<Rectangle Classes="Test Rect1" Fill="DarkRed">
|
|
<Rectangle.RenderTransform>
|
|
<RotateTransform/>
|
|
</Rectangle.RenderTransform>
|
|
</Rectangle>
|
|
<Rectangle Classes="Test Rect2" Fill="DarkMagenta">
|
|
<Rectangle.RenderTransform>
|
|
<ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
|
|
</Rectangle.RenderTransform>
|
|
</Rectangle>
|
|
<Rectangle Classes="Test Rect3" Fill="Navy">
|
|
<Rectangle.RenderTransform>
|
|
<TranslateTransform/>
|
|
</Rectangle.RenderTransform>
|
|
</Rectangle>
|
|
<Rectangle Classes="Test Rect4" Fill="SeaGreen">
|
|
<Rectangle.RenderTransform>
|
|
<SkewTransform/>
|
|
</Rectangle.RenderTransform>
|
|
</Rectangle>
|
|
</StackPanel>
|
|
|
|
</StackPanel>
|
|
</Grid>
|
|
</UserControl>
|