Question

我正在尝试旋转一些xamarin形式的标签，但是存在一些问题。如果我旋转一个标签，文本将被剪裁，并且只有几个可见的字母，我将每个标签放置在stacklayout内，然后以-90度作为以下代码旋转了stacklayout本身

<StackLayout Spacing="0"
             Rotation="-90"
             VerticalOptions="Start"
             HorizontalOptions="End">
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
    </StackLayout>

标签旋转正确，没有修剪文本。现在的问题是堆栈布局的VerticalOptions或HorizontaOptions无法正常工作。当我将VerticalOption设置为“开始”时，它将不在顶部显示所有内容，而是在顶部显示25％的内容。当我将HorizontalOptions设置为“开始”或“结束”时，如下图所示：

任何人都可以帮助解决此问题，或者是否有更好的方法来解决此问题？预先感谢

Answer 1

原因：

设置 Rotation 时，它将围绕其中心旋转。因此，屏幕顶部会出现一些“空间”。

解决方法：

您可以设置StackLayout的边距。

<StackLayout Spacing="0"
             Rotation="-90"
             Margin="0,-130,0,0"
             VerticalOptions="Start"
             HorizontalOptions="Center">
        ...
</StackLayout>

结果和下图一样。

Answer 2

我同意卢卡斯的回答，使用边距是一种有效的解决方案。

也许您应该研究RelativeLayout？ RelativeLayout可以用于相对于整体布局或其他视图在屏幕上放置视图。

注意：由于定义了约束的方式，因此可能在C＃中制作比XAML指定的布局更复杂的布局。

一些有用的链接

RelativeLayout文档： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relative-layout
示例应用：https://developer.xamarin.com/samples/xamarin-forms/UserInterface/Layout/
复杂的示例应用：https://developer.xamarin.com/samples/xamarin-forms/UserInterface/BusinessTumble/

这是我使用XAML扔在一起的示例。

<RelativeLayout>
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=-30}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=25}" 
        BackgroundColor="Green" 
        Rotation="-90"
        Text="Hello World" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=-10}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=25}" 
        BackgroundColor="Blue" 
        Rotation="-90"
        Text="Hello World" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=10}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=25}" 
        BackgroundColor="Red" 
        Rotation="-90"
        Text="Hello World" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=55}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=18}" 
        BackgroundColor="Green" 
        Rotation="-90"
        Text="123456" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=75}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=120}" 
        BackgroundColor="Green" 
        Rotation="-180"
        Text="ABC DEF GHI" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=120}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="45"
        Text="JKL MNO PQR" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=320}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="-270"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Blue" 
        Rotation="-90"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="-70"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Blue" 
        Rotation="-50"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="-30"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
</RelativeLayout>

Xamarin Forms Label / StackLayout Rotation Issue

2 个答案: