CODEWITHSUNDEEP
xamlbackgroundoverlaymaui
Nick
Nick

Reputation: 99

.NET MAUI Full scale background image (overlay elements)

Since .NET MAUI is the successor of Xamarin, i am trying to port a Xamarin layout to the new Maui version. The RelativeLayout is removed from Maui. I used the RelativeLayout to position a GUI on top of an image. This image is a full screen background image, stretched in the length, keeping its ratio.

I could create the same layout, but with an full screen image in the background that is 100% height and keeps its ratio. How would I do this in .NET Maui? Its not realy about how to make an image stretch but put layout elements (Like entry, label, etc) on top of an image.

Upvotes: 7

Views: 16396

Answers (3)

w4st3l4nd3r
w4st3l4nd3r

Reputation: 11

This is how I did it for mine, using a method that requires setting the background image for each ContentPage:

namespace myApp {
    public partial class myPage : ContentPage {
        public myPage() {

            ...

            // Set page background image:
            this.BackgroundImageSource = "myPage_background.png";

            ...

        }
    }
}

This puts the image behind the buttons, labels, entries, etc.. Make sure that the image is located in the Resources/Images folder.

Upvotes: 1

Richard
Richard

Reputation: 339

For anyone reading this, the above answer works fines, however there is currently an issue (maybe a feature?) in MAUI where a safe area padding is added automatically to the the root view of a page.

Disabeling the safe area via code does not fix the issue, it will only remove the margin, not the padding.

In my case, I ended up writing a markup extention for ios

In the shared code I created

    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();
    }

The in the iOS platform folder I created an extention method to get the key window

public static UIKit.UIWindow GetKeyWindow(this UIApplication uiApplication)
{
    if (OperatingSystem.IsIOSVersionAtLeast(13))
    {
        using var scenes = uiApplication.ConnectedScenes;
        var windowScene = scenes.ToArray<UIKit.UIWindowScene>().FirstOrDefault();
        return windowScene?.Windows.FirstOrDefault();
    }
// use the windows property (up to 13.0)
    return uiApplication.KeyWindow;
}

In iOS platform folder I then created the implementation to adjust the Thickness

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);
    }
}

And then finally on the root view I applied it like so

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

There's probably a much neater way to do it, but it works.

Upvotes: 4

ToolmakerSteve
ToolmakerSteve

Reputation: 21321

Example using Grid:

<!-- 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>

Upvotes: 11

Related Questions