图像不显示 XAML

Question

我创建了自己的按钮，一侧有图标，另一侧有文字，但问题是图像没有显示。我在这里错过了什么吗？任何帮助，将不胜感激。 TIA

这是控件的 XAML。

<UserControl x:Name="QButtonControl"
    x:Class="CommonLayout.QButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CommonLayout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="36"
    d:DesignWidth="145" MinWidth="145" MinHeight="36" Loaded="QButtonControl_Loaded">

    <Grid PointerEntered="Grid_PointerEntered_1" PointerExited="Grid_PointerExited_1" MinWidth="145" MinHeight="36" Background="#FFDCD1D1">
        <TextBlock x:Name="btnLabel" Height="20" Margin="36,8,4,8" TextWrapping="Wrap" Text="Text Here" VerticalAlignment="Center" FontSize="18.667" Width="105"/>
        <Image x:Name="img" HorizontalAlignment="Left" Height="27" Margin="1,4,0,0" VerticalAlignment="Top" Width="29"/>

    </Grid>
</UserControl>

这是控件背后的代码。

public sealed partial class QButton : UserControl
    {
        private ImageSource iconDefault;
        private Brush hoverBrush = new SolidColorBrush(Color.FromArgb(255, 228, 228, 228));

        public string Text
        {
            get
            {
                return btnLabel.Text;
            }
            set
            {
                btnLabel.Text = value;
            }
        }

        public ImageSource Icon
        {
            get
            {
                return iconDefault;
            }
            set
            {
                iconDefault = value;
                img.Source = value;
            }
        }

        public Brush HoverBrush
        {
            get
            {
                return hoverBrush;
            }
            set
            {
                hoverBrush = value;
            }
        }

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

        private void Grid_PointerEntered_1(object sender, PointerRoutedEventArgs e)
        {
            btnLabel.Foreground = HoverBrush;
        }

        private void Grid_PointerExited_1(object sender, PointerRoutedEventArgs e)
        {
            btnLabel.Foreground = Foreground;
        }

        private void QButtonControl_Loaded(object sender, RoutedEventArgs e)
        {
            img.Source = iconDefault;       
        }


    }

Answer 1

首先，不要使用硬编码的图像文件路径。
Windows 应用商店应用在沙盒中运行，因此您在部署应用时将无法访问任意文件位置。

其次，不能在图像 URI 中使用反斜杠。反斜杠是您设置错误的技术原因。但只是更改为正斜杠不是答案。

在 XAML 中访问图像

如果您将图像添加到您的项目/Assets 文件夹中，您可以像这样使用 XAML 在 QButton 中显示它。

<local:QButton x:Name='qButton1'
               Icon='/assets/jellyfish.jpg'  />

在代码中

更改代码中的图标。

public MainPage()
{
  this.InitializeComponent();
  this.Loaded += MainPage_Loaded;

}

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
  var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/shrimp.jpg"));
  var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

  var image = new BitmapImage();

  image.SetSource(fileStream);

  qButton1.Icon = image;
    }

如果您希望用户在运行时从他们的计算机中选择图像，请查看文件选择器。

MSDN file pickers

Answer 2

您是否忘记设置Icon 属性？

这对我有用

<local:QButton Icon="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" />

这也很有效

public QButton()
{
    this.InitializeComponent();

    Uri imageUri = new Uri(@"C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg");
    BitmapImage image = new BitmapImage(imageUri);
    this.Icon = image;
}