UWP Xaml rotate checkbox trims label

Question

I am trying to put checkboxes horizontally next to each other. Since I have lots of them, I want the labels to be vertically. The issue is that the application measures the width of wisible part of the label and then rotates it (I guess), and therefore just a small part of label is rendered. I find Xaml quite confusing and since this is just "stupid" static view, I would like to define it in Xaml, not implementing any rendering classes.

I rotate the Checkbox with the following code:

<Page.Resources>
    <Style TargetType="CheckBox">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="-90"/>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

And I want to display them like this:

<Grid Grid.Row="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[0], Mode=OneWay}" Grid.Column="0" Content="Buffer A min" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[1], Mode=OneWay}" Grid.Column="1" Content="Buffer A max" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[2], Mode=OneWay}" Grid.Column="2" Content="Buffer B min" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[3], Mode=OneWay}" Grid.Column="3" Content="Buffer B max" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[4], Mode=OneWay}" Grid.Column="4" Content="Pallete too high" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[5], Mode=OneWay}" Grid.Column="5" Content="Pallete ok" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[6], Mode=OneWay}" Grid.Column="6" Content="Pallete down" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[7], Mode=OneWay}" Grid.Column="7" Content="Pallete up" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[8], Mode=OneWay}" Grid.Column="8" Content="Pallete button" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[9], Mode=OneWay}" Grid.Column="9" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[10], Mode=OneWay}" Grid.Column="10" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[11], Mode=OneWay}" Grid.Column="11" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[12], Mode=OneWay}" Grid.Column="12" Content="Pallete ok 2" VerticalAlignment="Bottom"></CheckBox>
    <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[13], Mode=OneWay}" Grid.Column="13" Content="Pallete too high 2" VerticalAlignment="Bottom"></CheckBox>
</Grid>

In the picture provided, you can see the result - checkbox has some width, but only the part visible prior to the rotation is rendered in the rotated result. Any ideas please?

Answer 1

In WPF there is a LayoutTransform property that applies the transformation when layout is performed.

There is no such property in UWP but you could use the LayoutTransformControl from the Microsoft.Toolkit.Uwp.UI.Controls NuGet package:

<Page
    ...
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
    <Page.Resources>
        <Style TargetType="controls:LayoutTransformControl">
            <Setter Property="Transform">
                <Setter.Value>
                    <RotateTransform Angle="-90" />
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    ...
    <controls:LayoutTransformControl Grid.Column="1">
        <CheckBox IsChecked="{x:Bind (x:Boolean)DataModel.Moxa3InData[1], Mode=OneWay}" Content="Buffer A max" VerticalAlignment="Bottom" />
    </controls:LayoutTransformControl>
    ...