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>