ComponentOne 2011 v3版本中新增了Silverlight版本和WPF版本的c1OutlookBar控件。它對(duì)應(yīng)的是WinForms版本的C1NavBar。因?yàn)?ldquo;OutlookBar”更貼切也更準(zhǔn)確，所以我們?cè)赬AML平臺(tái)下使用了這個(gè)名字。有Outlook2007和2010樣式。

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

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

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

控件結(jié)構(gòu)

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

此外，還需要指定哪些內(nèi)容在控件收起的時(shí)候可以顯示，這可以通過定義icon templates實(shí)現(xiàn)。下面的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> 

頁面排布

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

工作在MVVM模式下

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

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

【編輯推薦】

1. Silverlight***動(dòng)態(tài)和未來前景
2. 微軟正式發(fā)布Silverlight 5
3. 微軟能否撐起Silverlight的明天?
4. 基于Silverlight的網(wǎng)絡(luò)操作系統(tǒng)SilveOS
5. Silverlight企業(yè)應(yīng)用開發(fā)實(shí)踐之AgileEAS.NET