How to set a Background image in UNO UWP?

Question

I am trying to put a background image, so far I have this code:

<Grid.Background>
    <ImageBrush ImageSource="ms-appx:///Assets/Windows-10-Hero-Ninja-Cat-1024x576-03a71eed2a427425.jpg" Stretch="UniformToFill"/>
</Grid.Background>

Which appears this way on UWP on Windows 10:

But when I Build the WASM or Android, the Background image does not appear.

The file property is set Build action: Content, Copy to output directory: Do not copy.

This should work now in more recent versions of Uno. – Carl de Billy Apr 26 '21 at 22:34 — Carl de Billy, Apr 26 '21 at 22:34

score 6 · Answer 1 · answered Jul 07 '18 at 18:18

6

Uno's WASM target is still experimental and some features are not available yet. The only yet implemented background brush is SolidColorBrush.

It's implemented for iOS (source code here), but not Android.

Since you're already in a <Grid>, you can simply put your image as first element:

  <Grid>
    <Image Source="ms-appx:///Assets/Windows-10-Hero-Ninja-Cat-1024x576-03a71eed2a427425.jpg" Stretch="UniformToFill" />
    [... put your other controls here]
  </Grid>

answered Jul 07 '18 at 18:18

Carl de Billy

941
6
13

I bet you can help me out [here](https://stackoverflow.com/questions/52919882/how-to-use-mediaelement-to-play-sound-in-android) – Shimmy Weitzhandler Oct 21 '18 at 21:09

score 1 · Answer 2 · answered Jul 25 '20 at 21:08

In case you need to use different background approaches for each platform use xaml conditional prefixes.

https://platform.uno/docs/articles/platform-specific-xaml.html#xaml-conditional-prefixes

You can use <wasm:Image ... />

At the end of the day you can have the same result with flexible markup.

How to set a Background image in UNO UWP?

2 Answers2