LayoutTransformControl
LayoutTransformControl
は、アプリケーションの任意の FrameworkElement
上の Matrix 変換を適用するコントロールです。
適用できる変換は、以下のいずれかです。
<!-- 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>
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Windows Community Toolkit
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示