Search code examples
xamluser-interfacebackground-imagewinui-3windows-app-sdk

How to design a picture in WinUI 3 that automatically adapts to the window


I'm doing a little software with Winui 3, and now I'm designing the homepage, and I'm hoping to make a scalable image like the Winui 3 Gallery homepageLike this,this background image can automatically adapts to the window's size,but now I can't find any lessons or documents which can teach me how to make a page like this.

I have already designed a navigationview and made a home page(homepage.xaml),it's a winui 3 page file.I'd like to design a background image(/Assets/background.png) which can automatically adapts to the window.If I have anything that is not clearly described, please point it out and I will add it as soon as possible, thank you


Solution

  • You could try to use VisualExtensions.SetNormalizedCenterPoint Method to set the CenterPoint is centered even when the visual is resized.

    And you could try to refer to the Winui 3 Gallery offical sample which is provided by Andrew:

    https://github.com/microsoft/WinUI-Gallery

    https://github.com/microsoft/WinUI-Gallery/blob/3a9999b2a9798ed688484ecf22d837cbc8af1832/WinUIGallery/Controls/HomePageHeaderImage.xaml#L40