Cómo: Mostrar pestañas de Side-Aligned con TabControl

La propiedad Alignment de TabControl admite la visualización de pestañas de forma vertical (a lo largo del borde izquierdo o derecho del control), en lugar de horizontalmente (en la parte superior o inferior del control). De forma predeterminada, esta presentación vertical da como resultado una experiencia de usuario deficiente, ya que la Text propiedad del TabPage objeto no se muestra en la pestaña cuando se habilitan los estilos visuales. Tampoco hay una manera directa de controlar la dirección del texto dentro de la pestaña. Puede utilizar la técnica de dibujo personalizado en TabControl para mejorar esta experiencia.

En el siguiente procedimiento se muestra cómo mostrar pestañas alineadas a la derecha, con el texto de la pestaña desplazándose de izquierda a derecha mediante la característica de estilo de dibujo personalizado ("owner draw").

Para mostrar pestañas alineadas a la derecha

1. Agregue un TabControl elemento al formulario.

2. Establezca la propiedad Alignment en Right.

3. Establezca la propiedad SizeMode a Fixed, de modo que todas las pestañas sean del mismo ancho.

4. Establezca la ItemSize propiedad en el tamaño fijo preferido para las pestañas. Tenga en cuenta que la ItemSize propiedad se comporta como si las pestañas estuvieran en la parte superior, aunque están alineadas a la derecha. Como resultado, para que las pestañas sean más anchas, debe cambiar la Height propiedad y, para que sean más altas, debe cambiar la Width propiedad .

   Para obtener el mejor resultado con el siguiente ejemplo de código, establezca Width de las pestañas en 25 y Height en 100.

5. Establezca la propiedad DrawMode en OwnerDrawFixed.

6. Defina un controlador para el DrawItem evento de TabControl que representa el texto de izquierda a derecha.

   public Form1()
   {
       // Remove this call if you do not program using Visual Studio.
       InitializeComponent();
   
       tabControl1.DrawItem += new DrawItemEventHandler(tabControl1_DrawItem);
   }
   
   private void tabControl1_DrawItem(Object sender, System.Windows.Forms.DrawItemEventArgs e)
   {
       Graphics g = e.Graphics;
       Brush _textBrush;
   
       // Get the item from the collection.
       TabPage _tabPage = tabControl1.TabPages[e.Index];
   
       // Get the real bounds for the tab rectangle.
       Rectangle _tabBounds = tabControl1.GetTabRect(e.Index);
   
       if (e.State == DrawItemState.Selected)
       {
   
           // Draw a different background color, and don't paint a focus rectangle.
           _textBrush = new SolidBrush(Color.Red);
           g.FillRectangle(Brushes.Gray, e.Bounds);
       }
       else
       {
           _textBrush = new System.Drawing.SolidBrush(e.ForeColor);
           e.DrawBackground();
       }
   
       // Use our own font.
       Font _tabFont = new Font("Arial", 10.0f, FontStyle.Bold, GraphicsUnit.Pixel);
   
       // Draw string. Center the text.
       StringFormat _stringFlags = new StringFormat();
       _stringFlags.Alignment = StringAlignment.Center;
       _stringFlags.LineAlignment = StringAlignment.Center;
       g.DrawString(_tabPage.Text, _tabFont, _textBrush, _tabBounds, new StringFormat(_stringFlags));
   }
   

   Private Sub TabControl1_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles TabControl1.DrawItem
       Dim g As Graphics = e.Graphics
       Dim _TextBrush As Brush
   
       ' Get the item from the collection.
       Dim _TabPage As TabPage = TabControl1.TabPages(e.Index)
   
       ' Get the real bounds for the tab rectangle.
       Dim _TabBounds As Rectangle = TabControl1.GetTabRect(e.Index)
   
       If (e.State = DrawItemState.Selected) Then
           ' Draw a different background color, and don't paint a focus rectangle.
           _TextBrush = New SolidBrush(Color.Red)
           g.FillRectangle(Brushes.Gray, e.Bounds)
       Else
           _TextBrush = New System.Drawing.SolidBrush(e.ForeColor)
           e.DrawBackground()
       End If
   
       ' Use our own font.
       Dim _TabFont As New Font("Arial", 10.0, FontStyle.Bold, GraphicsUnit.Pixel)
   
       ' Draw string. Center the text.
       Dim _StringFlags As New StringFormat()
       _StringFlags.Alignment = StringAlignment.Center
       _StringFlags.LineAlignment = StringAlignment.Center
       g.DrawString(_TabPage.Text, _TabFont, _TextBrush, _TabBounds, New StringFormat(_StringFlags))
   End Sub
   

Consulte también

• TabControl Control