Tab Control

Dec 28, 2008 at 8:13 AM
I just found WPF Themes and think they are really awesome.  So awesome, in fact, that I couldn't wait to implement them on a project I've been working on.  Unfortunately WPF Themes don't seem to work with tabcontrols.  When I added the appropriate code, I ran my app and everything was gone except the menu bar at the top.  All of my content that was housed inside the tabcontrol didn't appear.  Any items placed outside the tabcontrol worked and were themed just fine.  I really hope this gets resolved.  I would love to be able to use WPF Themes in this app.
Coordinator
Jan 5, 2009 at 12:27 PM
Hi psmak4,

I havent had time to finsih tab contols yet... will try and get them done asap...

Thanks for the kind words and support

Regards,

Rudi
Jan 27, 2009 at 2:57 AM
Edited Jan 29, 2009 at 10:38 PM
Rudi et al,

I love the Expression Dark theme and have been using it in a small utility app I'm creating.  I needed a Tab theme and so have created one using your color pallette.  I tried following the Expression look - though there are a couple of controls with slightly different tabbed looks.  I decided to model the right hand property panels as tabs. I only needed to add two colors for the default and highlited tab item header.  I hope this helps someone else out -- and thanks for all the help from your theme.


<!--EXPRESSION DARK VALUES FOR TAB ITEMS-->
<SolidColorBrush x:Key="NormalTabItemBrush" Color="#FF3A3A3A" />
<SolidColorBrush x:Key="HoveredTabItemBrush" Color="#FF424242" />

 <!-- Tab Control -->
    <Style TargetType="{x:Type TabControl}">
        <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
        <Setter Property="Padding" Value="4,4,4,4"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background" Value="#F9F9F9"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Border Background="{StaticResource ControlBackgroundBrush}" CornerRadius="4,4,4,4">
                        <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="ColumnDefinition0"/>
                                <ColumnDefinition Width="0" x:Name="ColumnDefinition1"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            <TabPanel Margin="2,2,2,0" x:Name="HeaderPanel" Grid.Column="0" Grid.Row="0" IsItemsHost="true" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
                            <Border x:Name="ContentPanel" Grid.Column="0" Grid.Row="1" Background="{StaticResource NormalBrush}" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" CornerRadius="4,4,4,4" Margin="2,0,2,1" Padding="2,1,2,1">
                                <ContentPresenter Margin="{TemplateBinding Padding}" x:Name="PART_SelectedContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="SelectedContent"/>
                            </Border>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
                        <Trigger Property="ContentStringFormat" Value="{x:Null}"/>
                        <Trigger Property="ContentStringFormat" Value="{x:Null}"/>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                            <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="HeaderPanel" 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"/>
                            <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
                            <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"/>
                            <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Tab Item Control -->
    <Style x:Key="TabItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Stroke="{StaticResource TextColor}" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
        <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
        <Setter Property="Padding" Value="6,1,6,1"/>
        <Setter Property="BorderBrush" Value="{StaticResource NormalTabItemBrush}"/>
        <Setter Property="Background" Value="{StaticResource NormalTabItemBrush}"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <Border x:Name="Bd" Background="{StaticResource NormalTabItemBrush}" BorderBrush="{x:Null}" BorderThickness="0,0,0,0" Padding="{TemplateBinding Padding}" CornerRadius="4,4,4,4" Margin="1,1,1,0">
                            <ContentPresenter HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" x:Name="Content" VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" FocusVisualStyle="{StaticResource TabItemFocusVisual}" Margin="0,0,0,0"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Opacity" TargetName="Bd" Value="1"/>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource HoveredTabItemBrush}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource NormalBrush}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="false"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                        </MultiTrigger>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Top"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Bottom"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Left"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Right"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                            <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource NormalTabItemBrush}"/>
                            <Setter Property="OpacityMask" TargetName="Content" Value="#FF808080"/>
                            <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Mar 19, 2009 at 7:47 AM
As a beginner WPFTheme is very helpful to me. Regarding the TabItem, In my project I've placed some images and textblock in the <TabItem.Header>
Eg:<TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="18" Source="Images/appearance8.Image.png" />
                        <TextBlock Text="System" Margin="2,0,0,0" VerticalAlignment="Center" FontSize="12" FontWeight="Bold" Name="tbkSystem" />
                    </StackPanel>
                </TabItem.Header>

Help me in applying themes to this header block, rest everything is fine.