Early experiences of C1OutlookBar for Silverlight

The c1OutlookBar Control for Silverlight and WPF is added to ComponentOne 2011 v3. It corresponds to the C1NavBar of WinForms. Because "OutlookBar" is more appropriate and accurate, we use this name on the XAML platform. There are Outlook2007 and 2010 styles.

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image002 "border =" 0 "alt =" clip_image002 "width =" 580 "height =" 360 "src =" http://www.bkjia.com/uploads/allimg/131228/1QI533E-0.jpg "/>

OutlookBar is similar to a TabControl. You can select any Item in the Content panel. You can create a category for them by priority. You can drag and drop the OutlookBar to collapse or expand projects. In this way, you can easily customize the items displayed and which are minimized to the bottom menu. :

650) this. width = 650; "style =" display: inline "title =" clip_image003 "alt =" clip_image003 "height =" 340 "src =" http://www.bkjia.com/uploads/allimg/131228/1QI52141-1.gif "/>

The entire control can be minimized to the leftmost or rightmost. When you do not need the navigation bar, you can easily hide it and use limited screen space to display other UIS.

C1OutlookBar supports 14 different exterior styles. In fact, basically all ComponentOne Studio controls can adapt to various style by setting several Brush attributes. Thanks to ClearStyle technology.

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image005 "border =" 0 "alt =" clip_image005 "width =" 580 "height =" 500 "src =" http://www.bkjia.com/uploads/allimg/131228/1QI53264-2.jpg "/>

 

Control Structure

In the most basic example, we can create a C1OutlookBar using several lines of simple XAML code. Each Item contains four main attributes: Header, Content, LargeIcon, and SmallIcon. As shown in:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image007 "border =" 0 "alt =" clip_image007 "width =" 580 "height =" 238 "src =" http://www.bkjia.com/uploads/allimg/131228/1QI52Z0-3.jpg "/>

In addition, you need to specify the content that can be displayed when the control is collapsed, which can be achieved by defining the icon templates. The following XAML code is the full code of C1OutlookBar:

 

 
 

  
  
<c1:C1OutlookBar Name="c1OutlookBar1" Expanded;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}" ;24" Height="24" />  
  
  
        </DataTemplate>  
  
  
    </c1:C1OutlookBar.LargeIconTemplate>  
  
  
    <c1:C1OutlookBar.SmallIconTemplate>  
  
  
        <DataTemplate>  
  
  
            <Grid Height="24">  
  
  
                <Image Source="{Binding}" ;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 C1OutlookBar is collapsed, the content area in the middle is automatically expanded, and the interface is full of free space. This function is well supported, especially when the C1OutlookBar is placed in the Grid and the ColumnDefinition width is set to Auto. It is also important to initialize ExpandedWidth. Of course, this attribute can be modified at runtime. The Code is as follows:

 
 

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

650) this. width = 650; "style =" display: inline "title =" clip_image001 "alt =" clip_image001 "height =" 340 "src =" http://www.bkjia.com/uploads/allimg/131228/1QI54E8-4.gif "/>

 

Working in MVVM Mode

C1OutlookBar is an ItemsControl. We can set ItemsSource to a list defined by ViewModel. In this case, we can also set ItemTemplate and ContentTemplate. LargeIconTemplate and SmallIconTemplate.

 

For more functions, download Studio for Silverlight or Studio for WPF.

This article from the "grape city control blog" blog, please be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/748550