Possible to use glyphs in backstage items?

[Steve]

I would like to use a glyph for the image or a RadRibbonBackstageItem, but since it expects an Icon, it doesn't seem possible. Is there some way to do it?

[Martin]

Hi,

We have introduced since R1 2018 a RadGlyph and a RadGlyphExtension (MarkupExtension) that can be used to provide ImageSource for our (and third-party) font glyphs, as well as PathGeomery where needed.

You can give it a try with something like Source="{telerik:RadGlyph Glyph={StaticResource GlyphSave}, Foreground=Black}". In case it does not return an image source automatically, you could add Type=Image to the markup extension. You would need to merge the glyphs' resource dictionary to use the StaticResources, or you can use the direct sting values for the needed glyphs from the cheatsheet.

I hope that satisfies your application's requirement. If you have any other questions, please do not hesitate to contact us further.

Regards,
Martin
Progress Telerik

[Steve]

I haven't gone back and tried to use it in the backstage, but at the moment I am trying to use the RadGlyph in a split button menu icon. Instead of displaying the glyph it shows "sys". See attached image, in the red box. Directly above it I am using the glyph the "old fashioned" way just using a textblock with the font set, and it works, so I don't think it is a resource issue.

Here is the code for the button and dropdown

 

<telerik:RadRibbonSplitButton Command="{Binding InsertRowsAboveCommand}" telerik:ScreenTip.Description="Insert above selected rows"
                         telerik:KeyTipService.AccessText="IA">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{StaticResource GlyphInsertUp}" FontFamily="{StaticResource TelerikWebUI}" VerticalAlignment="Center" />
        <TextBlock Text="Insert Rows" Margin="5,0,0,0" />
    </StackPanel>
    <telerik:RadRibbonSplitButton.DropDownContent>
        <telerik:RadContextMenu>
            <telerik:RadMenuItem Header="Insert Rows Above" Icon="{telerik:RadGlyph Glyph={StaticResource GlyphInsertUp}, Type=Image}" Command="{Binding InsertRowsAboveCommand}" telerik:KeyTipService.AccessText="A" />
            <telerik:RadMenuItem Header="Insert Rows Below" Command="{Binding InsertRowsBelowCommand}" telerik:KeyTipService.AccessText="B" />
        </telerik:RadContextMenu>
    </telerik:RadRibbonSplitButton.DropDownContent>
</telerik:RadRibbonSplitButton>

[Martin]

Hello,

The reason the the glyph is not rendered in the RadMenuItem is that the "Icon" property is of type object, which means that it is passed to a ContentPresenter and could be any element. In the case that an ImageSource is passed, it is rendered as .ToString(). If you would like a glyph icon, you can pass to the Icon property an Image control, a TextBlock, or a RadGlyph directly as an element:

<telerik:RadMenuItem Header="Item 1">
    <telerik:RadMenuItem.Icon>
        <Image Width="16" Height="16" Stretch="Uniform" Source="{telerik:RadGlyph Glyph={StaticResource GlyphInsertUp}}" />
    </telerik:RadMenuItem.Icon>
</telerik:RadMenuItem>

Regards,
Martin
Progress Telerik

[Steve]

That works, except that it doesn't appear to theme correctly (e.g. text should be white using expression_dark, but it is black). Also, there doesn't appear to be any way to bind the Foreground as it is not a dependency property on the extension. I tried bypassing the extension so that I could bind the foreground on the RadGlyph itself, but I get the error "Property 'Source' does not support values of type 'RadGlyph'".

<telerik:RadMenuItem Header="Insert Rows Above" Command="{Binding InsertRowsAboveCommand}" telerik:KeyTipService.AccessText="A">
    <telerik:RadMenuItem.Icon>
        <Image Height="16" Width="16">
            <Image.Source>
                <telerik:RadGlyph Glyph="{StaticResource GlyphSum}" Type="Image"
                  Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type RadRibbonSplitButton}}}" />
            </Image.Source>
        </Image>
    </telerik:RadMenuItem.Icon>
</telerik:RadMenuItem>

 

[Steve]

I got it to compile, by not using the Image.Source but it still doesn't pick up the right colors

 

<telerik:RadMenuItem Header="Insert Rows Above" Command="{Binding InsertRowsAboveCommand}" telerik:KeyTipService.AccessText="A">
    <telerik:RadMenuItem.Icon>
        <telerik:RadGlyph Glyph="{StaticResource GlyphInsertUp}"
                  Foreground="{Binding Foregound, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
    </telerik:RadMenuItem.Icon>
</telerik:RadMenuItem>

[Steve]

So... is this supposed to work with implicit themes? Is it broken or am I missing something?

[Sia]

Hello, 

The RadGlyph is not in the same visual tree as it is inside the RadSplitButton's DropDownContent, that is why you cannot bind its Foreground to the Window or the RadRibbonSplitButton. However I believe that such binding (to the RadMenuItem for example) is broken as the Glyph is set through the Icon property.

What I can suggest as a workaround for skipping this limitation of the Icon property is to use the Header one instead as follows: 

<telerik:RadRibbonSplitButton.DropDownContent>
    <telerik:RadContextMenu>
        <telerik:RadMenuItem IconColumnWidth="0">
            <telerik:RadMenuItem.Header>
                <StackPanel Orientation="Horizontal">
                    <telerik:RadGlyph Glyph="{StaticResource GlyphInsertUp}" />
                    <TextBlock Text="Insert Rows Above" />
                </StackPanel>
            </telerik:RadMenuItem.Header>
        </telerik:RadMenuItem>
    </telerik:RadContextMenu>
</telerik:RadRibbonSplitButton.DropDownContent>

I hope this helps. 

Regards,
Sia
Progress Telerik

[Steve]

That is a very unsatisfying answer, and causes several other issues. I have tried several times to use RadGlyph and it has never worked because of themes. As far as I can tell there is zero usefulness for this feature. I consider this fundamentally broken and would appreciate it getting fixed.

[Kalin]

Hello Steve,

I'm sorry to hear about your frustration. If you could share more details regarding the exact RadGlyph uses cases, we would be glad to check them and provide you with further assistance. Please open up support tickets for the exact issues, providing sample project if possible.

As for this particular scenario you could use the IconTemplate property in combination with the Icon property of the RadMenuItem. You could provide the desired glyphs trough the Icon property and use RadGlyph in the ItemTemplate in order to correctly render them as shown below:

<telerik:RadMenuItem Header="Insert Rows Above" Icon="{StaticResource GlyphInsertUp}">
    <telerik:RadMenuItem.IconTemplate>
        <DataTemplate>
            <telerik:RadGlyph Glyph="{Binding}" />
        </DataTemplate>
    </telerik:RadMenuItem.IconTemplate>
</telerik:RadMenuItem>

If you change the theme, RadGlyph will pick the correct Foreground. For your convenience I have prepared and attached a sample project demonstrating the exact solution - if you click the RadMenuItem the theme will change to Fluent and you should be able to observe the Foreground change of the glyph.

Please check the project and let me know if this is working for you as expected.

I'm looking forward to hearing from you.

Regards, 
Kalin
Progress Telerik