WPF - UserControl with images not showing properly

Question

Ok, here is my problem:

I have created a UserControl named MultiImage, which is composed by a two images, one bigger than the other.

enter image description here

What I am trying to do in the MainWindow is that, when you press a given RadioButton, one of the two images changes it source (2 RadioButtons change the big image and 3 change the little one). In the design view of the MultiImage class I can see the elements, but in the design view of the MainWindow, the object doesn't appear, and once you start the application it keeps not appearing, even if you click on the RadioButtons.

The code is the following:

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

I have tried putting 2 Image objects and changing them with the RadioButtons to check if the route for the images is correct, and it worked, but I want to use the UserControl so I can easily put the status icon wherever I need. Any thoughts about what could be happening?

Thanks in advance!

score 3 · Accepted Answer · answered Jul 23 '13 at 12:13

The problem is the code in your UserControl's constructor. It replaces the XAML-defined elements mainIcon and statusIcon by new Imagecontrols, but does not add them to the Grid. Hence they are not visible, and therefore setting their Source property has no visual effect.

Just remove all your code and call InitializeComponent:

public MultiImage()
{
    InitializeComponent();
}

score -1 · Answer 2 · answered Jul 23 '13 at 12:09

Not so sure on this . But maybe you need a public property for the user control.

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

and try accessing that property

public partial class MainWindow : Window { public MainWindow() {
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));
    }
}

might have some compilation errors... THanks

score -1 · Answer 3 · answered Jul 23 '13 at 13:49

Your problem is that you don't pass through your constructor each time you assign it. I mean:

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

This code will be called only once. That's not what you need. You need to be able to assign a dynamic URI to your images. So I think you have to replace the content of your constructor like this:

public MultiImage()
{
    InitializeComponent();
}

Create AutoProperties to access your variables and read/write on them:

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

And then access them normally in your code:

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

WPF - UserControl with images not showing properly

3 Answers3

Linked