WPF - 用戶控件與圖片無法正確顯示

Question

好吧，這裏是我的問題：

我創建了一個名爲多重圖象用戶控件，它是由兩個圖像，其中一個比另一個更大的組成。

我試圖在主窗口做的是，當你按下一個給定的單選按鈕，這兩個圖像中的一個改變其源（2個單選按鈕改變大的圖像和3變化小一） 。在MultiImage類的設計視圖中，我可以看到元素，但是在MainWindow的設計視圖中，該對象不會出現，並且一旦啓動該應用程序，即使您單擊RadioButton，也不會顯示該對象。

的代碼如下：

MainWindow.xaml

<Window x:Class="MultiElementImage.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:MultiElementImage" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid>   
     <local:MultiImage x:Name="image1" Width="Auto" Height="Auto" Margin="10,10,208,10" /> 
     <RadioButton Content="Laptop" GroupName="mainIcon" HorizontalAlignment="Left" Margin="335,97,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_1"/> 
     <RadioButton Content="Trash can" GroupName="mainIcon" HorizontalAlignment="Left" Margin="335,117,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_2"/> 
     <RadioButton Content="Warning" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,158,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_3"/> 
     <RadioButton Content="Battery" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,178,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_4"/> 
     <RadioButton Content="Error" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,198,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_5"/> 
    </Grid> 
</Window> 

MainWindow.xaml.cs

public partial class MainWindow : Window 
    { 
     public MainWindow() 
     {   
      InitializeComponent(); 
     } 

     private void RadioButton_Checked_1(object sender, RoutedEventArgs e) 
     { 
      image1.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative)); 
     } 

     private void RadioButton_Checked_2(object sender, RoutedEventArgs e) 
     { 
      image1.mainIcon.Source = new BitmapImage(new Uri("Images/trashcan.png", UriKind.Relative)); 
     } 

     private void RadioButton_Checked_3(object sender, RoutedEventArgs e) 
     { 
      image1.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative)); 
     } 

     private void RadioButton_Checked_4(object sender, RoutedEventArgs e) 
     { 
      image1.statusIcon.Source = new BitmapImage(new Uri("Images/battery.png", UriKind.Relative)); 
     } 

     private void RadioButton_Checked_5(object sender, RoutedEventArgs e) 
     { 
      image1.statusIcon.Source = new BitmapImage(new Uri("Images/null.png", UriKind.Relative)); 
     } 
    } 

MultiImage.xaml

個

<UserControl x:Class="MultiElementImage.MultiImage" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid>   
     <Image Name="mainIcon" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="300" Source="Images/laptop.png"/> 
     <Image Name="statusIcon" HorizontalAlignment="Left" Height="Auto" Margin="190,10,0,0" VerticalAlignment="Top" Width="Auto" Source="Images/null.png"/> 
    </Grid> 
</UserControl> 

MultiImage.xaml.cs

public partial class MultiImage : UserControl 
    { 
     public MultiImage() 
     { 
      this.mainIcon = new Image(); 
      this.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative)); 
      this.statusIcon = new Image(); 
      this.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative)); 
     } 
    } 

我試圖把2個圖像對象，並與單選按鈕改變它們，以檢查是否爲圖像的路線是正確的，它的工作，但我想使用UserControl，以便我可以輕鬆地將狀態圖標放在任何需要的地方。有關可能發生什麼的任何想法？

在此先感謝！

Answer 1

的問題是在你的用戶控件的構造函數的代碼。它用新的Image控件替換XAML定義的元素mainIcon和statusIcon，但不將它們添加到網格中。因此它們不可見，因此設置其屬性Source沒有視覺效果。

只是刪除所有的代碼，並呼籲InitializeComponent：

public MultiImage() 
{ 
    InitializeComponent(); 
} 

Answer 2

不太確定這一點。 但也許你需要一個用戶控件的公共屬性。

public partial class MultiImage : UserControl 
    { 
     public BitmapImage MainIcon {    
      set { this.mainIcon.Source = value;} 
     } 
     public BitmapImage StatusIcon{    
      set { this.statusIcon.Source = value;} 
     } 

    public MultiImage() 
    { 
     this.mainIcon = new Image(); 
     this.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative)); 
     this.statusIcon = new Image(); 
     this.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative)); 
    } 
} 

，並嘗試訪問該屬性

公共部分類主窗口：窗口 { 公共主窗口（） {
的InitializeComponent（）; }

private void RadioButton_Checked_1(object sender, RoutedEventArgs e) 
    { 
     image1.MainIcon = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative)); 
    } 

    private void RadioButton_Checked_2(object sender, RoutedEventArgs e) 
    { 
     image1.MainIcon = new BitmapImage(new Uri("Images/trashcan.png", UriKind.Relative)); 
    } 

    private void RadioButton_Checked_3(object sender, RoutedEventArgs e) 
    { 
     image1.StatusIcon = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative)); 
    } 

    private void RadioButton_Checked_4(object sender, RoutedEventArgs e) 
    { 
     image1.StatusIcon = new BitmapImage(new Uri("Images/battery.png", UriKind.Relative)); 
    } 

    private void RadioButton_Checked_5(object sender, RoutedEventArgs e) 
    { 
     image1.StatusIcon = new BitmapImage(new Uri("Images/null.png", UriKind.Relative)); 
    } 
} 

可能有一些編譯錯誤...感謝

Answer 3

你的問題是，你不通過你的構造函數每次分配它的時候通過。我的意思是：

public MultiImage() 
{ 
    this.mainIcon = new Image(); 
    this.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative)); 
    this.statusIcon = new Image(); 
    this.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative)); 
} 

這個代碼將被稱爲一次。這不是你需要的。您需要能夠爲您的圖像分配一個動態URI。所以，我認爲你必須更換你的構造像這樣的內容：

public MultiImage() 
{ 
    InitializeComponent(); 
} 

創建AutoProperties訪問您的變量和閱讀他們/寫：

public Image MainIcon 
{ 
    get 
    { return mainIcon; }; 
    set 
    { 
     mainIcon.Source = new BitmapImage(new Uri(value)); 
    }; 
} 
public Image StatusIcon 
{ 
    get 
    { return statusIcon; }; 
    set 
    { 
     statusIcon.Source = new BitmapImage(new Uri(value)); 
    }; 
} 

public MultiImage() 
{ 
    InitializeComponent(); 
} 

，然後正常訪問它們在你的代碼：

private void RadioButton_Checked_1(object sender, RoutedEventArgs e) 
{ 
    image1.MainIcon = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative)); 
}