Cómo: Aplicar una transformación a un elemento cuando se provoca un evento

En este ejemplo se muestra cómo aplicar ScaleTransform cuando se provoca un evento. El concepto que se muestra aquí es el mismo que se utiliza para aplicar otros tipos de transformaciones. Para obtener más información sobre los tipos de transformaciones disponibles, vea la clase Transform o la Información general sobre transformaciones.

Puede aplicar una transformación a un elemento de cualquiera de estas dos maneras:

• Si no desea que la transformación afecte al diseño, utilice la propiedad RenderTransform del elemento.

• Si desea que la transformación afecte al diseño, utilice la propiedad LayoutTransform del elemento.

En el ejemplo siguiente se aplica ScaleTransform a la propiedad RenderTransform de un botón. Cuando el mouse se mueve por encima del botón, las propiedades ScaleX y ScaleY de ScaleTransform se establecen en 2, lo que hace que el botón se agrande. Cuando el mouse se aleja del botón, las propiedades ScaleX y ScaleY se establecen en 1, lo que hace que el botón recupere su tamaño original.

Ejemplo

<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

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

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

Vea también

Referencia

Transform

ScaleTransform

Conceptos

Información general sobre transformaciones

Información general sobre eventos enrutados

Otros recursos

Temas "Cómo..." de transformaciones