Export (0) Print
Expand All

How to: Apply a Transform to an Element When an Event Occurs

This example shows how to apply a ScaleTransform when an event occurs. The concept that is shown here is the same that you use for applying other types of transformations. For more information about the available types of transformations, see the Transform class or Transforms Overview.

You can apply a transform to an element in either of these two ways:

  • If you do not want the transform to affect layout, use the RenderTransform property of the element.

  • If you do want the transform to affect layout, use the LayoutTransform property of the element.

The following example applies a ScaleTransform to the RenderTransform property of a button. When the mouse moves over the button, the ScaleX and ScaleY properties of the ScaleTransform are set to 2, which causes the button to become larger. When the mouse moves off the button, ScaleX and ScaleY are set to 1, which causes the button to return to its original size.

<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="WCSample.TransformExample"
  WindowTitle="Transform on Mouse Enter Example">
  <Canvas Width="400" Height="400">

    <Button Name="Button1" MouseEnter="Enter" MouseLeave="Leave">
      <Button.RenderTransform>
        <ScaleTransform x:Name="myScaleTransform" ScaleX="1" ScaleY="1" />
      </Button.RenderTransform>
      Button
    </Button>


  </Canvas>
</Page>

public partial class TransformExample : Page {
  private void Enter(object sender, MouseEventArgs args) {
      myScaleTransform.ScaleX = 2;
      myScaleTransform.ScaleY = 2;
  }

  private void Leave(object sender, MouseEventArgs args) {
      myScaleTransform.ScaleX = 1;
      myScaleTransform.ScaleY = 1;
  }
}
Show:
© 2014 Microsoft