Click here to Skip to main content
15,896,387 members
Articles / Desktop Programming / WPF

Creating an Outlook Navigation Pane by Restyling a WPF TabControl

Rate me:
Please Sign up or sign in to vote.
4.67/5 (52 votes)
24 Jun 2008CPOL4 min read 268.4K   8.5K   192  
Restyling a standard TabControl to look like an Outlook Navigation Pane
<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)


Written By
South Africa South Africa
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions