Ярлык форм Xamarin / проблема ротации StackLayout

Question

Я пытаюсь повернуть некоторые ярлыки в формах xamarin, но есть некоторые проблемы. Если я поверну одну метку, текст будет обрезан, и будут видны только некоторые буквы, я поместил каждую метку внутри стекового макета и повернул сам стековый макет на -90 градусов, как показано ниже:

<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

Я согласен с ответом Лукаса, использование полей является правильным решением.

Возможно, вам стоит взглянуть на 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>

Answer 2

Причина:

Когда вы установите Rotation, он будет вращаться вокруг центра самого себя. Так что в верхней части экрана будет некоторое «пространство».

Обход:

Вы можете установить поле для StackLayout.

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

И результат, как на следующем рисунке.