Help us understand the problem. What is going on with this article?

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

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

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

やりたいこと

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

やり方

描くUI要素のRenderTransformに、Transformクラスを継承したRotateTransformScaleTransformTranslateTransformなどをセットして実現する。

サンプルコード

処理前

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

元.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

回転を加える

RenderTransformRotateTransformをセットし、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

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

image.png

拡大縮小する

RenderTransformScaleTransformをセットし、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

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

移動する

RenderTransformTranslateTransformをセットし、右に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

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

RenderTransformTransformGroupをセットし、さらにそこに上の〇〇〇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

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

複合2.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

関連記事

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

コード

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

tera1707
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away