How to set icon for item in custom context menu?

[Kjell]

Hello.  I am using the CustomMenuBuilder class to create my own context menu.  Everything is working great except I can't get the Icons to show up.  I have tried a bunch of variations of essentially the following two techniques:

1--

RadMenuItem clear = new RadMenuItem();
            clear.Header = "Clear";

            BitmapImage myImage = new BitmapImage();
            string imagePath ="./Images/MenuIcons/Clear.png";
            myImage.UriSource = new Uri(imagePath, UriKind.Relative);
            Image img = new Image();
            img.Source = myImage;

clear.Icon = img;

2-- same definition for the menu but i tried defining a template in my App.xaml and then setting the icon template:

clear.IconTemplate = (DataTemplate)Application.Current.Resources["ClearMenu"];

The first method, shows me the letters "Im" instead of the image, the second messages causes an error.  If I try to display that image in a different portion of my app, it works fine. So the URL is definitely correct.  I have tried playing around with the URL and different ways of defining the image but no luck.

[Boby]

Hello Kjell,

You can use the following code:

RadMenuItem clear = new RadMenuItem();
clear.Header = "Clear";
clear.Icon = new Image()
{
    Source = new BitmapImage(new Uri("/SilverlightApplication1;component/Images/MenuIcons/Clear.png", UriKind.Relative)),
    // This is valid too, if the image is within the same assembly
    //Source = new BitmapImage(new Uri("Images/MenuIcons/Clear.png", UriKind.Relative)),
    Stretch = Stretch.None
};

Please note that in order this to work, you should set the build action of the Clear.png file to "Resource" and also change "SilverlightApplication1" in the Uri path to the name of the assembly containing the image.

Don't hesitate to contact us if you have other questions.

Greetings,
Boby
the Telerik team

[Kjell]

No luck, I have attached a screenshot which shows hopefully enough detail to solve the problem.  You can see the path to the file and my code.  I tried both methods. 

You may have noticed the paths vary in my two code samples, that is because I have the png in both my silverlight project and my web project.  I did get it working when I used an absolute URL pointing to the published project, however that is not a viable permanent solution.

I also tried variations:

Source =

 

new BitmapImage(new Uri("/STSilver;Images/Icons16/Clear.png", UriKind.Relative)),

 

 

Source =

 

new BitmapImage(new Uri("/STSilver;./Images/Icons16/Clear.png", UriKind.Relative)),
Source = new BitmapImage(new Uri("./images/menuicons/clear.png", UriKind.Relative)),

 

 

Source =

 

new BitmapImage(new Uri("/ST3_Source;Images/menuicons/clear.png", UriKind.Relative)),

 

 

 

 

 

note: Menuicons is the subfolder in my web project where the png is located. 
ST3_Source is the solution and web project name.

[Iva Toteva]

Hi Kjell,

Both options Boby provided work fine on our end. Please find attached a demo illustrating that. Hopefully, it will help you find the problem. If not, you can open a support ticket and send an application of yours in which the issue can be reproduced.

Greetings,
Iva
the Telerik team

[Kjell]

Thanks, yours works flawlessly. 

Something was wrong with my URI declaration but I haven't been able to figure out what it was.  I used this work-around:

protected override ContextMenuGroup CreateTextEditCommands()
{
    //Get the root path for the XAP
    string src = Application.Current.Host.Source.ToString();
    //Get the application root, where 'ClientBin' is the known dir where the XAP is
    string appRoot = src.Substring(0,src.IndexOf("ClientBin"));
    ContextMenuGroup myMenu = new ContextMenuGroup();
    RadMenuItem clear = new RadMenuItem();
    clear.Header = "Clear";
    clear.Icon = new Image()
    {
        //Source = new BitmapImage(new Uri("/ST3_Source;component/Images/MenuIcons/Clear.png", UriKind.Relative)),
        //// This is valid too, if the image is within the same assembly
        Source = new BitmapImage(new Uri(appRoot + "Images/MenuIcons/Clear.png", UriKind.Absolute)),
        Stretch = Stretch.None
    };
    myMenu.Add(clear);
    return myMenu;
}

[Iva Toteva]

Hello Kjell,

We are glad to hear that you were able to solve the issue in your application. Thank you for sharing your approach for other developers that may encounter the same problem.

Best wishes,
Iva
the Telerik team