|
|
<UserControl x:Class="AgDynAnimations.EffectsPage"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="400">
<Grid x:Name="LayoutRoot" Background="AliceBlue">
<ContentControl>
<ContentControl.Resources>
<Storyboard x:Name="fadeIn">
<DoubleAnimation
Storyboard.TargetName="fadeInEffect"
Storyboard.TargetProperty="(UIElement.Opacity)"
From="0"
To="1"
SpeedRatio="3">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="fadeOut">
<DoubleAnimation
Storyboard.TargetName="fadeOutEffect"
Storyboard.TargetProperty="(UIElement.Opacity)"
From="1"
To="0"
SpeedRatio="3">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="grow">
<DoubleAnimation
Storyboard.TargetName="growEffect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="1"
To="1.5"
SpeedRatio="3">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="growEffect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
From="1"
To="1.5"
SpeedRatio="3">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="shrink">
<DoubleAnimation
Storyboard.TargetName="shrinkEffect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="1"
To="0.5"
SpeedRatio="3">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="shrinkEffect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
From="1"
To="0.5"
SpeedRatio="3">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="rotate">
<DoubleAnimation
Storyboard.TargetName="rotateEffect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
From="0"
To="360"
SpeedRatio="3">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="expand">
<PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="expandEffect"
Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)"
SpeedRatio="3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0,0"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="60,0"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="expandEffect"
Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)"
SpeedRatio="3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0,0"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="60,50"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="expandEffect"
Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)"
SpeedRatio="3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0,0"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="0,50"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="collapse">
<PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="collapseEffect"
Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)"
SpeedRatio="3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="60,0"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="0,0"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="collapseEffect"
Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)"
SpeedRatio="3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="60,50"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="0,0"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="collapseEffect"
Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)"
SpeedRatio="3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0,50"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="0,0"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</ContentControl.Resources>
<StackPanel VerticalAlignment="Center">
<Border CornerRadius="5" Background="LightBlue" HorizontalAlignment="Center" Margin="2" Width="300">
<TextBlock FontSize="12" HorizontalAlignment="Left" Margin="5">
Click on the block below to start animation
</TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border x:Name="fadeInEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5">
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Fade In
</TextBlock>
</Border>
<Border x:Name="fadeOutEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5">
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Fade Out
</TextBlock>
</Border>
<Border x:Name="growEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1">
</ScaleTransform>
</TransformGroup>
</Border.RenderTransform>
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Grow
</TextBlock>
</Border>
<Border x:Name="shrinkEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1">
</ScaleTransform>
</TransformGroup>
</Border.RenderTransform>
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Shrink
</TextBlock>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border x:Name="rotateEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0">
</RotateTransform>
</TransformGroup>
</Border.RenderTransform>
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Rotate
</TextBlock>
</Border>
<Border x:Name="expandEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5"
RenderTransformOrigin="0.5,0.5">
<Border.Clip>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="0,0">
<LineSegment Point="60,0"/>
<LineSegment Point="60,50"/>
<LineSegment Point="0,50"/>
</PathFigure>
</PathGeometry>
</Border.Clip>
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Expand
</TextBlock>
</Border>
<Border x:Name="collapseEffect"
Margin="2"
Width="60"
Height="50"
Background="SteelBlue"
CornerRadius="5"
RenderTransformOrigin="0.5,0.5">
<Border.Clip>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="0,0">
<LineSegment Point="60,0"/>
<LineSegment Point="60,50"/>
<LineSegment Point="0,50"/>
</PathFigure>
</PathGeometry>
</Border.Clip>
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Collapse
</TextBlock>
</Border>
</StackPanel>
<Border CornerRadius="5" Background="LightBlue" HorizontalAlignment="Center" Margin="0,15,0,2" Width="300">
<TextBlock FontSize="12" HorizontalAlignment="Left" Margin="5">
Select animation and click on the block to start
</TextBlock>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<StackPanel Margin="0,0,50,0">
<RadioButton x:Name="chkFadeIn" Content="Fade In" IsChecked="True"></RadioButton>
<RadioButton x:Name="chkFadeOut" Content="Fade Out"></RadioButton>
</StackPanel>
<Border x:Name="dynamicEffect"
Margin="2"
Width="80"
Height="70"
Background="SteelBlue"
CornerRadius="5">
<TextBlock FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Dynamic<LineBreak/>Effect
</TextBlock>
</Border>
</StackPanel>
</StackPanel>
</ContentControl>
</Grid>
</UserControl>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip