Displaying an image from a list box

Question

3.50/5 (2 votes)

See more:

I have a drop down list of different things. For example:

umbrella
cap
shirt
football etc..

The above can be the contents of the list box. What I want to do is that when I click on umbrella, I want to display the image of umbrella in the image box. And I want to do it in the way as if the list box item == umbrella, then the image of umbrella should display.

But I can't do this! Can some body please help me with the code?

Everybody's effort is appreciated :-)

Posted 9-Feb-11 5:32am

hanifuk

Updated 9-Feb-11 5:57am

Nish Nishant

v2

Add a Solution

Comments

Nish Nishant 9-Feb-11 11:33am

Is this in WinForms, WPF, Silverlight or some 3rd party custom framework like DevEx?

hanifuk 9-Feb-11 11:35am

i am using WPF with c#.

Nish Nishant 9-Feb-11 11:56am

Ok, I'll tag the thread with WPF then.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nish Nishant · Answer 1 · 2011-02-09T05:56:00

Solution 2

Here's some sample WPF code:

XML

<StackPanel Orientation="Vertical">
    <ListBox ItemsSource="{Binding Objects}"
            SelectedIndex="{Binding CurrentIndex}" />
    <Image Source="{Binding ObjectImage}" />
</StackPanel>

Here's the corresponding code in the view-model (or data source) :

C#

public string[] Objects { get; set; }

private int currentIndex;

public int CurrentIndex
{
    get { return currentIndex; }

    set
    {
        if (currentIndex == value)
            return;

        currentIndex = value;
        FirePropertyChanged("CurrentIndex");
        UpdateObjectImage();
    }
}


private ImageSource objectImage;

public ImageSource ObjectImage
{
    get { return objectImage; }

    set
    {
        if (objectImage == value)
            return;

        objectImage = value;
        FirePropertyChanged("ObjectImage");
    }
}

private void UpdateObjectImage()
{
    if (CurrentIndex >= Objects.Length)
        return;

    this.ObjectImage = GetImage(Objects[CurrentIndex]);
}

private ImageSource GetImage(string name)
{
    BitmapImage image = new BitmapImage();
    image.BeginInit();
    image.UriSource = new Uri(
      String.Format(
        "pack://application:,,,/YourWpfApplicationName;component/{0}.png",
        name));
    image.EndInit();
    return image;
}

Posted 9-Feb-11 5:56am

Nish Nishant

Comments

hanifuk 9-Feb-11 12:13pm

thanks for your kind reply, but i think i m not been able to explain my question properly !!
i have a list of items like i mentioned earlier , and in front of this list i have an image box which is empty in the start.
when i click on any item of the list, i check whether that item is umbrella or cap or some thing else.. and then want to display its picture in the image box.i.e
if(item==umbrella) then
load the image of umbrella in the image box
else
load the image of the other item in the image box..
and the images which i want to load is are not in the list, i have to load it manually from the disk.

Nish Nishant 9-Feb-11 12:14pm

Yes, I know. That's exactly what my code does above :-)

Take a look at the GetImage method. That's where the strings are converted into their matching images. You would of course need to replace that method with a more appropriate image matching code.

Nish Nishant 9-Feb-11 12:15pm

To be more clear, when the user selects cap, the cap image is shown in the Image control. When the user selects shirt, the shirt image is shown in the Image control. That's what my code does.

Sergey Alexandrovich Kryukov 9-Feb-11 12:36pm

Nishant, I got it after explanation and gave a compete answer, please see.
--SA

Nish Nishant 9-Feb-11 12:37pm

Ok, thanks, will take a look at it.

Sergey Alexandrovich Kryukov 9-Feb-11 13:05pm

Really good bonus point is demonstration of the "pack" URL schema.
My 5.
One my concern is hard-coded property name in FireProperyChanged. This is no good, because not supportable: compiler is not able to sport, say, a misprint. I never allow any immediate constants excluding very few like null, 0, 1 (not even ""). I understand this is for illustration.
Could you explain how it can be fixed? If you really need string (which I'm not sure, you can use directly dependency property member), you can extract it from the class. This is important aspect.
Thank you for your attention to this -- please reply.
--SA

Nish Nishant 9-Feb-11 13:06pm

There is no easy fix for this, but many MVVM libraries offer workarounds where you specify an attribute on the property and the property name is obtained via reflection. It's not a clean way to do it but it saves you from errors due to typos.

Sergey Alexandrovich Kryukov 9-Feb-11 16:29pm

I don't the fix it too hard...
It it dependency property or not?
--SA

Nish Nishant 9-Feb-11 16:32pm

It's not an issue about dependency properties, the issue is with the way INotifyPropertyChanged was designed. See the msdn example here and you'll see what I mean:

http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged.aspx

Sergey Alexandrovich Kryukov 9-Feb-11 17:21pm

Thank you for explanation.

I know! ComponentModel sucks! -- if you still did not realize that. The best way it to avoid it. This is main reason for many problems in Forms (I think it is not used in WPF).
The Component model is full with cases, when you need to put a class as an attribute parameter. If the type is applicable is not possible to figure out if it is relevan during run time. The main limitation is the lack of meta-classes (available in Delphi, a .NET predecessor). But -- back to Component Model -- even in top in attribute functionality one could do much better. Component Model uses such dirty things an the method name match, for example (as if interfaces are not invented!). I have to work around all the time. I touch this problem in my article http://www.codeproject.com/KB/dotnet/HumanReadableEnumerations.aspx.

Thank you.
--SA

Sergey Alexandrovich Kryukov · Answer 2 · 2011-02-09T06:27:00

Very different answer after clarification by the comment on my previous Answer by Hanifuk:

First, you need to create some class for an item to store in the list. You requirements mean that it serve dual purpose: to show some text in the list and also to provide information for image presentation. Let's assume this is image file name (could be more complex; this is just for example). To show this item in the list, all you need it to override object.ToString():

C#

internal class ListItemHelper {
    internal ListItemHelper(string itemText, string imageFileName) {
        this.ItemText = itemText;
        this.FImageFileName = imageFileName;
    } //ListItemHelper
    public override string ToString() {
        return ItemText;
    } //object.ToString()
    internal string ImageFileName { get {return FImageFileName;} }
    private string ItemText, FImageFileName;
} //class ListItemHelper

Use this class to add information to your list:

C#

MyList.Add(new ListItemHelper("First day of vacation", "2010-06-01-1343.jpg"));
//item will show int the list: First day of vacation

Now you need to setup a handler for selection of the item in your list:

C#

void ShowMyPicture(string source) {
/*...*/
//should be able to handle null as "nothing selected"
} //ShowMyPicture

//...

MyList.SelectionChanged += (sender, eventArgs) => {
   //you know the sender is your list box, so not afraid of the cast:
   ListBox listBox = (ListBox)sender;
   //you know the item is alway ListItemHelper, so not afraid of the cast:
   if (listBox.SelectedItem == null)
       ShowMyPicture(null);
   else {
       ListItemHelper helper = (ListItemHelper)listBox.SelectedItem;
       ShowMyPicture(helper.ImageFileName); //you probaly know what to do
   } //if
}; //MyList.SelectionChanged handler

That's it.

—SA

Sergey Alexandrovich Kryukov · Answer 3 · 2011-02-09T05:50:00

Solution 1

You can add to list items practically whatever you want:

MyList.Items.Add(MyImage);

—SA

Posted 9-Feb-11 5:50am

Sergey Alexandrovich Kryukov

Comments

hanifuk 9-Feb-11 11:55am

no my friend ! i don't want to add any thing into the list.
i want to display images of different items according to the names of the contents of the listbox. i.e
i want to check
if(the listbox content==umbrella) then
load an image of umbrella on the image box from a specific location of my hard disk.
that's it.
can u help me with this ??

Sergey Alexandrovich Kryukov 9-Feb-11 12:07pm

Or, this is easy! You did not explain it. I'll show you...
--SA

Displaying an image from a list box

3 solutions

Solution 2

Solution 3

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us