Telerik blogs

I’m happy to announce that with the Q2 2011 Beta we are releasing a new rad control – RadBreadcrumb. With the Q2 Beta the RadBreadcrumb will be available only for Silverlight and we will include a WPF version for the official Q2 2011 release. 

The Breadcrumb control is a lot like the TreeView – you have a hierarchy through which you can freely navigate, but unlike the TreeView the breadcrumb is showing only the currently selected path in the hierarchy and have a couple of additional features like history and text mode.

In this blog post I’ll try to explain you the structure and main features of the RadBreadcrumb.

The first thing you should notice is that the RadBreadcrumb will always have one root element. You can set the root with the Header property of the RadBreadcrumb or leave it empty. In the second case an empty root element will be created.

Header examples:

<StackPanel>
    <telerik:RadBreadcrumb Height="25" Margin="5">
        <telerik:RadBreadcrumbItem Header="Item" />
    </telerik:RadBreadcrumb>
    <telerik:RadBreadcrumb Height="25"
                     Margin="5"
                     Header="String Root">
        <telerik:RadBreadcrumbItem Header="Item" />
    </telerik:RadBreadcrumb>
    <telerik:RadBreadcrumb Height="25" Margin="5">
        <telerik:RadBreadcrumb.Header>
            <telerik:RadBreadcrumbItem Header="BreadcrumbItem Root" />
        </telerik:RadBreadcrumb.Header>
        <telerik:RadBreadcrumbItem Header="Item" />
    </telerik:RadBreadcrumb>
    <telerik:RadBreadcrumb Height="25" Margin="5">
        <telerik:RadBreadcrumb.Header>
            <Rectangle Width="30"
                         Height="20"
                         Fill="Orange" />
        </telerik:RadBreadcrumb.Header>
        <telerik:RadBreadcrumbItem Header="Item" />
    </telerik:RadBreadcrumb>
</StackPanel>

 And the result will be something like this:

Defining a RadBreadcrumb hierarchy in XAML is pretty straightforward -  you use the RadBreadcrumbItems and nest them in each other like you’ll do with RadTreeViewItems:

<telerik:RadBreadcrumb Grid.Column="1" Header="Root">
    <telerik:RadBreadcrumbItem Header="Item 1">
        <telerik:RadBreadcrumbItem Header="Item 1.1">
            <telerik:RadBreadcrumbItem Header="Item 1.1.1" />
        </telerik:RadBreadcrumbItem>
            <telerik:RadBreadcrumbItem Header="Item 1.2" />
        </telerik:RadBreadcrumbItem>
    <telerik:RadBreadcrumbItem Header="Item 2" />
</telerik:RadBreadcrumb>

In data binding scenarios you can define the hierarchy with HierarchicalTemplate and ContainerBindings or by setting a couple of properties to the RadBreadcrumb. Those two definitions are equal:

With HierarchicalTemplate and ContainerBindings:

<telerik:ContainerBindingCollection x:Key="containerBinding">
    <telerik:ContainerBinding Binding="{Binding IconPath, Mode=TwoWay}" PropertyName="Image" />
    <telerik:ContainerBinding Binding="{Binding Path, Mode=TwoWay}" PropertyName="TextModePath" />
</telerik:ContainerBindingCollection>


<telerik:RadBreadcrumb x:Name="myBreadcrumb"
                           VerticalAlignment="Top"
                           Header="{Binding Root}"
                           IsIconVisible="True"
                           ItemsSource="{Binding Root.Children}">
    <telerik:RadBreadcrumb.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </telerik:RadBreadcrumb.HeaderTemplate>
    <telerik:RadBreadcrumb.ItemTemplate>
        <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}" telerik:ContainerBinding.ContainerBindings="{StaticResource containerBinding}">
            <telerik:HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource containerBinding}">
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </telerik:HierarchicalDataTemplate.ItemTemplate>
            <TextBlock Text="{Binding Header}" />
        </telerik:HierarchicalDataTemplate>
    </telerik:RadBreadcrumb.ItemTemplate>
</telerik:RadBreadcrumb>

and with the RadBreadcrumb properties:

<telerik:RadBreadcrumb x:Name="myBreadcrumb"
                           VerticalAlignment="Top"
                           Header="{Binding Root}"
                           HeaderMemberPath="Header"
                           HierarchicalItemsSource="Children"
                           HierarchicalMemberPath="Header"
                           ImagePath="IconPath"
                           IsIconVisible="True"
                           ItemsSource="{Binding Root.Children}"
                           TextModePath="Path" />

The result from the two definitions is like this:

As you can see the RadBreadcrumb is both flexible and easy to use.

Another RadBreadcrumb feature is the text mode. You can activate this mode by clicking on the RadBreadcrumb (not on RadBreadcrumbItem) or the history drop down and in it you can navigate through the hierarchy by typing the path to the desired element. In order to facilitate the text mode experience we've added autocomplete support:

You can download the sample project from here and see the online demos here.

A trial version of the Telerik RadCrontrols for Silverlight can be downloaded from here:

RadControls for Silverlight – Download Trial

Every feed back will be highly appreciated. 


About the Author

Zarko Vidolov

is a .Net developer in Telerik XAML division. In his work he is mainly responsible for RadDiagram, RadTileView, RadBreadcrumb and RadPersistenceFramework development and implementation. Apart from work he enjoys reading and snowboarding.

Comments

Comments are disabled in preview mode.