We are happy to announce the availability of VIBlend Silverlight Controls 6.0.  The newest version of VIBlend Silverlight Controls includes a set of new Metro UI Themes - Metro Blue, Metro Green and Metro Orange themes.

In the new release of VIBlend Controls for Silverlight, we added several new controls. One of them is the OutlookPane control. In this blog post we show you how to add any control as a content to it.

At first you need to add references to the NavigationPanes.dll, VIBlendUtilities.dll and Extensions.dll in order to use the OutlookPane and Calendar controls. Then you should create the DataTemplates for the OutlookPane items. The CalendarTemplate simply adds an Image on the left side of a TextBlock. In the source code below, this template is used to define the look of the OutlookPaneItem’s header. The other data template is the ShortCalendarTemplate which is used when the OutlookPaneItem is collapsed or  shown in the OutlookPane’s status area.  After the creation of the DataTemplates,  you should add a new instance of the OutlookPane control and insert a new OutlookPaneItem to it. Finally, put a new Calendar control as a content of the OutlookPaneItem.

Source Code:

<Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <DataTemplate x:Name="CalendarTemplate">
              <StackPanel Orientation="Horizontal">
                    <Image Margin="2" Width="18" HorizontalAlignment="Left" Height="18" Source="calendarIcon.png"></Image>
                    <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold" Text="Calendar"></TextBlock>
            </StackPanel>
            </DataTemplate>
            <DataTemplate x:Name="ShortCalendarTemplate">
                <Image Margin="2" Width="18" HorizontalAlignment="Left" Height="18" Source="calendarIcon.png"></Image>
            </DataTemplate>     
        </Grid.Resources>
        <viblend:OutlookPane Width="250" Height="300" VerticalAlignment="Center" HorizontalAlignment="Center">
                <viblend:OutlookPaneItem IsSelected="True" MenuItemHeader="Calendar" CollapsedDefaultHeaderTemplate="{StaticResource ShortCalendarTemplate}" 
                                             CollapsedStatusContentTemplate="{StaticResource ShortCalendarTemplate}"
                                             DisplayHeader="Calendar"
                                             DefaultHeaderTemplate="{StaticResource CalendarTemplate}"
                                   >
                <toolkit:Calendar VerticalAlignment="Center" HorizontalAlignment="Center"></toolkit:Calendar>
            </viblend:OutlookPaneItem>
        </viblend:OutlookPane>
  </Grid>

Here is the result: