In each of the GridViewItem the image is not displayed. In the Design view of XAML, in Visual Studio the images are shown but when i run the code no image is displayed. Following is the code snippet of the GridViewItem:
<GridViewItem x:Name="Performance" Margin="0,0,0,0" Width="207" Height="275" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left" Height="268" Width="207" VerticalAlignment="Top">
<Image Margin="0" Source="Images\performanceLaptop.JPG" Stretch="UniformToFill" Width="207" Height="268" />
<Grid HorizontalAlignment="Left" Height="51" Margin="0" VerticalAlignment="Bottom" Width="207" Background="#E5231F20">
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" Text="Performance" VerticalAlignment="Center" FontSize="26.667"/>
</Grid>
</Grid>
</GridViewItem>
Whole code:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="ms-appx:/Images/SampleAppBg.jpg"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Sample Text Header " Margin="80,36,870,44" FontSize="50" VerticalAlignment="Center" FontStyle="Italic"/>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" Margin="80,0,0,10" TextWrapping="Wrap" Text="Sample Category :" VerticalAlignment="Bottom" FontFamily="Segoe UI" FontSize="30" FontStyle="Italic"/>
</Grid>
<Grid Grid.Row="1" Background="Transparent" HorizontalAlignment="Left" Height="526" Margin="120,0,0,0" VerticalAlignment="Top" Width="1170">
<StackPanel HorizontalAlignment="Left" Height="500" Margin="0" VerticalAlignment="Center" Width="1125" Orientation="Horizontal">
<GridViewItem x:Name="Performance" Margin="0,0,0,0" Width="207" Height="275" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left" Height="268" Width="207" VerticalAlignment="Top">
<Image Margin="0" Source="Images\1.JPG" Stretch="UniformToFill" Width="207" Height="268" />
<Grid HorizontalAlignment="Left" Height="51" Margin="0" VerticalAlignment="Bottom" Width="207" Background="#E5231F20">
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" Text="Performance" VerticalAlignment="Center" FontSize="26.667"/>
</Grid>
</Grid>
</GridViewItem>
<GridViewItem x:Name="INSTRUCTIONS" Margin="15,0,0,0" Width="207" Height="275" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left" Height="268" Width="207" VerticalAlignment="Top">
<Image Margin="0" Source="2.JPG" Stretch="Fill" Width="207" Height="268"/>
<Grid HorizontalAlignment="Left" Height="51" Margin="0" VerticalAlignment="Bottom" Width="207" Background="#E5231F20">
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" Text="Entertainment" VerticalAlignment="Center" FontSize="26.667"/>
</Grid>
</Grid>
</GridViewItem>
<GridViewItem x:Name="PLAY" Margin="15,0,0,0" Width="207" Height="275" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left" Height="268" Width="207" VerticalAlignment="Top">
<Image Margin="0" Source="3.JPG" Stretch="Fill" Width="207" Height="268"/>
<Grid HorizontalAlignment="Left" Height="51" Margin="0" VerticalAlignment="Bottom" Width="207" Background="#E5231F20">
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" Text="Student" VerticalAlignment="Center" FontSize="26.667"/>
</Grid>
</Grid>
</GridViewItem>
<GridViewItem x:Name="SETTINGS" Margin="15,0,0,0" Width="207" Height="275" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left" Height="268" Width="207" VerticalAlignment="Top">
<Image Margin="0" Source="4.JPG" Stretch="Fill" Width="207" Height="268"/>
<Grid HorizontalAlignment="Left" Height="51" Margin="0" VerticalAlignment="Bottom" Width="207" Background="#E5231F20">
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" Text="Professional" VerticalAlignment="Center" FontSize="26.667"/>
</Grid>
</Grid>
</GridViewItem>
<GridViewItem x:Name="SCORES" Margin="15,0,0,0" Width="207" Height="275" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left" Height="268" Width="207" VerticalAlignment="Top">
<Image Margin="0" Source="5.JPG" Stretch="Fill" Width="207" Height="268"/>
<Grid HorizontalAlignment="Left" Height="51" Margin="0" VerticalAlignment="Bottom" Width="207" Background="#E5231F20">
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" Text="Custom" VerticalAlignment="Center" FontSize="26.667"/>
</Grid>
</Grid>
</GridViewItem>
</StackPanel>
</Grid>
</Grid>
Change slash from \ in your Source= property to /. Rebuild your solution.
<Image Margin="0" Source="Images/performanceLaptop.jpg" ../>
In your project, go to folder Images and click on SampleAppBg.jpg with right mouse button and choose "Properties". In the Properties toolwindow, set the file type to "Resource".
Do the same for your file performanceLaptop.jpg. Although "Resource" is default value for added files.
Resource is somewhat packed into your executable or library and available in XAML.