Lire en anglais

Partager via

LayoutTransformControl

  • Article

Le LayoutTransformControl est un contrôle qui applique des transformations Matrix sur n’importe quelle FrameworkElement de votre application.

Les transformations qui peuvent être appliquées sont l’une des suivantes :

XAML 
<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="LayoutTransformControlExperiment.Samples.LayoutTransformControlSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:LayoutTransformControlExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid ColumnSpacing="24"
          RowSpacing="24">
        <Grid.Resources>
            <Style x:Key="BorderCardStyle"
                   TargetType="Border">
                <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
                <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Padding" Value="12" />
                <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!--  Layout Transform Fixed Size  -->
        <controls:LayoutTransformControl>
            <controls:LayoutTransformControl.Transform>
                <TransformGroup>
                    <RotateTransform Angle="{x:Bind Angle, Mode=OneWay}" />
                    <ScaleTransform ScaleX="{x:Bind CustomScaleX, Mode=OneWay}" ScaleY="{x:Bind CustomScaleY, Mode=OneWay}" />
                    <SkewTransform AngleX="{x:Bind SkewX, Mode=OneWay}" AngleY="{x:Bind SkewY, Mode=OneWay}" />
                </TransformGroup>
            </controls:LayoutTransformControl.Transform>
            <Border Width="200"
                    Height="50"
                    Style="{StaticResource BorderCardStyle}">
                <TextBlock Text="Layout Fixed Size." />
            </Border>
        </controls:LayoutTransformControl>

        <!--  Layout Transform Full Size  -->
        <controls:LayoutTransformControl Grid.Column="1">
            <controls:LayoutTransformControl.Transform>
                <TransformGroup>
                    <RotateTransform Angle="{x:Bind Angle, Mode=OneWay}" />
                    <ScaleTransform ScaleX="{x:Bind CustomScaleX, Mode=OneWay}" ScaleY="{x:Bind CustomScaleY, Mode=OneWay}" />
                    <SkewTransform AngleX="{x:Bind SkewX, Mode=OneWay}" AngleY="{x:Bind SkewY, Mode=OneWay}" />
                </TransformGroup>
            </controls:LayoutTransformControl.Transform>
            <Border Style="{StaticResource BorderCardStyle}">
                <TextBlock Text="Layout Full Frame." />
            </Border>
        </controls:LayoutTransformControl>

        <!--  Render Transform Fixed Size  -->
        <Border Grid.Row="1"
                Width="200"
                Height="50"
                RenderTransformOrigin="0.5,0.5"
                Style="{StaticResource BorderCardStyle}">
            <Border.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="{x:Bind Angle, Mode=OneWay}" />
                    <ScaleTransform ScaleX="{x:Bind CustomScaleX, Mode=OneWay}" ScaleY="{x:Bind CustomScaleY, Mode=OneWay}" />
                    <SkewTransform AngleX="{x:Bind SkewX, Mode=OneWay}" AngleY="{x:Bind SkewY, Mode=OneWay}" />
                </TransformGroup>
            </Border.RenderTransform>

            <TextBlock Text="Render Fixed Size." />
        </Border>

        <!--  Render Transform Full Size  -->
        <Border Grid.Row="1"
                Grid.Column="1"
                RenderTransformOrigin="0.5,0.5"
                Style="{StaticResource BorderCardStyle}">
            <Border.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="{x:Bind Angle, Mode=OneWay}" />
                    <ScaleTransform ScaleX="{x:Bind CustomScaleX, Mode=OneWay}" ScaleY="{x:Bind CustomScaleY, Mode=OneWay}" />
                    <SkewTransform AngleX="{x:Bind SkewX, Mode=OneWay}" AngleY="{x:Bind SkewY, Mode=OneWay}" />
                </TransformGroup>
            </Border.RenderTransform>

            <TextBlock Text="Render Full Frame." />
        </Border>
    </Grid>
</Page>
C# 
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Controls;

namespace LayoutTransformControlExperiment.Samples;

/// <summary>
/// An example sample page of a custom control inheriting from Panel.
/// </summary>
[ToolkitSampleNumericOption("Angle", 0, -180.0, 180.0, 1, false, Title = "Angle")]
[ToolkitSampleNumericOption("CustomScaleX", 1, 0.0, 5.0, 1, false, Title = "ScaleX")]
[ToolkitSampleNumericOption("CustomScaleY", 1, 0.0, 5.0, 1, false, Title = "ScaleY")]
[ToolkitSampleNumericOption("SkewX", 0, -180.0, 180.0, 1, false, Title = "SkewX")]
[ToolkitSampleNumericOption("SkewY", 0, -180.0, 180.0, 1, false, Title = "SkewY")]

[ToolkitSample(id: nameof(LayoutTransformControlSample), "LayoutTransformControl", description: $"A sample for showing how to create and use a {nameof(LayoutTransformControl)}.")]
public sealed partial class LayoutTransformControlSample : Page
{
    public LayoutTransformControlSample()
    {
        this.InitializeComponent();
    }
}

Syntaxe

XAML 
<controls:LayoutTransformControl Background="Black" 
                                 HorizontalAlignment="Center" 
                                 VerticalAlignment="Center"
                                 RenderTransformOrigin="0.5,0.5">
    <controls:LayoutTransformControl.Transform>
        <RotateTransform Angle="90" />
    </controls:LayoutTransformControl.Transform>

    <Border HorizontalAlignment="Center" 
            VerticalAlignment="Center"
            BorderBrush="Red"
            BorderThickness="5">
        <Grid>
            <TextBlock Padding="10" Foreground="White" Text="This is a test message." />
        </Grid>
    </Border>
</controls:LayoutTransformControl>