Using RadGlyph as icon in bound ContextMenu

[Don]

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

 

[Don]

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

 

[Dilyan Traykov]

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