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.
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.