Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
The LayoutTransformControl is a control that applies Matrix transformations on any FrameworkElement of your application.
The transformations that can be applied are one of the following:
<!-- 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>
// 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();
}
}
Syntax
<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>
Collaborate with us on GitHub
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
Windows Community Toolkit