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

12016 ワード
Xaml WPF WPF テキストリンク

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

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

やりたいこと

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>

回転を加える

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>

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

拡大縮小する

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>

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

移動する

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>

複数の変換をさせたいとき

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>

※注意
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>

関連記事

C#のコードから同じことをしたいときはこちら。
[WPF/xaml/C#]コントロールの大きさや位置を、C#コードから変化させる(RenderTransform)

コード

参考

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