如何在图像旁边放置标签

时间:2019-04-09 12:27:03

标签: image xaml label stacklayout

我试图将标签放置在堆栈内图像旁边,如下所示: Example 但是,当前图像取决于标签。像这样:enter image description here

这是我的代码:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:i18n="clr-namespace:agroNet.AppResource;assembly=agroNet"
             x:Class="agroNet.View.HomePage">
    <ContentPage.Content>

    <StackLayout  
        Margin="15,10,15,10"
        Padding="5"
        VerticalOptions="StartAndExpand"
        HorizontalOptions="FillAndExpand"
        Orientation="Horizontal"
        BackgroundColor="#f4f4f4">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>

        <StackLayout
            Grid.Column="0"
            HorizontalOptions="StartAndExpand">
            <Image Source="services.png"
               VerticalOptions="Center" 
               HorizontalOptions="StartAndExpand"
               Aspect="AspectFit"/>
            <Label Text="{i18n:Translate Service}"
               VerticalOptions="Center" 
               HorizontalOptions="EndAndExpand"
               VerticalTextAlignment="Center"
               HorizontalTextAlignment="End"/>
        </StackLayout>

        <StackLayout
            Grid.Column="1"
            HorizontalOptions="CenterAndExpand">
            <Image Source="location.png"
                   VerticalOptions="Center" 
                   HorizontalOptions="StartAndExpand"
                   Aspect="AspectFit"/>
            <Label Text="{i18n:Translate Location}"
                   VerticalOptions="FillAndExpand" 
                   HorizontalOptions="FillAndExpand"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"/>
        </StackLayout>

        <StackLayout
            Grid.Column="2"
            HorizontalOptions="EndAndExpand">
            <Image Source="location.png"
                   VerticalOptions="Center" 
                   HorizontalOptions="StartAndExpand"
                   Aspect="AspectFit"/>
            <Label Text="{i18n:Translate Map}"
                   VerticalOptions="FillAndExpand" 
                   HorizontalOptions="FillAndExpand"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"/>
        </StackLayout>
    </StackLayout>
</ContentPage.Content>

此外,我几乎尝试过“水平/垂直选项”的所有可能组合,并且方向bur结果总是相同的。

0 个答案:

没有答案