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