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预览中正确显示。但是当我重建我的项目时，它会再次在我的预览中消失。

我该怎么做？

Answer 1

几乎可以肯定，您的图像在运行时无法找到。

您需要检查项目输出，以确保资产位于正确的文件夹中。

您很可能应该使用资源来访问图片：请参阅this other stackoverflow question

示例用户控件按预期工作：

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

项目：

UserControl的图像未显示在MainPage上

1 个答案: