Xamarin xaml пытается получить текстовые метки друг под другом в рамке

Question

Я пытаюсь поместить текстовые метки друг под другом в рамке, но текст ведет себя очень странно, и все, что я пробовал, работает.

Я использую этот код:

<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>

Вывод

Я хочу, чтобы текст "Test" отображался в рамке под текстом "Voeding".Я сделал фон зеленым, чтобы увидеть высоту и ширину коробки.Как мне это сделать?

Answer 1

Вам нужно обернуть каждый кадр в другой макет стека, чтобы получить еще один ряд.Также избавьтесь от некоторых переводов.Я использую их очень экономно.Они не будут очень хорошо переводиться на экран разных размеров.

   <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>

Я заменил ваши изображения на коробки, поскольку у меня их не было.