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

Other 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;
}

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>