<UserControl x:Class="OutlookBarSamples.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    xmlns:userControls="clr-namespace:OutlookBarSamples"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <c1:C1OutlookBar x:Name="c1OutlookBar1" Grid.Column="1" IsExpanded="True" FontFamily="Arial" MinWidth="36" ExpandedWidth="300" Dock="Left">

            <!-- content shown when the bar is collapsed -->
            <c1:C1OutlookBar.CollapsedContent>
                <c1:C1LayoutTransformer>
                    <c1:C1LayoutTransformer.LayoutTransform>
                        <RotateTransform Angle="270" />
                    </c1:C1LayoutTransformer.LayoutTransform>
                    <Border x:Name="transformerBorder">
                        <TextBlock FontSize="13" TextAlignment="Center" VerticalAlignment="Center" 
                                    Text="Navigation Pane" />
                    </Border>
                </c1:C1LayoutTransformer>
            </c1:C1OutlookBar.CollapsedContent>

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

            <!-- Inbox -->
            <c1:C1OutlookItem Header="Mail" LargeIcon="Resources/ico24x-mail.png" SmallIcon="Resources/ico16x-mail.png">
                <userControls:Inbox />
            </c1:C1OutlookItem>
		
		    <!-- Calendar -->
            <c1:C1OutlookItem Header="Calendar" LargeIcon="Resources/ico24x-calendar.png" SmallIcon="Resources/ico16x-calendar.png">
                <userControls:Calendar />
            </c1:C1OutlookItem>

            <!-- Contacts -->
            <c1:C1OutlookItem Header="Contacts" LargeIcon="Resources/ico24x-contacts.png" SmallIcon="Resources/ico16x-contacts.png">
                <userControls:Contacts />
            </c1:C1OutlookItem>

            <!-- Tasks -->
            <c1:C1OutlookItem Header="Tasks" LargeIcon="Resources/ico24x-task.png" SmallIcon="Resources/ico16x-task.png">
                <userControls:Tasks />
            </c1:C1OutlookItem>

            <!-- Notes -->
            <c1:C1OutlookItem Header="Notes" LargeIcon="Resources/ico24x-notes.png" SmallIcon="Resources/ico16x-notes.png">
                <userControls:Notes />
            </c1:C1OutlookItem>

        </c1:C1OutlookBar>
    </Grid>
</UserControl>
