UserControl的圖像未顯示在MainPage上

Question

我創建了一個包含靜態圖像的UserControl，並希望將其顯示在MainPage上。 但是，該圖像僅顯示在我的UserControl上，而不顯示在MainPage上。

這是我的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>

這是我的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>

當我嘗試清除我的項目時，該圖像將正確顯示在我的MainPage Preview中。 但是，當我重建項目時，它會再次在預覽中消失。

我怎樣才能做到這一點？

Answer 1

幾乎可以肯定，在運行時找不到您的映像。

您需要檢查項目輸出，以確保資產在正確的文件夾中。

您很有可能應該使用資源來訪問圖像：請參閱此其他stackoverflow問題

可以正常運行的示例用戶控件：

<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>

項目：