c# - WPF - 图像未正确显示的用户控件

Question

好的，这是我的问题:

我创建了一个名为 MultiImage 的 UserControl，它由两个图像组成，一个比另一个大。

我在 MainWindow 中尝试做的是，当您按下给定的 RadioButton 时，两个图像之一会更改它的来源(2 个 RadioButton 更改大图像，3 个更改小图像)。在 MultiImage 类的设计 View 中我可以看到元素，但在 MainWindow 的设计 View 中，该对象不会出现，并且一旦您启动应用程序它就不会出现，即使您单击 RadioButtons。

代码如下:

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 个图像对象并使用 RadioButtons 更改它们以检查图像的路径是否正确，并且它有效，但我想使用 UserControl 以便我可以轻松地将状态图标放在我需要的任何地方。对可能发生的事情有什么想法吗？

提前致谢!

Answer 1

问题出在 UserControl 的构造函数中的代码。它用新的 Image 控件替换了 XAML 定义的元素 mainIcon 和 statusIcon，但没有将它们添加到 Grid。因此它们是不可见的，因此设置它们的 Source 属性没有视觉效果。

只需删除所有代码并调用 InitializeComponent:

public MultiImage()
{
    InitializeComponent();
}