[WPF/xaml] 画面の要素を回転/拡大縮小/移動する（RenderTransform）

**もくじ**
→https://qiita.com/tera1707/items/4fda73d86eded283ec4f

**回転/拡大縮小/移動の関連記事**

- [画面の要素を回転/拡大縮小/移動する（RenderTransform）](https://qiita.com/tera1707/items/b6a1803a64f34827f741)
- [画面の要素を回転/拡大縮小/移動する（RenderTransformにMatrixTransform）](https://qiita.com/tera1707/items/5d02ca57f692283a0f9a)
- [フリックやピンチインアウトでControlを移動・拡大縮小する(ManipulationDeltaイベントとMatrixTransform)](https://qiita.com/tera1707/items/dff76c2b870fe5c63e9d)
- [[xaml/C#] 枠の中で画像などを拡大縮小する（マウスと指で移動/拡大）](https://qiita.com/tera1707/items/37af056540f23e73213f)


# やりたいこと
xamlで画面に配置したものを、移動したり、拡大縮小、回転させたい。

# やり方
描くUI要素の`RenderTransform`に、`Transform`クラスを継承した`RotateTransform`や`ScaleTransform`、`TranslateTransform`などをセットして実現する。

# サンプルコード

### 処理前

まず、元となる画面はこれを使う。

```元.xaml
<Window x:Class="WpfApp35.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp35"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition /><RowDefinition /><RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition /><ColumnDefinition /><ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- 四角を配置 -->
        <Rectangle Grid.Column="1" Grid.Row="1" Fill="LightSeaGreen" Stroke="Beige">
        </Rectangle>
    </Grid>
</Window>

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/9a4db4e9-5ecb-be11-5322-1a0d42004dfe.png)

### 回転を加える
`RenderTransform`に`RotateTransform`をセットし、45度回転させる。

```45度回転.xaml
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightSeaGreen" Stroke="Beige" RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="45"/>
    </Rectangle.RenderTransform>
</Rectangle>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/2656a995-16bd-f296-e44a-cc599775301d.png)

**※注意**
`RenderTransformOrigin`に0.5,0.5をセットすると、図のように四角の真ん中を中心として回転する。なにもセットしないと、四角の左上を中心にして回転する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/2a3b30ca-39dd-9bbe-26c0-ca93544720c4.png)


### 拡大縮小する
`RenderTransform`に`ScaleTransform`をセットし、1/2に縮小する。

```拡大縮小.xaml
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightSeaGreen" Stroke="Beige" RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
    </Rectangle.RenderTransform>
</Rectangle>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/7e858578-7694-7968-8a1f-23e1e01f69ce.png)

**※注意**
`RenderTransformOrigin`に0.5,0.5をセットすると、図のように四角の真ん中を中心として縮小する。なにもセットしないと、四角の左上を中心にして縮小する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/364669ed-9c58-06ef-b26d-6b00a97737a8.png)

### 移動する
`RenderTransform`に`TranslateTransform`をセットし、右に10、下に10移動する。

```平行移動.xaml
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightSeaGreen" Stroke="Beige">
    <Rectangle.RenderTransform>
        <TranslateTransform X="10" Y="10" />
    </Rectangle.RenderTransform>
</Rectangle>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/781dbae9-a103-708a-1ec5-e8a3fd0a0fb7.png)

### 複数の変換をさせたいとき
`RenderTransform`に`TransformGroup`をセットし、さらにそこに上の`〇〇〇Transform`をセットする。

```複合.xaml
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightSeaGreen" Stroke="Beige">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="45"/>
            <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            <TranslateTransform X="10" Y="10" />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/c80dd70d-3cc0-81fe-56ba-57c5dfc9fab7.png)

**※注意**
`TransformGroup`にセットする〇〇〇Transformの順番により、結果が変わるので注意。

```複合２.xaml
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightSeaGreen" Stroke="Beige">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            <TranslateTransform X="10" Y="10" />
            <RotateTransform Angle="45"/>
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352601/0a374c3b-b490-1f63-38df-1861fd5d9599.png)

# 関連記事
C#のコードから同じことをしたいときはこちら。
[[WPF/xaml/C#]コントロールの大きさや位置を、C#コードから変化させる(RenderTransform)](https://qiita.com/tera1707/items/252fe9f7b88cded31e89)

# コード
https://github.com/tera1707/WPF-/tree/master/032_ScaleTranslateByMatrix

# 参考

Transform Class
https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.media.transform?view=netframework-4.8