wpf仿outlook样式模板

delphidoc

<!--
     How to turn a TabControl into an Outlook Bar
     Demo By Richard Matheson, July 2008
     This code is licensed under the Code Project Open License.
-->
<!-- The easiest way to view the output of this page is to open in in IE or FireFox.
     To edit it you can copy and paste it into XAMLPad or load it into Visual Studio. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Page.Resources>
    <ControlTemplate x:Key="OutlookTab" TargetType="{x:Type TabControl}">
      <ControlTemplate.Resources>
        <!-- To change the colour scheme of the Outlook Bar, change the colors of these brushes -->
        <SolidColorBrush x:Key="LabelHighlightBrush" Color= "#FFFFFF" />
        <SolidColorBrush x:Key="CaptionBrush" Color= "#15428B" />
        <SolidColorBrush x:Key="BorderBrush" Color="#6593CF" />
        <LinearGradientBrush x:Key="LabelBrush" StartPoint="0, 0" EndPoint="0,1">
          <GradientStop Color="#E3EFFF" Offset="0" />
          <GradientStop Color="#AFD2FF" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ButtonNormalBrush" StartPoint="0, 0" EndPoint="0,1">
          <GradientStop Color="#E3EFFF" Offset="0" />
          <GradientStop Color="#C4DDFF" Offset="0.40625" />
          <GradientStop Color="#ADD1FF" Offset="0.40625" />
          <GradientStop Color="#C0DBFF" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ButtonSelectedBrush" StartPoint="0, 0" EndPoint="0,1">
          <GradientStop Color="#FFD9AA" Offset="0" />
          <GradientStop Color="#FFBB6E" Offset="0.40625" />
          <GradientStop Color="#FFAB3F" Offset="0.40625" />
          <GradientStop Color="#FEE17A" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ButtonPressedBrush" StartPoint="0, 0" EndPoint="0,1">
          <GradientStop Color="#FFBD69" Offset="0" />
          <GradientStop Color="#FFAC42" Offset="0.40625" />
          <GradientStop Color="#FB8C3C" Offset="0.40625" />
          <GradientStop Color="#FED364" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ButtonHoverBrush" StartPoint="0, 0" EndPoint="0,1">
          <GradientStop Color="#FFFEE4" Offset="0" />
          <GradientStop Color="#FFE8A7" Offset="0.40625" />
          <GradientStop Color="#FFD767" Offset="0.40625" />
          <GradientStop Color="#FFE69E" Offset="1" />
        </LinearGradientBrush>
        <!-- This style sets the default template for a TabItem -->
        <Style TargetType="{x:Type TabItem}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type TabItem}">
                <!-- These triggers control the background and text colour of the Outlook bar buttons when the are selected and/or hovered over -->
                <ControlTemplate.Triggers>
                  <MultiTrigger>
                    <MultiTrigger.Conditions>
                      <Condition Property="IsSelected" Value="False" />
                      <Condition Property="IsMouseOver" Value="False" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                      <Setter Property="Background" Value="{StaticResource ButtonNormalBrush}" />
                    </MultiTrigger.Setters>
                  </MultiTrigger>
                  <MultiTrigger>
                    <MultiTrigger.Conditions>
                      <Condition Property="IsSelected" Value="False" />
                      <Condition Property="IsMouseOver" Value="True" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                      <Setter Property="Background" Value="{StaticResource ButtonHoverBrush}" />
                    </MultiTrigger.Setters>
                  </MultiTrigger>
                  <Trigger Property="IsSelected" Value="True">
                    <Setter Property="TextElement.Foreground" Value="Black" />
                    <Setter Property="Background" Value="{StaticResource ButtonSelectedBrush}" />
                  </Trigger>
                  <Trigger Property="IsSelected" Value="False">
                    <Setter Property="TextElement.Foreground" Value="{StaticResource CaptionBrush}" />
                  </Trigger>
                  <MultiTrigger>
                    <MultiTrigger.Conditions>
                      <Condition Property="IsSelected" Value="True" />
                      <Condition Property="IsMouseOver" Value="True" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                      <Setter Property="Background" Value="{StaticResource ButtonPressedBrush}" />
                    </MultiTrigger.Setters>
                  </MultiTrigger>
                </ControlTemplate.Triggers>
                <!-- This defines the look of the individual TabItems -->
                <Grid Background="{TemplateBinding Background}" MinHeight="32" SnapsToDevicePixels="True">
                  <Line Stroke="{StaticResource BorderBrush}" VerticalAlignment="Top" Stretch="Fill" X2="1" SnapsToDevicePixels="True" />
                  <ContentPresenter Margin="5,0,5,0" TextBlock.FontFamily="Tahoma" TextBlock.FontSize="8pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="{StaticResource CaptionBrush}" Content="{TemplateBinding Header}" VerticalAlignment="Center"/>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ControlTemplate.Resources>
    <!-- This is the template for the TabControl itself -->
    <Border BorderBrush="{StaticResource BorderBrush}" BorderThickness="1" SnapsToDevicePixels="True" >
      <DockPanel>
        <!-- This is the host panel that contains the tab items -->
        <StackPanel DockPanel.Dock="Bottom" IsItemsHost="True" />
        <!-- This is the label that appears at the top of the TabControl -->
        <Grid DockPanel.Dock="Top" MinHeight="28" Background="{StaticResource ButtonNormalBrush}"  SnapsToDevicePixels="True">
          <TextBlock FontFamily="Tahoma" Foreground="{StaticResource CaptionBrush}" VerticalAlignment="Center" Margin="5,0" FontSize="18" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource AncestorType=TabControl}, Path=SelectedItem.Header}"/>
          <Line Stroke="{StaticResource BorderBrush}" VerticalAlignment="Bottom" X2="1" Stretch="Fill"/>
        </Grid>
        <!-- This is the selected content pane that appears in the Outlook Bar -->
        <ContentPresenter Content="{TemplateBinding SelectedContent}" />
      </DockPanel>
    </Border>
  </ControlTemplate>
  </Page.Resources>
  <!-- This is the tabcontrol itself. You can remove the template attribute to see what it looks like unstyled. -->
  <TabControl Name="monkey" Template="{StaticResource OutlookTab}">
    <TabItem  Header="Mail1" IsSelected="True">
      <ListBox BorderThickness="0">
        <ListBoxItem>Your mail here.</ListBoxItem>
      </ListBox>
    </TabItem>
    <TabItem Header="Calendar">
          <ListBox BorderThickness="0">
        <ListBoxItem>Your Calendar here.</ListBoxItem>
      </ListBox>
    </TabItem>
    <TabItem  Header="Tasks">
    </TabItem>
  </TabControl>
</Page>