Question

对于这个问题，我找到了很多答案，但是无论我尝试什么，似乎都行不通。

我正在尝试在UWP应用程序中创建UserControl。用户控件由边框组成，边框内有图像和TextBlock。我设法使TextBlock文本显示出来，但是无论如何，我似乎都无法在UserControl中显示图像。

到目前为止已尝试过的事情：

将GraphicProperty类型的图像更改为Image，ImageSource和Uri。
将边框中的图像放入ContentPresenter中。
目前我不记得的其他事情。

我不知道如何使它工作。我知道我以前曾经做过，但是那是几年前的事，而且我显然已经迷住了（或者说UWP发生了重大变化，因为我的大部分经验都来自WPF）。

有人可以帮忙弄清楚我在哪里吗？

UserControl XAML：

<UserControl
    x:Class="ShirtSleeves.CardControlxaml"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ShirtSleeves"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="CardControl"
    mc:Ignorable="d"
    d:DesignHeight="400"
    d:DesignWidth="300">
    <Grid>
        <Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Source="{Binding ElementName=CardControl, Path=Graphic}" Height="200" Width="200" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
                <TextBlock Text="{Binding ElementName=CardControl, Path=Label}" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
            </Grid>
        </Border>

    </Grid>
</UserControl>

UserControl C＃：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace ShirtSleeves
{
    public sealed partial class CardControlxaml : UserControl
    {
        //private TextBlock label;

        public static DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string),
            typeof(CardControlxaml), new PropertyMetadata("Label"));

        public static DependencyProperty GraphicProperty = DependencyProperty.Register("Graphic", typeof(string),
            typeof(CardControlxaml), new PropertyMetadata(null));
        public string Label
        {
            get { return (string)GetValue(LabelProperty); }
            set { SetValue(LabelProperty, value); }
        }

        public string Graphic
        {
            get { return (string)GetValue(GraphicProperty); }
            set { SetValue(GraphicProperty, value); }
        }

        public CardControlxaml()
        {
            this.InitializeComponent();
        }
    }
}

MainPage XAML：

<Page
    x:Class="ShirtSleeves.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ShirtSleeves"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    d:DesignHeight="1200"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="DarkGreen">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Column="0">
            <StackPanel>
                <Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
                    <TextBlock Text="Games" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />

                </Border>
                <Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
                    <TextBlock Text="Sleeves" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
                </Border>
                <local:CardControlxaml Label="Search" Graphic="C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png" Foreground="Black" />
                <Image Height="250"  Source="C:\\Users\\<username>\\source\\repos\\ShirtSleeves\\ShirtSleeves\\Images\\Rook (Games).png" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </StackPanel>
        </ScrollViewer>
        <Viewbox Grid.Column="1">
            <Image Source="C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png" VerticalAlignment="Top" HorizontalAlignment="Center" />
        </Viewbox>

    </Grid>
</Page>

Answer 1

UWP不允许直接应用容器外部访问文件。这意味着您无法设置像C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png这样的图像源。

在你的情况下，最简单的方法就是将图像传送到项目的Assets文件夹类似如下：

然后，您可以像这样指定'Graphic'属性：

<local:CardControlxaml Label="Search" Graphic="Assets/animals.jpg" Foreground="Black" />

更多的信息，请读File access permissions

图像未显示在UserControl中

1 个答案: