UserControl's image not show on MainPage

Question

I create a UserControl that contains a static image and I want to display it on my MainPage. However, the image only displays on my UserControl without displaying on MainPage.

This is my UserControl XAML:

<UserControl
    x:Class="Example.Views.UserControls.Gift.GiftView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Example.Views.UserControls.Gift"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="RootLayout">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="90"/>
        </Grid.RowDefinitions>

        <Border Grid.Row="1"  Background="#dedede">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" HorizontalAlignment="Stretch">
                        <Button.Template>
                            <ControlTemplate >
                                <Grid Background="{Binding FleetTabColor}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"></RowDefinition>
                                        <RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Image Height="40" Width="40" Source="../Assets/Icon/unselect_gift.png" VerticalAlignment="Center" />
                                    <TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gift"/>
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Stretch" >
                        <Button.Template>
                            <ControlTemplate >
                                <Grid Background="{Binding FleetTabColor}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"></RowDefinition>
                                        <RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Image Height="40" Width="40" Source="../Assets/birthday.png" VerticalAlignment="Center" />
                                    <TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="BirthDay"/>
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <Button Grid.Column="2" HorizontalAlignment="Stretch">
                        <Button.Template>
                            <ControlTemplate >
                                <Grid Background="{Binding FleetTabColor}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"></RowDefinition>
                                        <RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Image Height="40" Width="40" Source="../Assets/package.png" VerticalAlignment="Center" />
                                    <TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Package"/>
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>
            </StackPanel>
        </Border>

    </Grid>
</UserControl>

And this is my MainPage XAML:

<Page
    x:Class="Example.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Example"
    xmlns:menu="using:Example.Views.UserControls.Menu"
    xmlns:popup="using:Example.Views.UserControls.Popup"
    xmlns:giftview="using:Example.Views.UserControls.Gift"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="Root">        
        <Grid Background="#FFCFD4E2">
            <Grid Visibility="Visible">
                <giftview:GiftView x:Name="GiftViewTest" DataContext="{Binding GiftViewModel}"/>
            </Grid>
        </Grid>

    </Grid>


</Page>

When I try to clear my project, the image will shows correctly on my MainPage Preview. But when I rebuild my project, it will disappears on my preview again.

How can I do this?

The `Source` property on the image looks suspicious. Do you get any errors at runtime? — Byron Ross, Feb 15 '17 at 03:37
@ByronRoss I just receive a message " Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled." on Debug console. — user259429, Feb 15 '17 at 08:00
Try an absolute path, and make sure you are building in Debug, not Release mode — Byron Ross, Feb 15 '17 at 23:47
I get this issue in Debug mode and the same problem when using absolute path — user259429, Feb 16 '17 at 07:47

score 0 · Answer 1 · edited May 23 '17 at 12:00

Almost certainly your image cannot be found at runtime.

You'll need to check your project outputs to make sure the assets are in the correct folder.

More than likely you should use resources to access the images: see this other stackoverflow question

Example User Control that works as expected:

<UserControl x:Class="WpfApp1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d">
    <StackPanel Orientation="Vertical">
        <Button>
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Image Height="20" Width="40" Source="http://lorempixel.com/400/200/" />
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <Button>
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Image Height="20" Width="40" Source="sample-image.jpg" />
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </StackPanel>
</UserControl>

Project:

UserControl's image not show on MainPage

1 Answers1