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

Question

好的，这是我的问题：

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

我在 MainWindow 中尝试做的是，当您按下给定的 RadioButton 时，两个图像之一会更改它的源（2 个 RadioButtons 更改大图像，3 个更改小图像）。在 MultiImage 类的设计视图中，我可以看到元素，但在 MainWindow 的设计视图中，该对象没有出现，并且一旦您启动应用程序，即使您单击 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 个 Image 对象并使用 RadioButtons 更改它们以检查图像的路径是否正确，并且它有效，但我想使用 UserControl，以便我可以轻松地将状态图标放在我需要的任何地方。对可能发生的事情有任何想法吗？

提前致谢！

Answer 1

你的问题是你每次分配它时都没有通过你的构造函数。我的意思是：

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

Answer 2

问题在于您的 UserControl 构造函数中的代码。它将 XAML 定义的元素 mainIcon 和 statusIcon 替换为新的 Imagecontrols，但不会将它们添加到网格中。因此它们是不可见的，因此设置它们的Source 属性没有视觉效果。

只需删除所有代码并致电InitializeComponent：

public MultiImage()
{
    InitializeComponent();
}

Answer 3

对此不太确定。 但也许您需要一个公共属性来用于用户控件。

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

并尝试访问该属性

公共部分类 MainWindow : Window { 公共主窗口（） {
初始化组件（）； }

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

可能有一些编译错误...谢谢