Xamarin表单 - 如何创建图像叠加？

Question

我使用主细节导航创建了Xamarin Forms应用程序（适用于Android）。 对于标题中的菜单（ListView.Header），我想创建它：

1 - 背景图片

2 - logo我的应用

3 - 社交网络的头像用户。头像小于徽标，位于徽标内部。

和用户名（在徽标下）。

这是我现有的代码（没有徽标）：

 <RelativeLayout>

                <Image
                    Aspect="Fill"
                    HeightRequest="150"
                    HorizontalOptions="FillAndExpand"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Constant=0}"
                    Source="bg.png" />

               <custom1:CircleImageViewCustom
                    x:Name="Avatar"
                    Margin="5"
                    HeightRequest="100"
                    HorizontalOptions="Start"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Factor=1,
                                                                          Constant=0}"
                    VerticalOptions="Center"
                    WidthRequest="100" />


                <Label
                    x:Name="UserName"
                    Margin="10,5,5,5"
                    FontSize="Small"
                    RelativeLayout.XConstraint="5"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Factor=0,
                                                                      Property=Y,
                                                                      Constant=110}" />


 </RelativeLayout>

我尝试插入徽标但不起作用。是否可以更好地使用AbsolutyLayout？任何帮助。

Answer 1

根据我对Xamarin.Forms的经验，我逐渐明白，使用网格比使用RelativeLayout更好。

所以，我建议你改用网格。我没有使用XAML，所以我不能在这里发布完整的XAML代码，但这个想法是这样的：

<Grid>
    <Column Width="1 Auto">
        <Row Width="1 Star">
            <YourAppLogo Height=150 />
            <Avatar Width="100 Absolute" HorizontalOptions="Center" VerticalOption="Center" />
        </Row>
        <Row Width="1 Auto">
            <UserName />
        </Row>
    </Column>
    <Column Width="1 Star" />

    <Background Column=0 ColumnSpan=2 Row=0 RowSpan=2 />
</Grid>

记住：这实际上不是XAML。它只是一种表示，但实现实际网格应该非常简单。

修改

我将尝试在此处发布完整的XAML代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="16" /> <!-- Margin -->
        <RowDefinition Height="1*" /> <!-- Logo and Avatar -->
        <RowDefinition Height="Auto" /> <!-- User name -->
        <RowDefinition Height="16" /> <!-- Margin -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="16" /> <!-- Margin -->
        <ColumnDefinition Width="Auto" /> <!-- Logo, Avatar and Username -->
        <ColumnDefinition Width="1*" /> <!-- Empty space -->
        <ColumnDefinition Width="16" /> <!-- Margin -->
    </Grid.ColumnDefinitions>

    <Image Grid.Column="0" Grid.ColumnSpan="4"
           Grid.Row="0"    Grid.RowSpan="4"
           Source="bg.png" /> <!-- Background -->

    <Grid Grid.Column="1" Grid.Row="1"> <!-- Logo and Avatar -->
        <Image HeightRequest="150" Source="[LOGO]" /> <!-- Logo -->

        <custom1:CircleImageViewCustom VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       HeightRequest="100"
                                       Source="[AVATAR]" /> <!-- Avatar -->
    </Grid>

    <Label Grid.Column="1" Grid.Row="2"
           HorizontalAlignment="Center"
           Margin="10, 5, 5, 5"
           FontSize="Small" /> <!-- Username -->
</Grid>

这应该有效。当然，您必须更改一些值才能自定义它。

Answer 2

我用RelativeLayout解决了这个问题：

 <RelativeLayout>

                <Image
                    Aspect="Fill"
                    HeightRequest="160"
                    HorizontalOptions="FillAndExpand"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Constant=0}"
                    Source="background" />

                <Image Source="logo" HeightRequest="140" WidthRequest="116"
                       Margin="5,0,0,0"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0.5, Constant=0}"
                       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.5, Constant=0}"/>

                <custom1:CircleImageViewCustom
                    x:Name="Avatar"
                    Margin="5"
                    Source="avatar"
                    HeightRequest="100"
                    HorizontalOptions="Start"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y,  Factor=0.5, Constant=15}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.5, Constant=8}"
                    VerticalOptions="Center"
                    WidthRequest="100" />

                <Label
                    x:Name="UserName"
                    Margin="10,2,2,2"
                    FontSize="Small"
                    RelativeLayout.XConstraint="5"
                    TextColor="White"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Factor=0,
                                                                      Property=Y,
                                                                      Constant=135}" />


</RelativeLayout>