Xamarin Forms - 半页的背景图像答案

【问题标题】：Xamarin Forms - Background image for half pageXamarin Forms - 半页的背景图像
【发布时间】：2017-12-14 19:44:07
【问题描述】：

我对 Xamarin Forms 很陌生，我正在尝试拆分 XAML 页面，以便在顶部“行”中有一个背景图像，在底部“行”中有一个白色背景。

灰色背景代表我当前拥有的背景图像，它位于 ContentPage 标记中。在这种情况下，白色背景没有达到屏幕的整个宽度（因为它在 ContentPage 的 Grid.Row 内），也没有达到屏幕底部。如果我只是在网格的第一行添加背景图像，则页面标题（Iniciar Sesion）将没有背景图像。

我只需要将整个 ContentPage 分成 2 行，一行带有背景图片，另一行不带背景图片。我真的需要在 XAML 中完成，而不是在 C# 中。

有什么想法吗？

提前致谢！

【问题讨论】：

创建一个有 2 行的网格，并将您的图像放在第一行的 BG 中。然后将另一个嵌套网格添加到每一行以包含您的其他控件。
@Jason 感谢您的回复！如果我将背景图像添加到网格中，我将拥有那些白色填充。我可以摆脱填充的唯一方法是将背景图像添加到 ContentPage。 ContentPage -> Image = 没有填充，但没有一半/一半背景。 ContentPage -> Grid -> Image = Half/Half 背景但填充。
您应该能够更改网格上的填充以填充整个页面
我想我没有得到你。我不能使用负填充，因此网格会溢出 ContentPage。你有什么例子吗？谢谢！

标签： c# image xamarin background

【解决方案1】：

您可以使用相对布局轻松实现您的请求（单击 here 了解 Xamarin 文档中的相对布局）：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="YourNamesapce.YourPage">
    <RelativeLayout>
        <Image
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=0.5}" 
            Source="icon.png"
            Aspect="AspectFill"/>

   <Grid
        RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Width,Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Height,Factor=1}">
        <!-- Your Grid Layout-->
    </Grid>
</RelativeLayout>

默认情况下，背景页面颜色为白色，因此这将起作用，否则将页面的背景颜色属性设置为您想要的。

【讨论】：