Background Image in not visible in Mobile view in UWP (Windows Universal app for Windows-10)?

Question

I am working on UWP (Universal Windows Platform app). I have issue regarding Mobile view. I set an image background in my login page of the application .Which is properly visible in all view(Tabulate and desktop) but when i open application in Emulator(Mobile view) the background image is not visible and background is black.

code:

<Grid x:Name="login_page">
        <Grid.Background>
            <ImageBrush Stretch="UniformToFill" ImageSource="Images/LoginImages/login_bg01.png"/>
        </Grid.Background>

VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>


                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="420" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>




                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="320" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>

 <Setter Target="txtname.Height" Value="40"></Setter>
                        <Setter Target="pwdbox.Height" Value="40"></Setter>
                        <Setter Target="txturl.Height" Value="40"></Setter>

 </VisualState.Setters>
                </VisualState>
                <VisualState>

<VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
  <Setter Target="pwdbox.Height" Value="60"></Setter>
                        <Setter Target="txturl.Height" Value="60"></Setter>
                    </VisualState.Setters>
                </VisualState>
  </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
 <Grid Name="maingrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

//Here define three textblock
<StackPanel  Grid.Row="4" Orientation="Horizontal"  Margin="0,0,0,0">
 <TextBlock  x:Name="uname">
  <TextBlock x:Name="email">
<TextBlock  x:Name="password">
   </StackPanel>
/Grid>


    </Grid>

Image

Answer 1

Quickly create a new universal app for testing. Add just the grid background to see if it works, if not simply use an image. Otherwise add xaml of your app step by step to the new test app until it stops working. Btw you might also want to take a look at RelativePanel .

Answer 2

Why dont you add an image control in the grid itself ?

<Grid x:Name="login_page">

<Image x:Name="Image1" Source="Images/LoginImages/login_bg01.png"/>
        ..........

/>

Answer 3

I have experienced issues previously with setting the path to an Image or ImageSource in the relative format, ex. Path/To/Image.png . To solve this, append the ms-appx:/// protocol to the path, so instead of having

<ImageBrush Stretch="UniformToFill" ImageSource="Images/LoginImages/login_bg01.png"/>

you have

<ImageBrush Stretch="UniformToFill" ImageSource="ms-appx:///Images/LoginImages/login_bg01.png"/>