TabControl style

Question

Hi,

Can style Tabcontrol as shown in Image ? if yes then how? ,it looks like explorer bar . which should contain grouping of sub tabitems.

---

Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 1

Hi dhampall_79,

According to your description, i get that you want to implement a UI like the explorer bar using TabControl.

In my experience, this solution can be implemented, we can set TabControl.TabStripPlacement Property to Left to build vertical tab sets first, then we should define the ControlTemplate of TabItem.
To contain sub tabitems, we can use Expander control.

I've done some tests in my sample:

<Window x:Class="WpfTabControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Expander>
                            <Expander.Header>
                                <TextBlock Text="{TemplateBinding Header}" FontWeight="Bold"/>
                            </Expander.Header>
                            <StackPanel Margin="10,4,0,0">
                                <CheckBox Margin="4" Content="Option 1" />
                                <CheckBox Margin="4" Content="Option 2" />
                                <CheckBox Margin="4" Content="Option 3" />
                            </StackPanel>
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <TabControl TabStripPlacement="Left" Margin="0, 0, 0, 10">
        <TabItem Name="tab1" Header="Tab 1">
        </TabItem>
        <TabItem Name="tab2" Header="Tab 2">
        </TabItem>
        
    </TabControl>
</Window>

Screenshot:

Pleast try to add custom sub-tabitems in Expander, i think it can implement your requirement well.

Here are some references for your question:

#Styling and Templating
http://msdn.microsoft.com/en-us/library/ms745683.aspx

#TabItem ControlTemplate Example
http://msdn.microsoft.com/en-us/library/ms752032.aspx

#TabControl Styles and Templates
http://msdn.microsoft.com/en-us/library/ms754137.aspx

#WPF TabControl XP Styling Problem
http://stackoverflow.com/questions/1508231/wpf-tabcontrol-xp-styling-problem

#WPF- How to Put WPF tab Control on left hand side with Tab Header rotated to 270
http://dotnetbhupesh.blogspot.in/2011/07/wpf-how-to-put-wpf-tab-control-on-left.html

#How to build vertical tab sets in WPF?
http://stackoverflow.com/questions/3953286/how-to-build-vertical-tab-sets-in-wpf

#WPF TabItem Header Styling
http://stackoverflow.com/questions/1506568/wpf-tabitem-header-styling

---

Franklin Chen
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Thanks for reply , i also  wanted to customize template, but was confused which control exactly should i customize .

---

Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.