Using RadGlyphs as icons in RadBreadcrumb

[Wizard6650]

Is there a way to use RadGlyphs as icons for the items of a RadBreadcrumb?

Thank you.

[Martin Ivanov]

Hello Antik,

To achieve your requirement, you can use the HeaderTemplate and ItemTemplate properties of the RadBreadcrumb control.

Regards,
Martin Ivanov
Progress Telerik

[Wizard6650]

Hi Martin

The solution you proposed does not work because using a Header or ItemTemplate still leaves a space on the left for the icon, and this makes the whole thing look ugly.

[Martin Ivanov]

Can you send over a picture that shows where exactly you want to display an icon?

[Wizard6650]

Hi Marin

Here's the screenshot. I would like the icon to appear within its designated area on the left.

<telerik:RadBreadcrumb Header="{Binding Home}"
                       IsIconVisible="False"
                       ItemsSource="{Binding Home.SubFolders}"
                       TextModePath="Name">
    <telerik:RadBreadcrumb.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <telerik:RadGlyph Glyph="{StaticResource GlyphHome}" />
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </telerik:RadBreadcrumb.HeaderTemplate>

    <telerik:RadBreadcrumb.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding SubFolders}">
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <telerik:RadGlyph Glyph="{StaticResource GlyphFolder}" />
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>

            <StackPanel Orientation="Horizontal">
                <telerik:RadGlyph Glyph="{StaticResource GlyphFolder}" />
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </telerik:RadBreadcrumb.ItemTemplate>
</telerik:RadBreadcrumb>

public class MainViewModel
{
    public class FolderItem
    {
        public string Name { get; set; }
        public string Path { get; set; }
        public ObservableCollection<FolderItem> SubFolders { get; set; }=new ObservableCollection<FolderItem>();
    }

    public FolderItem Home { get; set; }

    public MainViewModel()
    {
        Home = new FolderItem()
        {
            Name = "Home",
            Path = "/"
        };

        for (int i = 0; i < 5; i++)
        {
            Home.SubFolders.Add(CreateFolderItem("Subfolder of Home " + i, "/Subfolder of Home " + i));
        }
    }

    private FolderItem CreateFolderItem(string name, string path)
    {
        var folderItem = new FolderItem()
        {
            Name = name,
            Path = path
        };

        for (int i = 0; i < 10; i++)
        {
            folderItem.SubFolders.Add(new FolderItem()
            {
                Name = "Subfolder " + i,
                Path = path + "/Subfolder " + i
            });
        }

        return folderItem;
    }
}

[Martin Ivanov]

Thank you for the detailed information. You should be able to get the desired result by using the ImagePath setting of RadBreadcrumb, along with the RadGlyph.GetImageSource static method. I have prepared a sample project based on your code that shows this idea. I hope it helps.

[Wizard6650]

Hi Martin, many thanks for the sample project. I am curious to know if there is a way to specify the glyph with an identifier like "GlyphFolder" instead of using the raw hex codes in the cs file.

[Martin Ivanov]

Yes, you can do that by loading in memory the FontResources.xaml dictionary that contains the glyphs as XAML resources. Then, you can use the dictionary string indexer to access the glyphs by name.

   var fontResources = new ResourceDictionary() { Source = new Uri("/Telerik.Windows.Controls;component/Themes/FontResources.xaml", UriKind.RelativeOrAbsolute) };
   string folderGlyph = (string)fontResources["GlyphFolder"];

   Home = new FolderItem()
   {
       Name = "Home",
       Path = "/",
       Icon = RadGlyph.GetImageSource(folderGlyph, 12, Brushes.Black, "TelerikWebUI")
   };

[Wizard6650]

.