This is a migrated thread and some comments may be shown as answers.

Using RadGlyph as icon in bound ContextMenu

2 Answers 69 Views
ContextMenu
This is a migrated thread and some comments may be shown as answers.
Don
Top achievements
Rank 1
Veteran
Don asked on 03 Dec 2020, 07:25 AM

I am following the documentation from here:

But I would like to use a RadGlyph instead of an image url. Is there a way to use a RadGlyph instead of an image for the IconUrl property in the following class and template? I have not been able to get it to work.

public class MenuItem
{
    public MenuItem()
    {
        this.SubItems = new ObservableCollection<MenuItem>();
    }
 
    public string Text { get; set; }
    public Uri IconUrl { get; set; }
    public bool IsSeparator  { get; set; }
    public ICommand Command { get; set; }
    public ObservableCollection<MenuItem> SubItems { get; set; }
}

 

<Style x:Key="MenuItemStyle" TargetType="telerik:RadMenuItem">
    <Setter Property="Icon" Value="{Binding IconUrl}"/>
    <Setter Property="IconTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Source="{Binding}" Stretch="None"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsSeparator" Value="{Binding IsSeparator}"/>
    <Setter Property="Header" Value="{Binding Text}"/>
    <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
    <Setter Property="Command" Value="{Binding Command}"/>
</Style>

 

Regards,

Don

 

2 Answers, 1 is accepted

Sort by
0
Don
Top achievements
Rank 1
Veteran
answered on 04 Dec 2020, 03:34 AM

After getting a good night's sleep I revisited this and worked out how to do it. And it turned out to be pretty easy.

I changed the MenuItemStyle to the following:

<Style x:Key="MenuItemStyle" TargetType="telerik:RadMenuItem" BasedOn="{StaticResource RadMenuItemStyle}">
    <Setter Property="Icon" Value="{Binding IconGlyph}"/>
    <Setter Property="IconTemplate">
        <Setter.Value>
            <DataTemplate>
                <telerik:RadGlyph Glyph="{Binding}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsSeparator" Value="{Binding IsSeparator}"/>
    <Setter Property="Header" Value="{Binding Text}"/>
    <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
    <Setter Property="Command" Value="{Binding Command}"/>
</Style>

 

Then I changed the Uri IconUrl property to a string roperty in the MenuItem class:

public class MenuItem
{
    public MenuItem()
    {
        SubItems = new ObservableCollection<MenuItem>();
    }
 
    public string? Text { get; set; }
    public string? IconGlyph { get; set; }
    public bool IsSeparator { get; set; }
    public ICommand? Command { get; set; }
    public ObservableCollection<MenuItem> SubItems { get; set; }
}

 

Finally, in my ViewModel I set up the collection for the Context menu:

private void SetupProjectContextMenu()
{
    ProjectContextMenuItems = new ObservableCollection<MenuItem>
    {
        new MenuItem()
        {
            Text="Edit Project",
            IconGlyph=GetGlyph(""),
            IsSeparator=false,
            Command=EditCommand
        },
        new MenuItem()
        { Text="Delete Project",
            IconGlyph=GetGlyph(""),
            IsSeparator=false,
            Command=DeleteCommand
        }
    };
}
 
public static string GetGlyph(string hexCode)
{
    string glyphInt = hexCode.Substring(3, 4);
    char character = (char)int.Parse(glyphInt, NumberStyles.HexNumber);
    return character.ToString();
}

 

Regards,

Don

 

0
Dilyan Traykov
Telerik team
answered on 04 Dec 2020, 11:30 AM

Hello Don,

I'm glad to hear that you've managed to achieve the desired result and would like to thank you for sharing it with our community. Should you require any further assistance, please let us know.

Regards,
Dilyan Traykov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ContextMenu
Asked by
Don
Top achievements
Rank 1
Veteran
Answers by
Don
Top achievements
Rank 1
Veteran
Dilyan Traykov
Telerik team
Share this question
or