XAML 如何使用Xamarin表单正确旋转标签?

g52tjvyc  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(120)

我想将页面中的一个区域最小化到一侧。当它最小化时,我希望该区域的“标题”旋转90度显示,但当我这样做时,它会被剪切到标签的未旋转高度,因此它看起来如下所示(旋转后的文本应显示为“待处理任务摘要”):

显然,这是正在发生的事情:

下面是XAML中定义标签的部分。我尝试了Fill、FillAndExpand、StartAndExpand等的几种变体,并设置了HeightRequest和WidthRequest属性。我还在没有StackLayout的情况下完成了这一操作,并将旋转应用于标签,而不是StackLayout,它看起来总是一样的。

<StackLayout 
     HorizontalOptions="Fill"
     VerticalOptions="Fill"
     Rotation="90"
     IsVisible="{Binding DetailMinimized}" >
     <Label                                      
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            LineBreakMode="NoWrap"
            HorizontalTextAlignment="Center"
            VerticalTextAlignment="Center"
            Text="{Binding DetailTitle}"
            IsVisible="{Binding DetailMinimized}" />
</StackLayout>

那么,构造XAML以使旋转后全文可见的正确方法是什么呢?

9lowa7mx

9lowa7mx1#

我已经设法做到这一点与一个小负保证金黑客。

下面是代码:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XfLabelRotationApp.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Grid ColumnDefinitions="auto, *" ColumnSpacing="0">
        <Grid
            Grid.Column="0"
            ColumnDefinitions="*,auto"
            ColumnSpacing="0">

            <StackLayout
                Grid.Column="0"
                Padding="10"
                Spacing="10">
                <BoxView
                    BackgroundColor="DarkBlue"
                    HeightRequest="30"
                    WidthRequest="30" />
                <BoxView
                    BackgroundColor="DarkBlue"
                    HeightRequest="30"
                    WidthRequest="30" />
                <BoxView
                    BackgroundColor="DarkBlue"
                    HeightRequest="30"
                    WidthRequest="30" />
                <BoxView
                    BackgroundColor="DarkBlue"
                    HeightRequest="30"
                    WidthRequest="30" />
            </StackLayout>

            <Grid
                Grid.Column="1"
                BackgroundColor="#ddd"
                WidthRequest="30">
                <Label
                    Margin="-100,0"
                    Rotation="90"
                    Text="Open Detail By Dragging This"
                    VerticalTextAlignment="Center" />
            </Grid>

        </Grid>

        <StackLayout
            Grid.Column="1"
            Padding="10"
            BackgroundColor="#eee">
            <Label Text="Main App Content" />
        </StackLayout>
    </Grid>

</ContentPage>

注意Label上的Margin="-100,0",如果没有Margin="-100,0",标签将只使用WidthHeight,这就是Xamarin.Forms中Rotation属性的工作方式。
希望这个有用。

相关问题