Adding xamOutlookBar to Your Application

Before You Begin

You can add xamOutlookBar™ to a Window using the same pattern as any control found in Microsoft® Windows® Presentation Foundation. This pattern involves using a layout container as the main content of the Window and then adding the control to the Children collection of the layout container. It is important to name the layout container in XAML so that you can reference it from the code-behind.

What You Will Accomplish

You will add xamOutlookBar to a Window using procedural code or XAML.

When you run the finished project, you should see a xamOutlookBar control in your Window that looks similar to the screen shot below.

xamOutlookBar Adding xamOutlookBar to a Window Using Procedural Code 01.png

Follow these Steps

Create a Microsoft® Windows® Presentation Foundation Window project.

Add the following NuGet package reference to your application:
- Infragistics.WPF.OutlookBar
For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Add an XML namespace declaration for xamOutlookBar inside the opening Window tag in XAML. In code-behind you will need using/Imports directives so you don’t have to type out a member’s fully qualified name.

In XAML:
```
xmlns:igOutlookBar="http://infragistics.com/OutlookBar"
```
In Visual Basic:
```
Imports Infragistics.Windows.OutlookBar
```
In C#:
```
using Infragistics.Windows.OutlookBar;
```

Name the default Grid layout panel in the Window so that you can reference it in the code-behind.

In XAML:
```
<Grid Name="layoutRoot">
</Grid>
```

Add an instance of xamOutlookBar to the layoutRoot Grid layout panel.
1. Name the instance of the xamOutlookBar control.
2. Set the HorizontalAlignment property to Left.
  
  When you collapse xamOutlookBar’s navigation pane, the Grid layout panel will automatically center the navigation pane. This behavior may not be what you want if you are trying to emulate the navigation pane in Microsoft® Outlook®. In order to keep xamOutlookBar’s navigation pane attached to an edge of the Grid layout panel, you have to set its HorizontalAlignment property to Left or use a different layout panel such as a DockPanel layout container instead of the Grid layout container.
In XAML:
```
<igOutlookBar:XamOutlookBar Name="xamOutlookBar1" HorizontalAlignment="Left">
    
</igOutlookBar:XamOutlookBar>
```
Create an instance of the xamOutlookBar control in the Window constructor after the InitializeComponent method and add it to the Grid’s Children collection.

In Visual Basic:
```
Dim xamOutlookBar1 As New XamOutlookBar()
xamOutlookBar1.HorizontalAlignment = HorizontalAlignment.Left
Me.layoutRoot.Children.Add(xamOutlookBar1)
```
In C#:
```
XamOutlookBar xamOutlookBar1 = new XamOutlookBar();
xamOutlookBar1.HorizontalAlignment = HorizontalAlignment.Left;
this.layoutRoot.Children.Add(xamOutlookBar1);
```

Add an OutlookBarGroup object to xamOutlookBar’s Groups collection.

You do not have to explicitly declare tags for xamOutlookBar’s Groups collection.

Header property - Set this property to display a value in the header of the group.
Key property - Set this property to index into the Groups collection using a string value.
LargeImage property - Set this property to display an icon next to the group header.
SmallImage property - Set this property to display an icon for the group when it is in the overflow area. If you do not set this property, xamOutlookBar will display a default envelope icon when the group is in the overflow area.

In XAML:

<igOutlookBar:OutlookBarGroup
    Header="Group 1"
    Key="Group1"
    SmallImage="ReplaceWithYourImage1.jpg"
    LargeImage="ReplaceWithYourImage2.jpg">
    <!-- TODO: Add a layout panel here -->
</igOutlookBar:OutlookBarGroup>

In Visual Basic:

Dim group1 As New OutlookBarGroup()
group1.Header = "Group 1"
group1.Key = "Group1"
group1.LargeImage = New BitmapImage(New Uri("ReplaceWithYourImage1.jpg"))
group1.SmallImage = New BitmapImage(New Uri("ReplaceWithYourImage2.jpg"))
xamOutlookBar1.Groups.Add(group1)

In C#:

OutlookBarGroup group1 = new OutlookBarGroup();
group1.Header = "Group 1";
group1.Key = "Group1";
group1.LargeImage = new BitmapImage(new Uri("ReplaceWithYourImage1.jpg"));
group1.SmallImage = new BitmapImage(new Uri("ReplaceWithYourImage2.jpg"));
xamOutlookBar1.Groups.Add(group1);

Set the Content property of the OutlookBarGroup object to an instance of a StackPanel.

In XAML:

<StackPanel>
    <!-- TODO: Add controls here -->
</StackPanel>

In Visual Basic:

Dim panel1 As New StackPanel()
group1.Content = panel1

In C#:

StackPanel panel1 = new StackPanel();
group1.Content = panel1;

Add controls to the StackPanel. In this example, three Button controls will be added to the group.

In XAML:

<Button Content="Button 1" />
<Button Content="Button 2" />
<Button Content="Button 3" />

In Visual Basic:

For i As Integer = 1 To 3
    Dim btnExample As New Button()
    btnExample.Content = "Button " + i.ToString()
    panel1.Children.Add(btnExample)
Next

In C#:

for (int i = 1; i <=3; i++)
{
    Button btnExample = new Button();
    btnExample.Content = "Button " + i.ToString();
    panel1.Children.Add(btnExample);
}

Run the project.

WPF | Help Topics

Adding xamOutlookBar to Your Application

Before You Begin

What You Will Accomplish

Follow these Steps

Related Topics