Question

I have several menu items like this:

<navigation:RadMenuItem Header="New Assignment">
    <navigation:RadMenuItem.Icon>
        <Image Source="/Images/New_Assignment.jpeg" Width="20" Height="20" />
    </navigation:RadMenuItem.Icon>
</navigation:RadMenuItem>
<navigation:RadMenuItem Header="New Course">
    <navigation:RadMenuItem.Icon>
        <Image Source="/Images/New_Course.jpeg" Width="20" Height="20" />
    </navigation:RadMenuItem.Icon>
</navigation:RadMenuItem>
<navigation:RadMenuItem Header="New Folder">
    <navigation:RadMenuItem.Icon>
        <Image Source="/Images/New_Folder.jpeg" Width="20" Height="20" />
    </navigation:RadMenuItem.Icon>
</navigation:RadMenuItem>

Notice that I have to set the icon for each Item. (All the icons are in the /Images/ folder) So how can I pass a parameter so that maybe I could say:

<navigation:RadMenuItem Header="New Assignment" Icon="{Binding ImageCollection, param1=New_Assignment.jpeg}" />

Where ImageCollection is the collection of images in the /Images/ folder.

Answer 1

There is a solution to your problem.

You use a dictionary of type < string, ImageSource> as your ImageCollection variable like so:

public Dictionary< string, ImageSource> ImageCollection{ get; set; }

Now to construct your collection, you must specify the correct ImageSource with a valid URI.

You start with your base address, in your case “/Images” so that you can change your base address at one point of your code instead of having to look for all occurrences of image address… just for convenience.

const readonly string BASE_ADDR = "/Images";

Now you can begin to build your image collection like so:

ImageCollection = new Dictionary< string, ImageSource>
{
    { "New_Assignment", new BitmapImage(BASE_ADDR + "/New_Assignment.jpeg") }
    ...
    ...
}

Now in your XAML, you are able to bind like this:

<navigation:RadMenuItem
  Header="New Assignment"
  Icon="{Binding ImageCollection[New_Assignment]}" />

This should work nicely. Happy coding.