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
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>