图片未显示XAML

Question

I created my own button that has Icon on the side and text on the other but the problem is the image is not displaying. did i miss something here? any help would be appreciated. TIA

This is the XAML of the control.

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

This is code behind the control.

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

First of all, do not use a hard coded file path to the image.
Windows Store apps run in a sandbox, so you will not be able to get to any arbitrary file location when you deploy your app.

Second, you can't use backslashes in Image URI. The backslashes are the technical reason you are setting the error you are getting. But just changing to forward slashes in not the answer.

Access Image in XAML

If you add an image to your projects /Assets folder, you can use XAML like this to show it in QButton.

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

In Code

To change the Icon in code.

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

If you want the user to choose the Image from their computer at runtime, look at the File Pickers.

MSDN file pickers

Answer 2

Are you forgetting to set the Icon property?

This worked for me

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

This worked as well

public QButton()
{
    this.InitializeComponent();

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