This is an old revision of the document!
WPF Control Transforms and Animations
Transforms
XAML:
<!-- Move button to side. Eg: --> <Button Name="btnProducts" Margin="10" Width="90"> <Button.RenderTransform> <TransformGroup> <TranslateTransform X="-90"/> <SkewTransform AngleX="0" AngleY="-20" /> </TransformGroup> </Button.RenderTransform> <StackPanel> <Image Source="/images/icons/icon-product.png" Height="50"/> <TextBlock Padding="5">Products</TextBlock> </StackPanel> </Button>
Programmatically in C#:
// Create transform group, then add transform operations to it. // Finally, add transform group to the control. TransformGroup TFG = new TransformGroup(); SkewTransform skewTransform1 = new SkewTransform(0, -20, 0, 0); TranslateTransform transTransform1 = new TranslateTransform(-90, 0); TFG.Children.Add(transTransform1); TFG.Children.Add(skewTransform1); btnProducts.RenderTransform = TFG;
Flip an image horizontally (on Y axis). XAML:
<Image Name="imgProduct" Source="/images/icons/icon-product.png" > <Image.Triggers> <Trigger Property="ucProductPreview.ReverseImage" Value="True"> <Setter Property="Image.LayoutTransform"> <Setter.Value> <ScaleTransform ScaleX="-1"/> </Setter.Value> </Setter> </Trigger> </Image.Triggers> </Image>
Flip an image horizontally (on Y axis). C#:
// Scale Transform: Flip image on Y axis ScaleTransform scaletrans = new ScaleTransform(); scaletrans.ScaleX = -1; imgProduct.LayoutTransform = scaletrans; // Translate Transform: Move image 100 pixels (X axis) TranslateTransform tt = new TranslateTransform(100, 0); imgProduct.RenderTransform = tt;
References
Animations
// Add Animation for btnSearch DoubleAnimation anim = new DoubleAnimation(); anim.From = 90; anim.To = 120; anim.AutoReverse = true; anim.AccelerationRatio = .33; anim.DecelerationRatio = .33; btnSearch.BeginAnimation(Button.WidthProperty, anim);
References
Examples
XAML:
<Canvas> <!--Geometrical Figures--> <Ellipse Name="shapeEllipse" Width="50" Height="50" Fill ="Gold" /> <Polygon Name="shapeTriangle" Points="300,200 400,125 400,275 300,200" Stroke="Purple" StrokeThickness="2"> <Polygon.Fill> <SolidColorBrush Color="Blue" Opacity="0.4"/> </Polygon.Fill> </Polygon> <!--Controls--> <Button Name="btnAnimate" Width="100" Height="30" Canvas.Bottom="5" Click="btnAnimate_Click" >Animate</Button> </Canvas>
C#:
private void btnAnimate_Click(object sender, RoutedEventArgs e) { AnimateEllipse(); AnimateTriangle(); } private void AnimateEllipse() { TranslateTransform tt = new TranslateTransform(0, 0); DoubleAnimation daX = new DoubleAnimation(100, new Duration(TimeSpan.FromMilliseconds(500)) ); DoubleAnimation daY = new DoubleAnimation(50, new Duration(TimeSpan.FromMilliseconds(500)) ); tt.BeginAnimation(TranslateTransform.XProperty, daX); tt.BeginAnimation(TranslateTransform.YProperty, daY); shapeEllipse.RenderTransform = tt; } private void AnimateTriangle() { // Scale Transform ScaleTransform scaletrans = new ScaleTransform(); scaletrans.ScaleX = -1; //scaletrans.CenterX = 0.25; shapeTriangle.LayoutTransform = scaletrans; // Translate Transform TranslateTransform tt = new TranslateTransform(100, 0); shapeTriangle.RenderTransform = tt; }
Control Triggering Animation of Another Control
Button
click triggers Border
animation.
Here is the button definition:
<Button Name="btnsidePatient" Margin="4,4,0,4" Padding="5" Width="90" Click="SideButtons_Click" MouseEnter="SideButtons_MouseEnter"> <Button.Triggers> <EventTrigger RoutedEvent="Button.MouseLeave"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="transPanelSlideLeft" Storyboard.TargetProperty="(TranslateTransform.X)" To="-200" Duration="0:0:1" AutoReverse="False"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Button.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="transPanelSlideRight" Storyboard.TargetProperty="(TranslateTransform.X)" To="200" Duration="0:0:1" AutoReverse="False"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> <StackPanel> <Image Source="/images/icons/icon-patient.png" Height="30" /> <TextBlock HorizontalAlignment="Center">Patient</TextBlock> </StackPanel> </Button>
Border that gets animated:
<Border CornerRadius="10" Margin="0,0,10,10" BorderBrush="DarkGray" BorderThickness="2" Background="White"> <Border.RenderTransform> <TranslateTransform x:Name="transPanelSlideLeft" /> </Border.RenderTransform> <Grid> ... </Grid> </Border>