Getting Started

Adding the RadOutlookBar to the page

In order to use RadOutlookBar control in your projects you have to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Navigation
  • Telerik.Windows.Data

You can find more info here.

RadOutlookBar Step 1

Adding icons to the items

<telerik:RadOutlookBar> 
    <telerik:RadOutlookBarItem Header="Item 1" Icon="Letter.png"> 
        <TextBlock Text="Item 1 Content" /> 
    </telerik:RadOutlookBarItem> 
    <telerik:RadOutlookBarItem Header="Item 2"  
                               Icon="Letter.png" 
                               IsSelected="True"> 
        <TextBlock Text="Item 2 Content" /> 
    </telerik:RadOutlookBarItem> 
    <telerik:RadOutlookBarItem Header="Item 3" Icon="Letter.png"> 
        <TextBlock Text="Item 3 Content" /> 
    </telerik:RadOutlookBarItem> 
</telerik:RadOutlookBar> 

Selecting item

By default the first item will be selected. In order to select another item you can use the IsSelected property.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"> 
    <Grid x:Name="LayoutRoot"> 
        <telerik:RadOutlookBar > 
            <telerik:RadOutlookBarItem Header="Item 1"> 
                <TextBlock Text="Item 1 Content" /> 
            </telerik:RadOutlookBarItem> 
            <telerik:RadOutlookBarItem Header="Item 2"> 
                <TextBlock Text="Item 2 Content" /> 
            </telerik:RadOutlookBarItem> 
            <telerik:RadOutlookBarItem Header="Item 3"> 
                <TextBlock Text="Item 3 Content" /> 
            </telerik:RadOutlookBarItem> 
        </telerik:RadOutlookBar> 
    </Grid> 
</UserControl> 

RadOutlookBar Icons support

Handling changes in the selection

To handle the changes in the selection you can use the SelectionChanged event of the RadOutlookBar:

<telerik:RadOutlookBar x:Name="RadOutlookBar1" SelectionChanged="RadOutlookBar1_SelectionChanged"> 
    <telerik:RadOutlookBarItem Header="Item 1" Icon="Letter.png"> 
        <TextBlock Text="Item 1 Content" /> 
    </telerik:RadOutlookBarItem> 
    <telerik:RadOutlookBarItem Header="Item 2"  
                               Icon="Letter.png" 
                               IsSelected="True"> 
        <TextBlock Text="Item 2 Content" /> 
    </telerik:RadOutlookBarItem> 
    <telerik:RadOutlookBarItem Header="Item 3" Icon="Letter.png"> 
        <TextBlock Text="Item 3 Content" /> 
    </telerik:RadOutlookBarItem> 
</telerik:RadOutlookBar> 

private void RadOutlookBar1_SelectionChanged(object sender, RoutedEventArgs e) 
{ 
    RadOutlookBarItem newSelectedItem = (sender as RadOutlookBar).SelectedItem as RadOutlookBarItem; 
} 
Private Sub RadOutlookBar1_SelectionChanged(ByVal sender As Object, ByVal e As RoutedEventArgs) 
    Dim newSelectedItem As RadOutlookBarItem = TryCast(TryCast(sender, RadOutlookBar).SelectedItem, RadOutlookBarItem) 
End Sub 

Limiting active items

To limit the number of items that can be displayed in the active area you can use the ActiveItemsMaxCount property:

<telerik:RadOutlookBar ActiveItemsMaxCount="2"> 
    <telerik:RadOutlookBarItem Header="Item 1" Icon="Letter.png"> 
        <TextBlock Text="Item 1 Content" /> 
    </telerik:RadOutlookBarItem> 
    <telerik:RadOutlookBarItem Header="Item 2"  
                               Icon="Letter.png" 
                               IsSelected="True"> 
        <TextBlock Text="Item 2 Content" /> 
    </telerik:RadOutlookBarItem> 
    <telerik:RadOutlookBarItem Header="Item 3" Icon="Letter.png"> 
        <TextBlock Text="Item 3 Content" /> 
    </telerik:RadOutlookBarItem> 
</telerik:RadOutlookBar> 

See Also

In this article
Not finding the help you need? Improve this article