UWP : How to create panel with rotation?

问题

I like to implement a screen with 2 panel like this :

Left one and right one is rotated. Their all children view will have measured width and height.

I user a CompositeTransform and re-measure it in PageLoad but doesn't have any update.

public sealed partial class TestRotate : Page
{

    public TestRotate()
    {
        this.InitializeComponent();            
        this.Loaded += PageLoaded;
        this.SizeChanged += PageSizeChange;
    }

    private void PageSizeChange(object sender, SizeChangedEventArgs e)
    {
        Measure(new Size());
    }

    private void PageLoaded(object sender, RoutedEventArgs e)
    {
        CompositeTransform compositeTransform = new CompositeTransform();
        compositeTransform.Rotation = 90;
        compositeTransform.CenterX = areaA.ActualWidth / 2;
        compositeTransform.CenterY = areaA.ActualHeight / 2;
        areaA.RenderTransform = compositeTransform;

        Measure(new Size());
        areaA.Measure(new Size(areaA.ActualHeight, areaA.ActualWidth));
    }

    private void btnStart_Click(object sender, RoutedEventArgs e)
    {

    }
}

This is XAML :

<Page
    x:Class="MyApp.TestRotate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid >

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" x:Name="areaA" Grid.Row="0" Background="GreenYellow">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="TextBlock" Grid.Column="0"/>
                <TextBox Text="TextBox" Grid.Column="1"/>
            </Grid>
            <Button Content="Button"/>
        </StackPanel>


    </Grid>
</Page>

But the result doesn't match what I expected. The panel is not auto size to fit the parent

回答1:

I found a solution in this post which works in my case. It bring LayoutTransform from WPF to UWP.

来源：https://stackoverflow.com/questions/47507930/uwp-how-to-create-panel-with-rotation