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.
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 away from the button, ScaleX and ScaleY are set to 1, which causes the button to return to its original size.
Example
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="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>
<x:Code>
<![CDATA[
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
]]>
</x:Code>
</Canvas>
</Page>