== WPF Control Transforms and Animations ==
== Transforms ==

XAML:
<code xml>
<!-- 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>
</code>

Programmatically in C#:
<code csharp>
// 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;
</code>

Flip an image horizontally (on Y axis).  XAML:
<code xml>
<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>
</code>

Flip an image horizontally (on Y axis).  C#:
<code csharp>
// 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;
</code>

=== References ===
  * [[http://dotnetwizard.net/coding/pan-zoom-rotate-images-with-wpf-using-c/|Pan, Zoom, Rotate images with WPF using C#]]

== Animations ==
<code csharp>
// 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);
</code>

**Other Examples**

XAML:
<code xml>
<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>
</code>

C#:
<code csharp>
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;
}
</code>

=== References ===
  * [[http://www.galasoft.ch/mydotnet/articles/article-2006102701.aspx|WPF: Animations in XAML and code behind]]


== Control Triggering Animation of Another Control ==

''Button'' click triggers ''Border'' animation.

Here is the button definition:
<code xml>
<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>
</code>

Border that gets animated:
<code xml>
<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>
</code>