Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Creating an Outlook Navigation Pane by Restyling a WPF TabControl

, 24 Jun 2008 CPOL
Restyling a standard TabControl to look like an Outlook Navigation Pane
codeproject.outlooknavi.zip
CodeProject.OutlookNavi
CodeProject.OutlookNavi
CodeProject.OutlookNavi.suo
CodeProject.OutlookNavi
bin
Debug
CodeProject.OutlookNavi.vshost.exe
CodeProject.OutlookNavi.vshost.exe.manifest
Properties
Settings.settings
<Window x:Class="CodeProject.OutlookNavi.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"       
    Title="Window1" Height="600" Width="800">
    <Window.Resources>
        <SolidColorBrush x:Key="OutlookButtonForeground" Color="#FF204D89"/>
        
        <LinearGradientBrush x:Key="OutlookButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFD9EDFF" Offset="0"/>
            <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
            <GradientStop Color="#FFC0D9FB" Offset="1"/>
            <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="OutlookButtonHighlight" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFBD69" Offset="0"/>
            <GradientStop Color="#FFFFB75A" Offset="0.0967"/>
            <GradientStop Color="#FFFFB14C" Offset="0.2580"/>
            <GradientStop Color="#FFFB8C3C" Offset="0.3870"/>
            <GradientStop Color="#FFFEB461" Offset="0.9677"/>
            <GradientStop Color="#FFFEBB67" Offset="1"/>
        </LinearGradientBrush>
        
        <Style x:Key="OutlookTabControlStyle" TargetType="{x:Type TabControl}">
            <Setter Property="Foreground" Value="{DynamicResource OutlookButtonForeground}"/>
            <Setter Property="Background" Value="{DynamicResource OutlookButtonBackground}"/>
            <Setter Property="BorderBrush" Value="{x:Static Microsoft_Windows_Themes:ClassicBorderDecorator.ClassicBorderBrush}"/>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="MinWidth" Value="10"/>
            <Setter Property="MinHeight" Value="10"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid ClipToBounds="true" SnapsToDevicePixels="true"
                      KeyboardNavigation.TabNavigation="Local">
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="ColumnDefinition0"/>
                                <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Grid x:Name="ContentPanel" Grid.Column="0" Grid.Row="1"
                        KeyboardNavigation.DirectionalNavigation="Contained"
                        KeyboardNavigation.TabIndex="2"
                        KeyboardNavigation.TabNavigation="Local">
                                <Microsoft_Windows_Themes:ClassicBorderDecorator
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderStyle="Raised"
                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <ContentPresenter SnapsToDevicePixels=
                            "{TemplateBinding SnapsToDevicePixels}" Margin="2,2,2,2"
                            x:Name="PART_SelectedContentHost"
                            ContentSource="SelectedContent"/>
                                </Microsoft_Windows_Themes:ClassicBorderDecorator>
                            </Grid>
                            <StackPanel HorizontalAlignment="Stretch" Margin="0,-2,0,0"
                    x:Name="HeaderPanel" VerticalAlignment="Bottom" Width="Auto" 
                Height="Auto" Grid.Row="1" IsItemsHost="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="Grid.Row"
                        TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Height"
                            TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height"
                            TargetName="RowDefinition1" Value="Auto"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="Grid.Row"
                            TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Grid.Column"
                            TargetName="ContentPanel" Value="1"/>
                                <Setter Property="Width"
                            TargetName="ColumnDefinition0" Value="Auto"/>
                                <Setter Property="Width"
                            TargetName="ColumnDefinition1" Value="*"/>
                                <Setter Property="Height"
                            TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height"
                            TargetName="RowDefinition1" Value="0"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="Grid.Row"
                            TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Grid.Column"
                            TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Width"
                            TargetName="ColumnDefinition0" Value="*"/>
                                <Setter Property="Width"
                            TargetName="ColumnDefinition1" Value="Auto"/>
                                <Setter Property="Height"
                            TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height"
                            TargetName="RowDefinition1" Value="0"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground"
                            Value="{DynamicResource
                            {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="OutlookTabItemStyle" TargetType="{x:Type TabItem}">
            <Setter Property="Padding" Value="12,2,12,2"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border SnapsToDevicePixels="true" x:Name="Bd"
                    Background="{TemplateBinding Background}"
                    BorderThickness="1" BorderBrush="#FF6593CF">
                            <ContentPresenter SnapsToDevicePixels=
                        "{TemplateBinding SnapsToDevicePixels}"
                        Margin="{TemplateBinding Padding}"
                VerticalAlignment="{Binding Path=VerticalContentAlignment,
                RelativeSource={RelativeSource AncestorType=
                        {x:Type ItemsControl}}}"
                ContentSource="Header" RecognizesAccessKey="True"
                            HorizontalAlignment="Left"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Setter Property="Background" TargetName="Bd"
                Value="{DynamicResource OutlookButtonHighlight}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>

        <TabControl VerticalAlignment="Stretch" Width="360" Height="Auto" TabStripPlacement="Bottom" Style="{DynamicResource OutlookTabControlStyle}" BorderBrush="#FF6593CF" HorizontalAlignment="Left" BorderThickness="1,1,1,0">
            <TabItem Header="Mail" Height="30" Style="{DynamicResource OutlookTabItemStyle}" Background="{DynamicResource OutlookButtonBackground}" Foreground="{DynamicResource OutlookButtonForeground}">
                <Grid/>
            </TabItem>
            <TabItem Header="Calendar" Height="30" Style="{DynamicResource OutlookTabItemStyle}" Background="{DynamicResource OutlookButtonBackground}" Foreground="{DynamicResource OutlookButtonForeground}">
                <Grid/>
            </TabItem>
            <TabItem Header="Contacts" Height="30" Style="{DynamicResource OutlookTabItemStyle}" Background="{DynamicResource OutlookButtonBackground}" Foreground="{DynamicResource OutlookButtonForeground}">
                <Grid/>
            </TabItem>
            <TabItem Header="Tasks" Height="30" Style="{DynamicResource OutlookTabItemStyle}" Background="{DynamicResource OutlookButtonBackground}" Foreground="{DynamicResource OutlookButtonForeground}">
                <Grid/>
            </TabItem>
        </TabControl>

    </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

rudigrobler

South Africa South Africa
No Biography provided

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 24 Jun 2008
Article Copyright 2008 by rudigrobler
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid