圖像不顯示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