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.

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"&#13;             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&#13;             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"&#13;             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"&#13;             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"&gt;&#13;    <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>

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

• Visual Structure
• Resizing
• Selection
• Events