.NET MAUI 全比例背景图像（叠加元素）答案

【问题标题】：.NET MAUI Full scale background image (overlay elements).NET MAUI 全比例背景图像（叠加元素）
【发布时间】：2022-12-17 14:54:26
【问题描述】：

由于 .NET MAUI 是 Xamarin 的继任者，我正在尝试将 Xamarin 布局移植到新的 Maui 版本。 RelativeLayout 已从 Maui 中删除。我使用 RelativeLayout 将 GUI 放置在图像之上。此图像是全屏背景图像，在长度上拉伸，保持其比例。

我可以创建相同的布局，但在背景中使用 100% 高度并保持其比例的全屏图像。我将如何在 .NET Maui 中执行此操作？它与如何拉伸图像无关，而是将布局元素（如条目、标签等）放在图像顶部。

【问题讨论】：

包括您的 Xamarin 代码和屏幕截图肯定会帮助其他人理解您的问题
使用Absolute Layout。这与在 X Forms 中一样。数学与RelativeLayout有点不同，但应该不难适应。替代方案是Grid；同一行和同一列中的项目彼此重叠。 ColumnSpan/RowSpan 可用于让一项覆盖多个单元格。

标签： xaml background overlay maui

【解决方案1】：

使用网格的示例：

<!-- single cell grid filling its parent. -->
<Grid>
  <!-- both children default to cell (0,0). Overlaid. -->
  <Image Aspect="AspectFit" ... />
  <!-- nested grid. OR StackLayout, etc. -->
  <Grid ... >
    <!-- GUI content here. -->
  </Grid>
</Grid>

【讨论】：

谢谢，我可以用这个。我不知道细胞可以被覆盖！
@ToolmakerSteve 我已经这样做了，但是在 MAUI 中似乎有自动安全插入，用于 iOS 上的导航和工具栏。知道如何删除顶部和底部的“填充”吗？我已经将自定义组件上的填充归零。谢谢。
@jmichas - 创建一个问题来显示您的代码和图像，您注释以准确显示您要删除的填充。我的第一个猜测是它与 Maui 的 AppShell 实现有关（我不使用它；我更喜欢完全控制布局和导航，所以我使用 MainPage = new NavigationPage()，并为自定义工具栏和导航编写我自己的代码。）

【解决方案2】：

对于阅读本文的任何人，上述答案都可以正常工作，但是 MAUI 目前存在一个问题（也许是一个功能？），安全区域填充自动添加到页面的根视图。

通过代码禁用安全区域并不能解决问题，它只会移除边距，而不是填充。

就我而言，我最终为 ios 编写了一个标记扩展

在我创建的共享代码中

    public partial class RemoveTopBottomSafeArea : IMarkupExtension<Thickness>
    {
        public Thickness Thickness { get; set; } = new Thickness();

        public Thickness ProvideValue(IServiceProvider serviceProvider)
        {
            AdjustThickness();

            return Thickness;
        }

        object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider)
        {
            return (this as IMarkupExtension<Thickness>).ProvideValue(serviceProvider);
        }

        partial void AdjustThickness();
    }

在我创建的 iOS 平台文件夹中

public partial class RemoveTopBottomSafeArea 
{
    partial void AdjustThickness() 
    {
        var window = UIKit.UIApplication.SharedApplication.GetKeyWindow();
        var safeAreaInsets = window.SafeAreaInsets;

        Thickness = new Thickness(Thickness.Left, Thickness.Top - safeAreaInsets.Top, Thickness.Right, Thickness.Bottom - safeAreaInsets.Bottom);
    }
}

然后最后在根视图上我像这样应用它

<Grid Padding="{ext:RemoveTopBottomSafeArea}">
        <Image
            Grid.RowSpan="2"
            Aspect="AspectFill"
            HorizontalOptions="FillAndExpand"
            Source="yourimage.jpg"
            VerticalOptions="FillAndExpand" />

可能有更简洁的方法来做到这一点，但它确实有效。

【讨论】：