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" 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修改。代碼如下：

工作在MVVM模式下

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

原文：http://www.cnblogs.com/powertoolsteam/archive/2011/12/22/2297841.html

【編輯推薦】

1. Silverlight***動態和未來前景
2. 微軟正式發布Silverlight 5
3. 微軟能否撐起Silverlight的明天?
4. 基于Silverlight的網絡操作系統SilveOS
5. Silverlight企業應用開發實踐之AgileEAS.NET