Guide pratique pour afficher des onglets Side-Aligned avec TabControl

La propriété Alignment de TabControl prend en charge l’affichage verticalement des onglets (le long du bord gauche ou droit du contrôle), par opposition à horizontalement (en haut ou en bas du contrôle). Par défaut, cet affichage vertical entraîne une mauvaise expérience utilisateur, car la propriété Text de l’objet TabPage ne s’affiche pas dans l’onglet lorsque les styles visuels sont activés. Il n’existe pas non plus de moyen direct de contrôler la direction du texte dans l’onglet. Vous pouvez utiliser le dessin du propriétaire sur TabControl pour améliorer cette expérience.

La procédure suivante montre comment afficher les onglets alignés à droite, avec le texte de l'onglet qui se lit de gauche à droite, à l’aide de la fonctionnalité « dessin par l'utilisateur ».

Pour afficher les onglets alignés à droite

1. Ajoutez une TabControl à votre formulaire.

2. Définissez la propriété Alignment sur Right.

3. Définissez la propriété SizeMode sur Fixed, afin que tous les onglets soient de la même largeur.

4. Définissez la propriété ItemSize sur la taille fixe préférée pour les onglets. N’oubliez pas que la propriété ItemSize fonctionne comme si les onglets étaient en haut, bien qu’ils soient alignés à droite. Par conséquent, pour élargir les onglets, vous devez modifier la propriété Height et, pour les rendre plus grands, vous devez modifier la propriété Width.

   Pour obtenir le meilleur résultat avec l’exemple de code ci-dessous, définissez la Width des onglets sur 25 et le Height sur 100.

5. Définissez la propriété DrawMode sur OwnerDrawFixed.

6. Définissez un gestionnaire pour l’événement DrawItem de TabControl qui restitue le texte de gauche à droite.

   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
   

Voir aussi

• Contrôle TabControl