How to put WPF Tab Control tabs on the side

wpf xaml tabcontrol
Brian Stewart picture Brian Stewart · Oct 10, 2008 · Viewed 24.4k times · Source

I am trying to create a Tab Control in WPF that has the tabs arranged down the right side of the control, with the text rotated 90 degrees The look is similar to those plastic tabs you can buy and use in a notebook. I have tried changing the TabStripPlacement to Right, but it just stacks the tabs up on the top right side of the control - not at all what I had in mind.

Answer

Brad Leach picture Brad Leach · Oct 10, 2008

The effect I believe you are seeking is achieved by providing a HeaderTemplate for the TabItem's in you Tab collection.

<TabControl TabStripPlacement="Right">
  <TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Padding" Value="4" />
      <Setter Property="HeaderTemplate">
        <Setter.Value>
          <DataTemplate>
            <ContentPresenter Content="{TemplateBinding Content}">
              <ContentPresenter.LayoutTransform>
                <RotateTransform Angle="90" />
              </ContentPresenter.LayoutTransform>
            </ContentPresenter>
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </TabControl.Resources>
  <TabItem Header="Tab Item 1" />
  <TabItem Header="Tab Item 2" />
  <TabItem Header="Tab Item 3" />
  <TabItem Header="Tab Item 4" />
</TabControl>

Hope this helps!

Related questions

WPF TabItem Header Styling

I'm trying to style a TabControl and have got 75% of the way there, but I'm having difficulty styling the actual TabItems: What I am trying to achieve is remove the default ContentPresenter so that I can make the tab items …

Read More
How to create trapezoid tabs in WPF tab control

How to create trapezoid tabs in WPF tab control? I'd like to create non rectangular tabs that look like tabs in Google Chrome or like tabs in code editor of VS 2008. Can it be done with WPF styles or it …

Read More
How can I make a specific TabItem gain focus on a TabControl without click event?

How can I tell my TabControl to set the focus to its first TabItem, something like this: PSEUDO-CODE: ((TabItem)(MainTabControl.Children[0])).SetFocus();

Read More