Edit

Share via

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

  • Article

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.

Example

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

Partial Public Class TransformExample
    Inherits Page
    Private Sub Enter(ByVal sender As Object, ByVal args As System.Windows.Input.MouseEventArgs)
        myScaleTransform.ScaleX = 2
        myScaleTransform.ScaleY = 2
    End Sub

    Private Sub Leave(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs)
        myScaleTransform.ScaleX = 1
        myScaleTransform.ScaleY = 1
    End Sub
End Class

See also