Question

我创建了自己的按钮，侧面有Icon，另一面有文字，但问题是图像没有显示。我错过了什么吗？任何帮助，将不胜感激。 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;
}

图像不显示XAML

2 个答案: