<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="OutlookBarSamples.DemoOutlookBar" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" 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">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="300" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <c1:C1OutlookBar x:Name="c1OutlookBar1" Grid.Column="1" IsExpanded="True" FontFamily="Arial" MinWidth="36" ExpandedWidth="300">

            <!-- 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="Inbox" LargeIcon="Resources/Inbox24.png" SmallIcon="Resources/Inbox.png">
                <userControls:Inbox />
            </c1:C1OutlookItem>

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

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

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


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