Вертикальный текст на выровненном по праву TabControl
Попытка сделать так, чтобы текст на каждой вкладке tabcontrol отображался вертикально. Из-за того, что я никогда не набирался контроля, а что нет, я немного застрял. Найден некоторый код для отображения текста, как если бы он был повернут влево. Я бы хотел, чтобы он отображался так, как если бы он был повернут вправо (вертикально) на вкладке. Код скелета ниже:
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
2 ответа
Решение
Я не использую VB или WinForms, поэтому следующее не будет в коде и включает несколько догадок. Также трудно понять, что отличается от того, что вы хотите, из вашего описания без скриншота. Правильно ли я считаю, что вы просто хотите, чтобы текст заголовка вашей вкладки был повернут на 180 градусов в другую сторону, то есть "верх" текста с левой стороны вкладки или с правой стороны вкладки, какой бы она сейчас не была?
В ветке If tc.Alignment = TabAlignment.Right Then ... ваш текст вращается с помощью вызова RotateAt:
m.RotateAt(270, New PointF(.X, .Y))
и вы захотите изменить 270 на 90, чтобы текст вращался в другом направлении.
(Вы знакомы с настройкой матриц преобразования подобным образом? Те же самые принципы применяются в программировании OpenGL или DirectX. Если нет, прокомментируйте, и я объясню / ссылку.)
Если вы просто сделаете это, скорее всего, текст не будет виден, потому что он будет вращаться вокруг растрового изображения, на котором вы рисуете. Вам нужно будет перевести его так, чтобы начало текста было в правом углу. Вот тут-то и возникло предположение, о котором я упоминал выше: я не знаком с системой координат используемой графической структуры, поэтому не знаю, какие направления нужно перевести. Извините, я не могу дать вам рабочий код, но у меня просто нет Visual Studio и элемента управления.Net Winforms, с которым можно поэкспериментировать:) Я вижу, что вы уже что-то делаете здесь:
m.Translate(0, .Height - tc.TabPages(0).Top)
Я думаю, что вам нужно изменить это либо координата X (0) .Width или же .Width - [text height, calculate this]и вам может понадобиться учитывать ширину текста в координате Y. (Текст "высота" и "ширина" такие, как будто текст рисуется горизонтально / нормально.) Я вполне уверен, что среда рисования.Net, вероятно, включает GraphicsTextHeight(...) а также TextWidth(...) методы, и если это не по этим именам, я уверен, что их легко найти:) TextRect() возможно?
(Если бы я сидел за вашим компьютером и пытался выяснить это с помощью чистой догадки, я бы написал этот код, чтобы он вращал текст в самой середине большого растрового изображения, измените его так, чтобы он находился в верхнем левом углу растрового изображения в Правое место внутри прямоугольника размером с вкладку, а затем переместите код в метод рисования вкладок. Избавляет вас от необходимости иметь крошечную маленькую вкладку и запускать ее и писать "Где мой текст?", когда он невидим, потому что он рисуется в неправильных координатах.)
Я предполагаю, что вы используете XAML, и это достижимо с помощью стилей
Добавьте эти стили:
<!-- 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>
И тогда вы можете назначить это каждому элементу вкладки:
<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>
Теперь вы можете изменить сверху / снизу / справа / слева, и текст будет вертикальным справа / слева. В этом примере я оставил только верх и низ, но это должно дать вам множество идей о том, как управлять этими вкладками.