Vertical Text on Right-Aligned TabControl - winforms

Question

Trying to have the text on each tab of the tabcontrol to be displayed vertically. Being that I've never forayed into controls and what not, i'm sorta stuck. Found some code to get the text to display as if it were rotated to the left. I would like it to display as if it were rotated right (vertically) on the tab. The skeleton code is below:
Protected Sub OnDrawItem(ByVal sender As Object, ByVal e As DrawItemEventArgs) Handles TabControl1.DrawItem
'MyBase.OnDrawItem(e)'
Dim tc As TabControl = DirectCast(sender, TabControl)
Dim g As Graphics = e.Graphics
Dim rectf As RectangleF
Dim isVertical As Boolean = (tc.Alignment > TabAlignment.Bottom)
Dim off As Integer = 1 : If (e.State And sel) = sel Then off = -1
Dim textFormat As New StringFormat(StringFormatFlags.NoClip _
Or StringFormatFlags.NoWrap)
With textFormat
.HotkeyPrefix = System.Drawing.Text.HotkeyPrefix.Show
.Alignment = StringAlignment.Center
.LineAlignment = StringAlignment.Center
End With
With e.Bounds
If isVertical Then
' tabs are aligned left or right'
If tc.Alignment = TabAlignment.Left Then
Dim m As New System.Drawing.Drawing2D.Matrix
m.Translate(0, .Height - tc.TabPages(0).Top)
m.RotateAt(270, New PointF(.X, .Y))
g.Transform = m
rectf = New RectangleF(.Left - tc.TabPages(0).Top, .Top + off, _
.Height, .Width)
ElseIf tc.Alignment = TabAlignment.Right Then
'Dim m As New System.Drawing.Drawing2D.Matrix'
'm.Translate(0, .Height - tc.TabPages(0).Top)'
'm.RotateAt(270, New PointF(.X, .Y))'
'g.Transform = m'
'rectf = New RectangleF(.Left - tc.TabPages(0).Top, .Top + off, _'
' .Height, .Width)'
' Here is where the tab should go to rotate the text about 180 degrees'
End If
Else
' tabs are aligned top or bottom'
rectf = New RectangleF(.X, .Y + off, .Width, .Height)
End If
End With
Dim col As Color
Select Case (e.State And notsf)
Case DrawItemState.Disabled
col = SystemColors.GrayText
Case DrawItemState.HotLight
col = SystemColors.HotTrack
Case Else
col = SystemColors.MenuText
End Select
g.DrawString(tc.TabPages(e.Index).Text, _
tc.Font, _
New SolidBrush(col), _
rectf, _
textFormat)
If isVertical Then g.ResetTransform()
If (e.State And selfoc) = selfoc Then
ControlPaint.DrawFocusRectangle(g, _
[Rectangle].Inflate(e.Bounds, -1, -1))
End If
textFormat.Dispose()
End Sub

Answer 1

I assume you are using XAML and this achievable through styles
Add these styles:
<!-- Simple Splitter Style -->
<Style x:Key="SimpleSplitterStyle" TargetType="controls:GridSplitter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:GridSplitter">
<Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}">
<Rectangle Fill="{TemplateBinding Background}" StrokeThickness="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab Item Header (Right) -->
<Style x:Key="RightTabItemHeader" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}">
<layout:LayoutTransformer >
<layout:LayoutTransformer.LayoutTransform>
<RotateTransform Angle="90"/>
</layout:LayoutTransformer.LayoutTransform>
<ContentPresenter Margin="5,0,5,0" />
</layout:LayoutTransformer>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab Item Header (Left) -->
<Style x:Key="LeftTabItemHeader" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}">
<layout:LayoutTransformer >
<layout:LayoutTransformer.LayoutTransform>
<RotateTransform Angle="-90"/>
</layout:LayoutTransformer.LayoutTransform>
<ContentPresenter Margin="5,0,5,0" />
</layout:LayoutTransformer>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab Item Style -->
<Style x:Key="TabItemStyle" TargetType="controls:TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TabItem">
<Grid x:Name="Root">
<Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="-2,-2,-2,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,0,0,-2"/>
<ContentControl x:Name="HeaderTopSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualTop" Margin="-2,-2,-2,0" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0"/>
<Border x:Name="DisabledVisualTopSelected" Margin="-2,-2,-2,0" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
</Grid>
<Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
<Border x:Name="BorderTop" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="3,3,0,0">
<Border x:Name="GradientTop" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderTopUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualTopUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
</Grid>
<Grid x:Name="TemplateBottomSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="-2,0,-2,-2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,1" CornerRadius="0,0,3,3">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,0,1,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,-2,0,0"/>
<ContentControl x:Name="HeaderBottomSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualBottom" Margin="-2,0,-2,-2" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1,0,1,1" CornerRadius="0,0,3,3"/>
<Border x:Name="DisabledVisualBottomSelected" Margin="-2,0,-2,-2" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
</Grid>
<Grid x:Name="TemplateBottomUnselected" Visibility="Collapsed">
<Border x:Name="BorderBottom" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0,0,3,3">
<Border x:Name="GradientBottom" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,0,1,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderBottomUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualBottomUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
</Grid>
<Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="-2,-2,0,-2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,0,0,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,0,-2,0"/>
<ContentControl x:Name="HeaderLeftSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource LeftTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualLeft" Margin="-2,-2,0,-2" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3"/>
<Border x:Name="DisabledVisualLeftSelected" Margin="-2,-2,0,-2" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,0,0,3"/>
</Grid>
<Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
<Border x:Name="BorderLeft" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3,0,0,3">
<Border x:Name="GradientLeft" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,0,0,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderLeftUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource LeftTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualLeftUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,0,0,3"/>
</Grid>
<Grid x:Name="TemplateRightSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="0,-2,-2,-2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,1,1" CornerRadius="0,3,3,0">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,1,1,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="-2,0,0,0"/>
<ContentControl x:Name="HeaderRightSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource RightTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualRight" Margin="0,-2,-2,-2" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="0,1,1,1" CornerRadius="0,3,3,0"/>
<Border x:Name="DisabledVisualRightSelected" Margin="0,-2,-2,-2" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,3,3,0"/>
</Grid>
<Grid x:Name="TemplateRightUnselected" Visibility="Collapsed">
<Border x:Name="BorderRight" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0,3,3,0">
<Border x:Name="GradientRight" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,1,1,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderRightUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource RightTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualRightUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,3,3,0"/>
</Grid>
<Border x:Name="FocusVisualElement" Margin="-1" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="3,3,0,0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And Then you can assign this to each tab item:
<controls:TabControl TabStripPlacement="Right" Margin="4">
<controls:TabItem Header="First" Style="{StaticResource TabItemStyle}">
<controls:TreeView>
<controls:TreeViewItem Header="Parent 1" />
<controls:TreeViewItem Header="Parent 2">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
</controls:TreeViewItem>
</controls:TreeViewItem>
<controls:TreeViewItem Header="Parent 3">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
<controls:TreeViewItem Header="Grandchild 2" />
</controls:TreeViewItem>
</controls:TreeViewItem>
</controls:TreeView>
</controls:TabItem>
<controls:TabItem Header="Second" Style="{StaticResource TabItemStyle}">
<controls:TreeView>
<controls:TreeViewItem Header="Parent 1" />
<controls:TreeViewItem Header="Parent 2">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
</controls:TreeViewItem>
</controls:TreeViewItem>
<controls:TreeViewItem Header="Parent 3">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
<controls:TreeViewItem Header="Grandchild 2" />
</controls:TreeViewItem>
</controls:TreeViewItem>
<controls:TreeViewItem Header="Parent 4">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
<controls:TreeViewItem Header="Grandchild 2" />
<controls:TreeViewItem Header="Grandchild 3" />
<controls:TreeViewItem Header="Grandchild 4" />
<controls:TreeViewItem Header="Grandchild 5" />
<controls:TreeViewItem Header="Grandchild 6" />
<controls:TreeViewItem Header="Grandchild 7" />
<controls:TreeViewItem Header="Grandchild 8" />
</controls:TreeViewItem>
</controls:TreeViewItem>
</controls:TreeView>
</controls:TabItem>
</controls:TabControl>
Now you can Change from Top/Bottom/Right/Left and the text will go vertical on Right/Left. I left top and bottom alone in this example but this should give you plenty of ideas on how to control these tabs.

Answer 2

I don't use VB or WinForms, so the following won't be in code and includes a couple of guesses. It's also hard to know what's different from what you want from your description without a screenshot. Am I right in thinking you just want your tab's caption text rotated 180 degrees the other way, ie the "top" of the text against the left side of the tab or the right side of the tab, whichever one it isn't now?
In the branch If tc.Alignment = TabAlignment.Right Then ... your text is being rotated by the RotateAt call:
m.RotateAt(270, New PointF(.X, .Y))
and you'll want to change 270 to 90 to have the text rotated in the other direction.
(Are you familiar with setting up transformation matrices like this? The same principles apply in OpenGL or DirectX programming. If not, comment and I'll explain / link.)
If you just do that then chances are the text will not be visible, because it will be rotated around to off the bitmap you're drawing on. You will need to translate it so that the beginning of the text is in the right corner. This is where the guesswork I mentioned above comes in: I'm not familiar with the coordinate system of the graphics framework you're using, so I don't know which direction(s) to translate. I'm sorry I can't give you working code, but I just don't have Visual Studio and a .Net Winforms control to experiment with :) I can see you're already doing something along these lines here:
m.Translate(0, .Height - tc.TabPages(0).Top)
My guess is you'd need to change this either so the X coordinate (0) is .Width or .Width - [text height, calculate this], and you may need to also account for the text width in the Y coordinate. (Text "height" and "width" are as though the text is being drawn horizontally / normally.) I'm pretty certain .Net's drawing framework probably includes Graphics TextHeight(...) and TextWidth(...) methods and if it doesn't by those names I'm sure they're easy to find :) TextRect() perhaps?
(If I was sitting at your PC and trying to figure this out by pure guesswork I'd write this code so it rotated the text in the very middle of a large bitmap, modify it so it's in the top left of the bitmap in the right spot inside a rectangle the size of a tab, and then move the code to the tab drawing method. Saves all the trouble of having a tiny little tab and running it and going "Where's my text?" when it's invisible because it's being drawn at the wrong coordinates.)