Silverlight 版 C1OutlookBar 初體驗

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

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