This project is read-only.

Download

Download the User Guide

User Guide

There are two ways to use the Silverlight OutlookBar control. You can either use the source code as an additional project in your solution or else reference the compiled dll in you solution. These are demonstarted below. The Silverlight OutlookBar control can also be used with the Silverlight Business Application template. Click here to see how to use the Silverlight OutlookBar control in a Silverlight Business Application.

OutlookBarButtons can also be added dynamically at runtime. Click here to see how to dynamic sample.

Using the Project

In this demo we will be using C#. We will use VB in the compiled dll demo. Using Visual Studio 2010 and Silverlight 4, create a new C# Silverlight Application project and name it OutlookBarProjectDemo and accept the new Silverlight Application defaults.

Project_NewProjectDemo.png

Using Windows Explorer, navigate to where you downloaded the Silverlight OutlookBar custom control and copy the Silverlight.OutlookBar folder.

Project_OutlookBarFolder.png

Navigate to your newly created Silverlight Application. You will see two projects, OutlookBarProjectDemo and OutlookBarProjectDemo.Web.

Project_NewProjectDemoBeforeAddingOutlook.png

Paste the OutlookBar folder into this location. Your folder should now look like this:

Project_NewProjectDemoAfterAddingOutlook.png

Back in Visual Studio 2010, right click on the OutlookBarProjectDemo solution and select Add, then Existing Project.
Project_AddExistingProject.png

Navigate to the newly added OutlookBar folder (in my case it is in C:\Projects\OutlookBarProjectDemo\Silverlight.OutlookBar) and select Silverlight.OutlookBar.csproj. This adds the project to your solution. Your solution explorer now has three projects.

Project_SolutionExplorer.png

We now need to add a reference to this project from the OutlookBarProjectDemo project. In the OutlookBarProjectDemo project, right click on the References folder and select Add Reference.... In the Add Reference Dialog box, select the Projects tab, select Silverlight.OutlookBar and click OK. Compile the application. Visual Studio will add a Silverlight.OutlookBar Controls section of the Toolbox.

Project_ToolBoxCustomControls.png

We are now ready to use the OutlookBar control. In MainPage.xaml, change the design time Height and Width of the design surface from 300 and 400 to 600 and 800 respectively. i.e. change d:DesignHeight="300" d:DesignWidth="400" to d:DesignHeight="600" d:DesignWidth="800".

Click in the top margin of the grid about a third of the way along to divide the grid into two columns.

Project_AddColumn.png

From the Toolbox, drag an OutlookBar control onto the design surface.

Project_AddOutlookBar.png

Visual Studio 2010 will automatically add the xaml namespace xmlns:my=" clr-namespace:Silverlight.OutlookBar;assembly=Silverlight.OutlookBar " to MainPage.xaml.

Set the following properties on the OutlookBar
  • Width = 200
  • Height = Auto
  • HorizontalAlignment = Left
  • VerticalAlignment = Stretch
  • Margin = 0

Hover your mouse over the top margin of the column to which the Outlook control has been added and click on Auto.

Project_SetColumnToAuto.png

MainPage.xaml design surface should now look like this:

Project_MainPageWithoutOutlookButtons.png

We are now ready to add some OutlookBarButtons. At the moment this needs to be done in xaml. Go to the xaml view for MainPage.xaml and change the OutlookBar self closing tag to an open and close tag to allow content to be added. i.e. change from this

<my:OutlookBar Height="Auto" HorizontalAlignment="Left" Margin="0" Name="outlookBar1" VerticalAlignment="Stretch" Width="200" />

To this

<my:OutlookBar Height="Auto" HorizontalAlignment="Left" Margin="0" Name="outlookBar1" VerticalAlignment="Stretch" Width="200"></my:OutlookBar>

Drag an OutlookBarButton into the xaml and place in between the open and close tag. In xaml (but not the Properties Window) set the OutlookBarButton Header property to ‘Home’. Add another OutlookBarButton below the previous one and set its Header property to ‘Contacts’. The xaml should now look like this:

Project_MainPageXAMLWithOutlookButtons.png

Press F5 to run the application. Your webbrowser launches with the Silverlight application displaying the OutlookBar control. The Control has the Home OutlookBarButton selected and the Header for this is displayed in the Header for the OutlookBar. Mouse over the Contacts OutlookBarButton and note the animation. Click on the Contacts OutlookBarButton to select it and note that the OutlookBar Header has change to the details of the Contacts OutlookBarButton.

Project_OutlookBarWithoutContentInUse.png

There are two things still to do. The first is that Outlook displays icons next to the text in the buttons. It’s time to add those to our application. Close the webbrowser to stop the application. Right click on the OutlookBarProjectDemo project, select Add, then New Folder. Name the folder Images. Using Windows Explorer, navigate to where you downloaded the Silverlight OutlookBar custom control and open up the Silverlight.OutlookBar.TestClient folder, then open up the Images folder. Copy all the images to your clipboard. Back in Visual Studio, right click on the newly created Images folder and paste the images from your clipboard. Your Solution Explorer should now look like this:

Project_SolutionExplorerWithImages.png

In xaml (not the Properties Window) set the OutlookBarButton HeaderImage property for the ‘Home’ button as follows:

HeaderImage="/OutlookBarProjectDemo;component/Images/Home.png"

Set the OutlookBarButton HeaderImage property for the ‘Contacts’ button as follows:

HeaderImage="/OutlookBarProjectDemo;component/Images/Persons.png"

The design view of HomePage.xaml should now display these images in the OutlookBarButtons.

Project_ImagesAddedToOutlookBarButtons.png

The second thing we need to do is add some content for each OutlookBarButton.
In xaml view, change the self closing tags of the OutlookBarButtons to open and close tags. Add a ScrollViewer to each OutlookBarButton. Inside each ScrollViewer, add a StackPanel with and open and close tags.

Project_OutlookBarButtonWithContentHolders.png

Add the following to the Home OutlookBarButton StackPanel:

<TextBlock Text="This is the Home Content" />
<Button Content="Do Something" />
<Button Content="Do Something Else" />

... and the following to the Contacts OutlookBarButton StackPanel:

<TextBlock Text="This is the Contacts Content" />
<ListBox>
<ListBoxItem Content="Andrew Adams" />
<ListBoxItem Content="Betty Baites" />
<ListBoxItem Content="Conrad Caines" />
<ListBoxItem Content="Dorothy Davies" />
</ListBox>


The xaml for the OutlookBar should now look like this:

Project_OutlookBarButtonWithContent.png

Press F5 to run the application. Your webbrowser launches with the Silverlight application displaying the OutlookBar control. This time, both OutlookBarButtons have images and content.

Project_OutlookBarDemoHome.png


Project_OutlookBarDemoContacts.png

Download the Sample Code OutlookBarProjectDemo.zip

Use the dll

In this demo we will be using VB. We used C# in the projects demo. Using Visual Studio 2010 and Silverlight 4, create a new VB Silverlight Application project and name it OutlookBarDLLDemo and accept the new Silverlight Application defaults.

dll_NewProjectDemo.png

Using Windows Explorer, navigate to where you downloaded the Silverlight OutlookBar custom control and open the Silverlight.OutlookBar folder, then the Bin folder, then the Debug folder. Copy the Silverlight.OutlookBar.dll assembly to your clipboard.

dll_OutlookBarFolder.png

Back in Visual Studio 2010, right click on the OutlookBarDLLDemo solution and select Add, then New Folder.

dll_AddNewFolder.png

Name the new folder Lib. Right click on the Lib folder and paste the Silverlight.OutlookBar.dll. Your solution explorer should now look like this:

dll_SolutionExplorer.png

We now need to add a reference to this dll from the OutlookBarDLLDemo project. Right click on the OutlookBarDLLDemo project and select Add Reference.... In the Add Reference Dialog box, select the Browse tab, navigate to the dll in the Lib folder, select it and click OK. Compile the application.

dll_AddReference.png

We are now ready to use the OutlookBar control. In MainPage.xaml, change the design time Height and Width of the design surface from 300 and 400 to 600 and 800 respectively. i.e. change d:DesignHeight="300" d:DesignWidth="400" to d:DesignHeight="600" d:DesignWidth="800".

In xaml view of MainPage.xaml, add the following namespace

xmlns:outlook="clr-namespace:Silverlight.OutlookBar;assembly=Silverlight.OutlookBar"

Then, inside the Grid on MainPage.xaml, add two columns as shown below:

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>


Then add an OutlookBar to the first column with the following properties:
  • Name = outlookBar1
  • Width = 200
  • Height = Auto
  • HorizontalAlignment = Left
  • VerticalAlignment = Stretch
  • Margin = 0
*Grid.Column = 0

The xaml for the Outlook control looks like this:

<outlook:OutlookBar x:Name="outlookBar1" HorizontalAlignment="Left"
VerticalAlignment="Stretch" Width="200" Margin="0"
Grid.Column="0"></outlook:OutlookBar>

MainPage.xaml xaml view should now look like this:

dll_MainPageXAMLWithoutOutlookButtons.png

MainPage.xaml design surface should now look like this:

dll_MainPageWithoutOutlookButtons.png

We are now ready to add some OutlookBarButtons. At the moment this needs to be done in xaml. Add an OutlookBarButton in the xaml in between the open and close tag of the OutlookBar. Set the OutlookBarButton Header property to ‘Home’. Add another OutlookBarButton below the previous one and set its Header property to ‘Contacts’.

The xaml should now look like this:

dll_MainPageXAMLWithOutlookButtons.png

Press F5 to run the application. Your webbrowser launches with the Silverlight application displaying the OutlookBar control. The Control has the Home OutlookBarButton selected and the Header for this is displayed in the Header for the OutlookBar. Mouse over the Contacts OutlookBarButton and note the animation. Click on the Contacts OutlookBarButton to select it and note that the OutlookBar Header has change to the details of the Contacts OutlookBarButton.

dll_OutlookBarWithoutContentInUse.png

There are two things still to do. The first is that Outlook displays icons next to the text in the buttons. It’s time to add those to our application. Close the webbrowser to stop the application. Right click on the OutlookBarDLLDemo project, select Add, then New Folder. Name the folder Images. Using Windows Explorer, navigate to where you downloaded the Silverlight OutlookBar custom control and open up the Silverlight.OutlookBar.TestClient folder, then open up the Images folder. Copy all the images to your clipboard. Back in Visual Studio, right click on the newly created Images folder and paste the images from your clipboard. Your Solution Explorer should now look like this:

dll_SolutionExplorerWithImages.png


In xaml (not the Properties Window) set the OutlookBarButton HeaderImage property for the ‘Home’ button as follows:

HeaderImage="/OutlookBarDLLDemo;component/Images/Home.png"

Set the OutlookBarButton HeaderImage property for the ‘Contacts’ button as follows:

HeaderImage="/OutlookBarDLLDemo;component/Images/Persons.png"

The design view of HomePage.xaml should now display these images in the OutlookBarButtons.

dll_ImagesAddedToOutlookBarButtons.png

The second thing we need to do is add some content for each OutlookBarButton.
In xaml view add a ScrollViewer to each OutlookBarButton and set the VerticalScrollBarVisibility property to Auto. Inside each ScrollViewer, add a StackPanel with and open and close tags.


Add the following to the Home OutlookBarButton StackPanel:

<TextBlock Text="This is the Home Content" />
<Button Content="Do Something" />
<Button Content="Do Something Else" />

... and the following to the Contacts OutlookBarButton StackPanel:

<TextBlock Text="This is the Contacts Content" />
<ListBox>
<ListBoxItem Content="Andrew Adams" />
<ListBoxItem Content="Betty Baites" />
<ListBoxItem Content="Conrad Caines" />
<ListBoxItem Content="Dorothy Davies" />
</ListBox>


The xaml for the OutlookBar should now look like this:

dll_OutlookBarButtonWithContent.png

Press F5 to run the application. Your webbrowser launches with the Silverlight application displaying the OutlookBar control. This time, both OutlookBarButtons have images and content.

dll_OutlookBarDemoHome.png


dll_OutlookBarDemoContacts.png

Download the Sample Code OutlookBarDLLDemo.zip

Last edited Aug 15, 2010 at 8:07 AM by delordson, version 30

Comments

No comments yet.