[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] LayoutTransformControl 엘리먼트 : 레이아웃 변환 컨트롤 만들기

■ LayoutTransformControl 엘리먼트를 사용해 레이아웃 변환 컨트롤을 만드는 방법을 보여준다.

※ 행렬 변환을 적용하는 FrameworkElement 컨트롤이다.
※ 적용할 수 있는 변환은 다음 중 하나이다.

• RotateTransform
• ScaleTransform
• SkewTransform
• MatrixTransform
• TransformGroup

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="20"
        RowSpacing="20"
        ColumnSpacing="20">
        <Grid.Resources>
            <Style x:Key="CardBorderStyleKey" TargetType="Border">
                <Setter Property="BorderThickness" Value="1"                                                   />
                <Setter Property="BorderBrush"     Value="{ThemeResource CardStrokeColorDefaultBrush}"         />
                <Setter Property="CornerRadius"    Value="{StaticResource ControlCornerRadius}"                />
                <Setter Property="Background"      Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
                <Setter Property="Padding"         Value="10"                                                  />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <control:LayoutTransformControl Grid.Row="0" Grid.Column="0">
            <control:LayoutTransformControl.Transform>
                <TransformGroup>
                    <RotateTransform Angle="30" />
                    <ScaleTransform ScaleX="1"  />
                    <SkewTransform AngleX="10"  />
                </TransformGroup>
            </control:LayoutTransformControl.Transform>
            <Border
                Style="{StaticResource CardBorderStyleKey}"
                Width="200"
                Height="50">
                <TextBlock Text="Layout Fixed Size." />
            </Border>
        </control:LayoutTransformControl>
        <control:LayoutTransformControl Grid.Row="0" Grid.Column="1">
            <control:LayoutTransformControl.Transform>
                <TransformGroup>
                    <RotateTransform Angle="30" />
                    <ScaleTransform ScaleX="1"  />
                    <SkewTransform AngleX="10"  />
                </TransformGroup>
            </control:LayoutTransformControl.Transform>
            <Border Style="{StaticResource CardBorderStyleKey}">
                <TextBlock Text="Layout Full Frame." />
            </Border>
        </control:LayoutTransformControl>
        <Border Grid.Row="1" Grid.Column="0"
            Style="{StaticResource CardBorderStyleKey}"
            Width="200"
            Height="50"
            RenderTransformOrigin="0.5 0.5">
            <Border.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="30" />
                    <ScaleTransform ScaleX="1"  />
                    <SkewTransform AngleX="10"  />
                </TransformGroup>
            </Border.RenderTransform>
            <TextBlock Text="Render Fixed Size." />
        </Border>
        <Border Grid.Row="1" Grid.Column="1"
            Style="{StaticResource CardBorderStyleKey}"
            RenderTransformOrigin="0.5 0.5">
            <Border.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="30"  />
                    <ScaleTransform  ScaleX="1"  />
                    <SkewTransform   AngleX="10" />
                </TransformGroup>
            </Border.RenderTransform>
            <TextBlock Text="Render Full Frame." />
        </Border>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="20"

RowSpacing="20"

ColumnSpacing="20">

<Grid.Resources>

</Style>

</Grid.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<control:LayoutTransformControl Grid.Row="0" Grid.Column="0">

<control:LayoutTransformControl.Transform>

</TransformGroup>

</control:LayoutTransformControl.Transform>

<Border

Style="{StaticResource CardBorderStyleKey}"

Width="200"

Height="50">

</Border>

</control:LayoutTransformControl>

<control:LayoutTransformControl Grid.Row="0" Grid.Column="1">

<control:LayoutTransformControl.Transform>

</TransformGroup>

</control:LayoutTransformControl.Transform>

</Border>

</control:LayoutTransformControl>

<Border Grid.Row="1" Grid.Column="0"

Style="{StaticResource CardBorderStyleKey}"

Width="200"

Height="50"

RenderTransformOrigin="0.5 0.5">

<Border.RenderTransform>

</TransformGroup>

</Border.RenderTransform>

</Border>

<Border Grid.Row="1" Grid.Column="1"

Style="{StaticResource CardBorderStyleKey}"

RenderTransformOrigin="0.5 0.5">

<Border.RenderTransform>

</TransformGroup>

</Border.RenderTransform>

</Border>

</Grid>

</Page>

TestProject.zip