c# - UWP Xaml 旋转复选框修剪标签
问题描述
我正在尝试将复选框水平并排放置。因为我有很多,我希望标签是垂直的。问题是应用程序测量标签可见部分的宽度,然后旋转它(我猜),因此只呈现标签的一小部分。我发现 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>
在提供的图片中,您可以看到结果 - 复选框有一些宽度,但只有在旋转之前可见的部分才会呈现在旋转结果中。请问有什么想法吗?
解决方案
在 WPF 中,有一个LayoutTransform
属性可以在执行布局时应用转换。
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>
...
推荐阅读
- reactjs - 如何在界面中键入内置函数?
- javascript - ReferenceError:标题未在 Google 脚本中定义
- vba - 子表单多条件查询不起作用?
- many-to-many - 数据仓库多对多桥表是否应包含任何过滤条件
- mysql - 查询获取MAX值和对应的日期
- react-native - 移除移动应用 React Native 中的自动填充 Chrome 黄色背景色
- laravel - 延迟加载 Eloquent 与参数的关系
- r - 从数据框中过去的值到矩阵的列名(在 R 中)
- reactjs - 状态变量钩子不会在闭包内递增
- mysql - 如何在 Laravel 中获取一行的行号?