Image not displayed in XAML code

Question

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>

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

Change slash from \ in your Source= property to /. Rebuild your solution.

<Image Margin="0" Source="Images/performanceLaptop.jpg"  ../>

More information

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.

edited May 23 '17 at 11:59

Community

1
1

answered Nov 11 '15 at 21:01

Croll

3,631
6
30
63

hahahah really? :P Man that did solve it :D but how can the slashes make a difference? – Nelson John Nov 11 '15 at 21:20
2

Backslash (`\\`) is not valid directory separator for URI. Backslash only used on several Windows File systems. WPF uses URI to locate files, which is equal to URL used in web but not the paths on windows :) – Croll Nov 11 '15 at 21:24

Image not displayed in XAML code

1 Answers1