图像不显示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

您是否忘记设置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; 
} 

Answer 2

首先，不使用硬编码文件路径的形象。
Windows应用商店应用在沙箱中运行，因此在部署应用时，您将无法获取任何任意文件位置。

其次，您不能在Image 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