Comment : afficher des onglets alignés sur le côté à l'aide de TabControl

La propriété Alignment de TabControl prend en charge l’affichage vertical des onglets (le long du bord gauche ou droit du contrôle), par opposition à l’affichage horizontal (en haut ou en bas du contrôle). Par défaut, cet affichage vertical offre une expérience utilisateur médiocre, car la propriété Text de l'objet TabPage ne s'affiche pas dans l'onglet quand 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 propriétaire pour TabControl améliorer cette expérience.

La procédure suivante montre comment afficher des onglets alignés à droite, avec le texte de l’onglet affiché de gauche à droite, à l’aide de la fonctionnalité « Owner Draw ».

Pour afficher des onglets alignés à droite

  1. Ajoutez un TabControl à votre formulaire.

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

  3. Affectez à la propriété SizeMode la valeur Fixed pour que tous les onglets aient la même largeur.

  4. Affectez à la propriété ItemSize la taille fixe préférée pour les onglets. N'oubliez pas que la propriété ItemSize se comporte comme si les onglets étaient en haut, bien qu'ils soient alignés à droite. Ainsi, pour que les onglets soient plus larges vous devez modifier la propriété Height, et pour qu'ils soient plus hauts vous devez modifier la propriété Width.

    Pour un résultat optimal avec l'exemple de code ci-dessous, affectez la valeur 25 à la propriété Width et la valeur 100 à la propriété Height.

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

  6. Définissez un gestionnaire pour l'événement DrawItem de TabControl qui affiche 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