Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
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();
}
}
<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>
Windows Community Toolkit feedback
Windows Community Toolkit is an open source project. Select a link to provide feedback:
Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowTraining
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.