How to: Use a MatrixTransform to Create Custom Transforms

  • Article

This example shows how to use a MatrixTransform to translate (move) the position, stretch, and skew of a Button.

Note

Use the MatrixTransform class to create custom transformations that are not provided by the RotateTransform, SkewTransform, ScaleTransform, or TranslateTransform classes.

Example

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel Margin="20">
    <Canvas HorizontalAlignment="Left" Width="340" Height="240" >

      <Button MinWidth="100">Click
        <Button.RenderTransform>
          <MatrixTransform x:Name="myMatrixTransform">
            <MatrixTransform.Matrix >

              <!-- OffsetX and OffsetY specify the position of the button,
              M11 stretches it, and M12 skews it. -->
              <Matrix OffsetX="10" OffsetY="100" M11="3" M12="2"/>
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Button.RenderTransform>
      </Button>
    </Canvas>
  </StackPanel>
</Page>

See Also

Reference

MatrixTransform

Transform

Concepts

Transforms Overview

Shapes and Basic Drawing in WPF Overview

Other Resources

Transformations How-to Topics