First Look at C1OutlookBar

One of our new controls in the 2011 v3 release is the C1OutlookBar in Studio for Silverlight and WPF. This control also goes by the name of C1NavBar in our Studio for WinForms. We found that "OutlookBar" was a more accurate and community-accepted name so we decided to go with this one in the XAML platforms. With C1OutlookBar, you can exactly replicate the navigation pane in Microsoft Outlook 2007 and 2010. See a live demo. An OutlookBar control works like a TabControl, in that you have a selectable header and a content panel for each item. What makes it truly unique is that you can establish two classifications of items: more important and less important. The OutlookBar has the ability to collapse items from a large list to a small list by dragging a splitter bar at runtime, thus enabling some items to appear more important than others. The run-time customization also gives this power to the end-user. Users can minimize or hide items from view. The entire control can be easily collapsed to the left or right side. This nice little feature gives the user the ability to hide the control if they do not need to navigate often and thus give more screen real estate to the meat of the application. The C1OutlookBar control supports 14 different looks out-of-the-box (Silverlight). Plus, like all of our controls, you can quickly customize the colors by just setting a few Brush properties in Visual Studio thanks to ClearStyle technology.

Control Structure

For the most basic implementation, the C1OutlookBar can be constructed in XAML with minimal code. Each item has four key parts: Header, Content, LargeIcon and SmallIcon. You also need to specify content to display when the control is collapsed, as well as define the icon templates. Here is the entire XAML for the C1OutlookBar above.

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

Page Layout

When the C1OutlookBar is collapsed at run-time, the central content of your page should expand to fill the open space. This can be best accomplished by placing the C1OutlookBar in a Grid control with the ColumnDefinition Width set to "Auto." It's also important to specify the initial ExpandedWidth property on the control. The control's expanded width can be re-sized at run-time too.

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

Working in MVVM

The C1OutlookBar is a true ItemsControl. You can set the ItemsSource to a list of ViewModel defined items. In this scenario you would define the ItemTemplate (which is basically the Text you see on each button) and the ContentTemplate, as well as LargeIconTemplate and SmallIconTemplate.