UWP Xaml 旋转复选框修剪标签

Question

我正在尝试将复选框水平并排放置。因为我有很多，所以我希望标签是垂直的。问题是应用程序测量标签的可见部分的宽度，然后旋转它（我猜），因此只渲染了标签的一小部分。我发现 Xaml 非常混乱，因为这只是“愚蠢的”静态视图，我想在 Xaml 中定义它，而不是实现任何渲染类.

我使用以下代码旋转复选框：

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

我想这样显示它们：

<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>

在提供的图片中，您可以看到结果 - 复选框有一些宽度，但在旋转结果中只呈现旋转之前可见的部分。有什么想法吗？

Answer 1

在 WPF 中，有一个 LayoutTransform 属性在执行 layout 时应用转换。

UWP 中没有这样的属性，但您可以使用 Microsoft.Toolkit.Uwp.UI.Controls NuGet 包中的 LayoutTransformControl：

<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>
    ...

UWP Xaml 旋转复选框修剪标签

UWP Xaml rotate checkbox trims label

c#

xaml

windows-10-iot-core

uwp