ComponentOne 2011 v3版本中新增了Silverlight版本和WPF版本的c1OutlookBar控件。它對應的是WinForms版本的C1NavBar。因為 “OutlookBar”更貼切也更準確，所以我們在XAML平臺下使用了這個名字。有Outlook2007和2010樣式。

　　OutlookBar類似一個TabControl，用戶可以選擇Content panel中的任何一個Item。你可以按照優先級為它們建立分類。OutlookBar可以通過拖拽操作，自由的收起或者展開各個項目。這樣用戶就可以 方便的定制那些項目顯示出來，哪些最小化到底部的菜單里。如圖所示：

　　整個控件可以最小化到最左邊或者最右邊。當你不需要導航欄的時候，可以輕松的隱藏它，而將有限的屏幕空間用于顯示其他UI。

　　C1OutlookBar支持14種不同的外觀樣式。其實基本上所有的ComponentOne Studio的控件都可以通過設置幾個Brush屬性來適應各種樣式風格。這都要感謝ClearStyle技術。

　　控件結構

　　以一個最基本的例子來說，我們可以通過幾行簡單的XAML代碼創建一個C1OutlookBar。每一個Item包含4個主要屬性：Header，Content，LargeIcon以及SmallIcon。如下圖所示：

　　此外，還需要指定哪些內容在控件收起的時候可以顯示，這可以通過定義icon templates實現。下面的XAML代碼是上圖C1OutlookBar的全部代碼：

<c1:C1OutlookBar Name="c1OutlookBar1" ExpandedWidth="170" IsExpanded="True">
<!-- content shown when the bar is collapsed -->
<c1:C1OutlookBar.CollapsedContent>
<c1:C1LayoutTransformer>
<c1:C1LayoutTransformer.LayoutTransform>
<RotateTransform Angle="270" />
</c1:C1LayoutTransformer.LayoutTransform>
<TextBlock FontSize="13" TextAlignment="Center" VerticalAlignment="Center"
Text="Navigation Pane" />
</c1:C1LayoutTransformer>
</c1:C1OutlookBar.CollapsedContent>
<!-- define icon templates -->
<c1:C1OutlookBar.LargeIconTemplate>
<DataTemplate>
<Image Source="{Binding}" Width="24" Height="24" />
</DataTemplate>
</c1:C1OutlookBar.LargeIconTemplate>
<c1:C1OutlookBar.SmallIconTemplate>
<DataTemplate>
<Grid Height="24">
<Image Source="{Binding}" Width="16" Height="16" />
</Grid>
</DataTemplate>
</c1:C1OutlookBar.SmallIconTemplate>
<!-- items -->
<c1:C1OutlookItem Header="Home"

SmallIcon="Images/16/Home.png" LargeIcon="Images/24/Home.png">
<TextBlock Text="My Home" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="Files"

SmallIcon="Images/16/Cab1.png" LargeIcon="Images/24/Cab1.png">
<TextBlock Text="My Files" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="Sales"

SmallIcon="Images/16/ChartPie.png" LargeIcon="Images/24/ChartPie.png">
<TextBlock Text="My Sales" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="History" SmallIcon="Images/16/History.png&quot;

LargeIcon="Images/24/History.png">
<TextBlock Text="My History" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="Settings" SmallIcon="Images/16/User.png"

LargeIcon="Images/24/User.png">
<TextBlock Text="My Settings" />
</c1:C1OutlookItem>
</c1:C1OutlookBar>

　　頁面排布

　　當C1OutlookBar收起的時候，中間的content區域會自動展開，充滿空余的界面。尤其是當把C1OutlookBar放在Grid中 時，ColumnDefinition的寬度設置為Auto時，該功能支持的很好。同時初始化ExpandedWidth也很重要，當然了，這個屬性可以 在runtime修改。代碼如下：

<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<c1:C1OutlookBar ExpandedWidth="200" IsExpanded="True" />
</Grid>

　　工作在MVVM模式下

　　C1OutlookBar是一個ItemsControl。我們可以將ItemsSource設置給一個由ViewModel定義的列表。這種用例 下，我們還可以設置ItemTemplate，ContentTemplate。LargeIconTemplate以及 SmallIconTemplate。