Question

我为内容页面添加了简单的BackgroundImage，它在所有设备上均可完美运行。但是问题仅在于 IOS IPhone XS MAX 图像没有拉伸，而且backgroundImage也没有Aspect选项。

 <?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="Demo.Welcome"
             BackgroundImage="bg.png">

  <ContentPage.Content>

  </ContentPage.Content>
</ContentPage>

注意-我检查过图像旋转和像素是否完美。

我该怎么办？

Answer 1

您可以使用CustomRenderer设置背景图像（适应您的PageName和名称空间。我已经使用它来填充iOS页面中的图像。

[assembly: ExportRenderer(typeof(Forms.TestPage), typeof(.iOS.Renderers.TestPage))]
namespace Mindflow.Gamification.Mercedes.iOS.Renderers
{
    public class TestPage : PageRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }


            var page = e.NewElement as Mindflow.Gamification.Forms.Pages.Game.GamePage;

            UIGraphics.BeginImageContext(View.Frame.Size);
            UIImage i = UIImage.FromFile(page.BackgroundImage);
            i = i.Scale(View.Frame.Size);

            View.BackgroundColor = UIColor.FromPatternImage(i);
        }
    }
}

Answer 2

您可以使用网格布局来代替自定义渲染器，因为网格布局可以管理z-index，因此可以将图像放置在内容下方。像这样：

<?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="Demo.Welcome">
    <ContentPage.Content>
        <Grid>
        <Image
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            Aspect="AspectFill"
            Source="bg.png" />
            <ScrollView
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
                <!--
                    ...
                    Your content here
                    ...
                -->
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Answer 3

 <?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="Demo.Welcome">
  <ContentPage.Content>
      <AbsoluteLayout>
         <Image Source="bg.png" AbsoluteLayout.LayoutBounds="1.,1.,1,1"  AbsoluteLayout.LayoutFlags="All" Aspect="Fill"/>          
      </AbsoluteLayout>
  </ContentPage.Content>
</ContentPage>

Xamarin Form：-BackgroundImage用于内容页面没有拉伸

3 个答案: