Xamarin Forms - 如何创建图像叠加？

Question

我创建了带有主详细信息导航的 Xamarin Forms 应用程序（适用于 Android）。 对于我在 header(ListView.Header) 中的菜单，我想创建它：

1 - 背景图片

2 - 标记我的应用

3 - 社交网络的头像用户。头像比logo小，在logo里面。

和用户名（在徽标下）。

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

 <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 的经验，我开始明白，几乎总是使用 Grid 比使用 RelativeLayout 更好。

所以，我建议您改用 Grid。我不怎么使用 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。这只是一种表示形式，但实现实际的 Grid 应该非常简单。

---

编辑

我将尝试在此处发布完整的 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>