时间戳

首页 > 解决方案 > Xamarin xaml 试图在框架中获取彼此下方的文本标签

xaml - Xamarin xaml 试图在框架中获取彼此下方的文本标签

问题描述

我试图在一个框架中将文本标签放在彼此下方，但文本的行为真的很奇怪，而且我尝试过的没有任何效果。

我正在使用这段代码：

<AbsoluteLayout>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="285" TranslationX="10" HeightRequest="70" WidthRequest="120">
    <StackLayout Orientation="Horizontal" Padding="0" Spacing="-10" HorizontalOptions="FillAndExpand" BackgroundColor="green">
        <Image Source="mark_red.png" Scale="0.5" TranslationX="-20" TranslationY="-25"/>
        <Label Text="Voeding" FontSize="20" TranslationX="-20"/>
        <Label Text="Test" FontSize="20" TranslationY="-40"/>
    </StackLayout>
</Frame>

<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="415" TranslationX="10" HeightRequest="70" WidthRequest="120" >
    <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
        <Image Source="mark_green.png" Scale="0.5" TranslationX="-20" TranslationY="-25"/>
        <Label Text="Sport" FontSize="20" TranslationX="-35"/>
    </StackLayout>

</Frame>

<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="285" TranslationX="190" HeightRequest="70" WidthRequest="120">
    <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
        <Image Source="mark_blue.png" Scale="0.5" TranslationX="-20" TranslationY="-25"/>
        <Label Text="Slaap" FontSize="20" TranslationX="-35"/>
    </StackLayout>
</Frame>

<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="415" TranslationX="190" HeightRequest="70" WidthRequest="120">
    <StackLayout Orientation="Horizontal" Padding="0" Spacing="-45" HorizontalOptions="FillAndExpand">
        <Image Source="mark_orange.png" Scale="0.5" TranslationX="-20" TranslationY="-25"/>
        <Label Text="Huidige tijd" FontSize="20" TranslationX="15"/>
    </StackLayout>

</Frame>
</AbsoluteLayout>

输出

输出

我希望文本“测试”显示在文本“Voeding”下方的框架中。我将背景设为绿色以查看框的高度和宽度。我该怎么做？

标签： xamluser-interfacexamarin

解决方案

您需要将每个帧包装在另一个堆栈布局中以获得另一行。还摆脱了一些翻译。我非常谨慎地使用这些。它们不会很好地转换为不同的屏幕尺寸。

   <Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="285" TranslationX="10" HeightRequest="70" WidthRequest="120">
        <StackLayout VerticalOptions="FillAndExpand">   
            <StackLayout Orientation="Horizontal" Padding="0"  HorizontalOptions="FillAndExpand" BackgroundColor="Green">
                <Image Source="mark_red.png" Scale="0.5" TranslationX="-20" TranslationY="-25"/>
                <Label Text="Voeding" FontSize="20"/>                
            </StackLayout>
            <Label Text="Test" FontSize="20" />
        </StackLayout>
    </Frame>

如果我对此进行编码，我将从具有两行和两列的网格开始，然后将堆栈布局放在正确的网格单元内。

<Grid Margin="20" ColumnSpacing="10" RowSpacing="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="120"/>
        <RowDefinition Height="120"/>
    </Grid.RowDefinitions>

    <StackLayout Grid.Column="0" Grid.Row="0" Padding="10" BackgroundColor="White">
            <StackLayout Orientation="Horizontal">                 
                <BoxView HeightRequest="20" WidthRequest="10" BackgroundColor="Red"/>
                <Label Text="Voeding" FontSize="20"/>                
            </StackLayout>
            <Label Text="Test" FontSize="20" />
    </StackLayout>

    <StackLayout Grid.Column="1" Grid.Row="0" Padding="10" BackgroundColor="White">
        <StackLayout Orientation="Horizontal">
            <BoxView HeightRequest="20" WidthRequest="10" BackgroundColor="Green"/>
            <Label Text="Sport" FontSize="20" />
        </StackLayout>
    </StackLayout>

    <StackLayout Grid.Column="0" Grid.Row="1" Padding="10" BackgroundColor="White">
        <StackLayout  Orientation="Horizontal">
            <BoxView HeightRequest="20" WidthRequest="10" BackgroundColor="Blue"/>
            <Label Text="Slaap" FontSize="20" />
        </StackLayout>
    </StackLayout>

    <StackLayout Grid.Column="1" Grid.Row="1" Padding="10" BackgroundColor="White">
        <StackLayout Orientation="Horizontal">
            <BoxView HeightRequest="20" WidthRequest="10" BackgroundColor="Orange"/>
            <Label Text="Huidige tijd" FontSize="20" />
        </StackLayout>
    </StackLayout>
</Grid>

因为我没有它们，所以我用盒子替换了你的图像。

图片

推荐阅读