Michael Stone

Michael Stone

  • Name: Michael Stone
  • Favorite Languages: C#
  • Website: [not set]
  • Location: USA
  • About Me: [not set]

Recent Comments

  • The WPF Tab Control - Inside and Out
    03/11/2009 - 10:21

    Re: Triggers
    Don't need two. The property automatically resets itself when the condition is no longer met.

    Re: Hairline border
    Two things:
    1st - remove bottom border on selected, as Kevin suggested.
    2nd - add SnapToDevicePixels on the tab and control borders. The hair line is anti-aliasing effects.

    The whole thing I put together:

    <Window x:Class="TabControl.Window1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="Window1" Height="300" Width="300">
        <Window.Resources>
            <Style  TargetType="{x:Type TabControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TabPanel
                                    Grid.Row="0"
                                    Panel.ZIndex="1"
                                    Margin="0,0,4,-1"
                                    IsItemsHost="True"
                                    Background="Transparent" />
                                <Border
                                    Grid.Row="1"
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    CornerRadius="0, 12, 12, 12"
                                    SnapsToDevicePixels="True">
                                    <Border.Background>
                                        <LinearGradientBrush>
                                            <GradientStop Color="LightBlue" Offset="0" />
                                            <GradientStop Color="White" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <ContentPresenter ContentSource="SelectedContent" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
           
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border
                                Name="Border"
                                Background="LightGray"
                                BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="6,6,0,0"
                                SnapsToDevicePixels="True">
                                <ContentPresenter x:Name="ContentSite"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"
                                  ContentSource="Header"
                                  Margin="12,2,12,2"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="LightBlue" />
                                    <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>

        <Grid Margin="5">
            <TabControl>
                <TabItem Header="Cheese">
                    The Cheese Tab
                </TabItem>
                <TabItem Header="Pepperoni">
                    The Pepperoni Tab
                </TabItem>
                <TabItem Header="Mushrooms">
                    The Mushrooms Tab
                </TabItem>
            </TabControl>
        </Grid>
    </Window>

Sponsors