Outlook Bar

The OutlookBar control functions similarly to a TabControl, displaying buttons for each of a set of content items. However, the OutlookBar supports two levels of display, allowing items to be displayed either as large buttons for convenience of selection, or as small icons to conserve space. This allows you to create adaptive user interfaces where common or favourite choices are given greater prominence and accessibility than uncommon choices. It is similar to the navigation pane displayed on the left of recent versions of the Microsoft Outlook application.

The content model of the OutlookBar is a collection of OutlookBarItem objects, each of which specifies the “large” and “small” headers as well as the content. The “large” header is specified using the Header property, and is typically a panel containing an image and a text block. The “small” header is specified using the CollapsedHeader property, and is typically an image. The content is specified using the Content property. In the default template, the content is displayed above the selection buttons, and the user can drag a bar to change the relative size of the content and selection-bar areas.

CopyXML
<ms:OutlookBar Width="200">

  <ms:OutlookBarItem IsSelected="True">
    <!-- Large button display -->
    <ms:OutlookBarItem.Header>
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="5,0,0,0">
        <Image Source="MailLarge.png" Width="21" Height="21" VerticalAlignment="Center" HorizontalAlignment="Left" />
        <TextBlock Margin="13,0,0,0" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left">Mail</TextBlock>
      </StackPanel>
    </ms:OutlookBarItem.Header>
    <!-- Icon display -->
    <ms:OutlookBarItem.CollapsedHeader>
      <Image Source="MailSmall.png" Width="16" Height="15" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3,0,3,0" />
    </ms:OutlookBarItem.CollapsedHeader>
    <!-- Content -->
    <ms:MulticolumnTreeView ItemsSource="{Binding MailFolders} />
  </ms:OutlookBarItem>

  <ms:OutlookBarItem>
    <!-- Large button display -->
    <ms:OutlookBarItem.Header>
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="50,00&quot;>
        <Image Source="CalendarLarge.png" Width="21" Height="21" VerticalAlignment="Center" HorizontalAlignment="Left" />
        <TextBlock Margin="13,0,0,0" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left">Calendar</TextBlock>
      </StackPanel>
    </ms:OutlookBarItem.Header>
    <!-- Icon display -->
    <ms:OutlookBarItem.CollapsedHeader>
      <Image Source="CalendarSmall.png" Width="16" Height="15" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3,0,3,0" />
    </ms:OutlookBarItem.CollapsedHeader>
    <!-- Content -->
    <ListBox ItemsSource="{Binding AvailableCalendars}" />
  </ms:OutlookBarItem>

</ms:OutlookBar>