# XAML Quick Reference

## Content



This topic is dedicated to providing a quick overview of the XAML used to create a [C1OutlookBar](/componentone/api/wpf/online-outlookbar/dotnet-framework-api/C1.WPF.OutlookBar.4.6.2/C1.WPF.OutlookBar.C1OutlookBar.html) and [C1OutlookItem](/componentone/api/wpf/online-outlookbar/dotnet-framework-api/C1.WPF.OutlookBar.4.6.2/C1.WPF.OutlookBar.C1OutlookItem.html).

To get started developing, add a **c1** namespace declaration in the root element tag:

```auto
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
```

Here is an example of a very basic [C1OutlookBar](/componentone/api/wpf/online-outlookbar/dotnet-framework-api/C1.WPF.OutlookBar.4.6.2/C1.WPF.OutlookBar.C1OutlookBar.html) with multiple [C1OutlookBar](/componentone/api/wpf/online-outlookbar/dotnet-framework-api/C1.WPF.OutlookBar.4.6.2/C1.WPF.OutlookBar.C1OutlookBar.html) items.

```xml
<c1:C1OutlookBar>
              <c1:C1OutlookItem />
              <c1:C1OutlookItem />
              <c1:C1OutlookItem />
</c1:C1OutlookBar>
```

Below is the XAML for a more detailed example of an [C1OutlookBar](/componentone/api/wpf/online-outlookbar/dotnet-framework-api/C1.WPF.OutlookBar.4.6.2/C1.WPF.OutlookBar.C1OutlookBar.html) with multiple [C1OutlookItem](/componentone/api/wpf/online-outlookbar/dotnet-framework-api/C1.WPF.OutlookBar.4.6.2/C1.WPF.OutlookBar.C1OutlookItem.html)s containing icons:

```xml
<c1:C1OutlookBar IsExpanded="True" FontFamily="Arial" MinWidth="36" ExpandedWidth="300" c1:C1NagScreen.Nag="True">
      <!-- Inbox -->
        <c1:C1OutlookItem Header="Inbox" LargeIcon="Resources/Inbox24.png" SmallIcon="Resources/Inbox.png" c1:C1NagScreen.Nag="True">
            <userControls:Inbox/>
        </c1:C1OutlookItem>
        <!-- Contacts -->
        <c1:C1OutlookItem Header="Contacts" LargeIcon="Resources/Contacts24.png" SmallIcon="Resources/Contacts.png" c1:C1NagScreen.Nag="True">
            <userControls:Contacts/>
        </c1:C1OutlookItem>
        <!-- Tasks -->
        <c1:C1OutlookItem Header="Tasks" LargeIcon="Resources/Tasks24.png" SmallIcon="Resources/Tasks.png" c1:C1NagScreen.Nag="True">
            <userControls:Tasks/>
        </c1:C1OutlookItem>
        <!-- Notes -->
        <c1:C1OutlookItem Header="Notes" LargeIcon="Resources/Notes24.png" SmallIcon="Resources/Notes.png" c1:C1NagScreen.Nag="True">
            <userControls:Notes/>
        </c1:C1OutlookItem>
    </c1:C1OutlookBar>
```

This XAML results in the following:

![](https://cdn.mescius.io/document-site-files/images/db635c5e-6066-484d-b52e-211cb3bb2abd/imagesext/image12_1.png)