UWP Xaml 旋转复选框修剪标签

Posted 2023-03-25

【中文标题】UWP Xaml 旋转复选框修剪标签

【英文标题】：UWP Xaml rotate checkbox trims label

【发布时间】：2021-05-06 18:46:51

【问题描述】：

我正在尝试将复选框水平并排放置。因为我有很多，我希望标签是垂直的。问题是应用程序测量标签可见部分的宽度，然后旋转它（我猜），因此只呈现标签的一小部分。我发现 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>

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

【问题讨论】：

您的问题解决了吗？如果您有任何疑问，请随时与我们联系。

你好。实际上不，复选框应该显示 IoT 项目的 GPIO 状态，并且由于结果没有附加显示，我不想在上面花费不必要的时间，这就是我不接受 @mm8 答案的原因。另外，我相信这必须有解决方案，而无需安装额外的 nugets。

【参考方案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>
    ...

【讨论】：

@Klemikaze：你试过这个吗？

你好。实际上没有，复选框应该显示 IoT 项目的 GPIO 状态，由于结果没有附加显示，我不想在上面花费不必要的时间。