Tkinter LabelFrame : un guide pratique et convivial

1 Qu'est-ce qu'un LabelFrame ?

LabelFrame est un widget conteneur dans Tkinter qui dessine une bordure et un titre autour d'un groupe de contrôles apparentés. C'est la manière standard d'organiser des sections—considérez-le comme une carte étiquetée qui regroupe des paramètres liés.

Vous le verrez dans les boîtes de dialogue de paramètres, les panneaux de préférences et les écrans de saisie de données. Il regroupe visuellement et sémantiquement les widgets, afin que les utilisateurs voient ce qui va ensemble et ce qui ne va pas.

Objectif : créer une fenêtre de paramètres propre en utilisant LabelFrame pour contenir les informations personnelles, les préférences de l'application et les paramètres de notification.

2 Prérequis

LabelFrame fait partie du module ttk de Tkinter, inclus avec Python. Vous n'avez besoin que de Python 3.7+ et de la bibliothèque standard—aucun paquet supplémentaire.

Confirmez votre version :

python --version

3 Créer la fenêtre de l'application

Commencez par sous-classer Tk pour construire une fenêtre de paramètres minimale. Cela vous donne un point d'entrée soigné pour les composants ultérieurs.

import tkinter as tk
from tkinter import ttk

class SettingsApp(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Paramètres de l'application (Démo LabelFrame)")
        self.geometry("600x400")
        self.configure(bg='#f0f0f0')

        # Conteneur principal avec remplissage
        main_container = ttk.Frame(self, padding="20")
        main_container.pack(fill=tk.BOTH, expand=True)

if __name__ == "__main__":
    app = SettingsApp()
    app.mainloop()

4 Premier LabelFrame : Informations Personnelles

Créez un LabelFrame pour les « Informations Personnelles », puis ajoutez deux champs étiquetés. Configurez la grille pour que les champs de saisie s'étendent horizontalement.

    def create_personal_info_frame(self, parent: ttk.Frame) -> None:
        personal_frame = ttk.LabelFrame(
            parent,
            text="Informations Personnelles",
            padding="10"
        )
        personal_frame.pack(fill=tk.X, pady=(0, 10))

        ttk.Label(personal_frame, text="Nom :").grid(row=0, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        ttk.Label(personal_frame, text="Email :").grid(row=1, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        personal_frame.columnconfigure(1, weight=1)

5 Deuxième LabelFrame : Préférences de l'Application

Ajoutez un deuxième LabelFrame pour les préférences. Utilisez Combobox pour le thème et la langue. Définir state="readonly" empêche les modifications libres.

    def create_preferences_frame(self, parent: ttk.Frame) -> None:
        pref_frame = ttk.LabelFrame(parent, text="Préférences de l'application", padding="10")
        pref_frame.pack(fill=tk.X, pady=(0, 10))

        ttk.Label(pref_frame, text="Thème :").grid(row=0, column=0, sticky=tk.W, pady=5)
        theme_combo = ttk.Combobox(pref_frame, values=["Clair", "Sombre", "Système"], state="readonly")
        theme_combo.set("Clair")
        theme_combo.grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        ttk.Label(pref_frame, text="Langue :").grid(row=1, column=0, sticky=tk.W, pady=5)
        lang_combo = ttk.Combobox(pref_frame, values=["Anglais", "Espagnol", "Français", "Allemand"], state="readonly")
        lang_combo.set("Anglais")
        lang_combo.grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        pref_frame.columnconfigure(1, weight=1)

6 Troisième LabelFrame : Paramètres de Notification

Créez un troisième LabelFrame pour les basculements. Utilisez Checkbutton pour les options de type Marche/Arrêt. Ce cadre ne nécessite pas de colonnes d'extension.

    def create_notification_frame(self, parent: ttk.Frame) -> None:
        notif_frame = ttk.LabelFrame(parent, text="Paramètres de notification", padding="10")
        notif_frame.pack(fill=tk.X)

        ttk.Checkbutton(notif_frame, text="Activer les notifications par email").grid(row=0, column=0, sticky=tk.W, pady=2)
        ttk.Checkbutton(notif_frame, text="Activer les notifications de bureau").grid(row=1, column=0, sticky=tk.W, pady=2)
        ttk.Checkbutton(notif_frame, text="Activer les notifications sonores").grid(row=2, column=0, sticky=tk.W, pady=2)

7 Assembler les cadres dans init

Appelez maintenant les trois méthodes d'aide à partir de __init__ pour organiser les sections dans l'ordre.

    def __init__(self):
        super().__init__()
        self.title("Paramètres de l'application (Démo LabelFrame)")
        self.geometry("600x400")
        self.configure(bg='#f0f0f0')

        main_container = ttk.Frame(self, padding="20")
        main_container.pack(fill=tk.BOTH, expand=True)

        self.create_personal_info_frame(main_container)
        self.create_preferences_frame(main_container)
        self.create_notification_frame(main_container)

8 Style et remplissage

L'argument padding ajoute de l'espace à l'intérieur de chaque LabelFrame, ce qui empêche le contenu d'être collé au bord. Gardez les titres courts et descriptifs.

Sur macOS et Windows, l'apparence de LabelFrame suit le thème natif ; sous Linux avec ttk, elle peut varier. Évitez de vous fier à des couleurs exactes sur toutes les plateformes.

9 Mise en page : grid vs. pack

À l'intérieur d'un LabelFrame, grid est idéal pour les formulaires étiquetés. Configurez la colonne 1 avec weight=1 pour que les entrées s'étirent pour remplir la largeur disponible. Pour les basculements qui n'ont pas besoin de colonnes, pack ou une grille à une seule ligne conviennent.

Utilisez pady et sticky de manière cohérente pour que les lignes soient alignées et aient une apparence cohérente. Sticky=EW garantit que les champs s'étendent horizontalement lorsque la fenêtre est redimensionnée.

10 Code source complet

Copiez l'exemple complet et exécutez-le pour voir les trois sections étiquetées.

Remarque : nous avons également une vidéo de présentation de cette leçon.

import tkinter as tk
from tkinter import ttk

class SettingsApp(tk.Tk):
    def __init__(self):
        super().__init__()

        # Configuration de la fenêtre principale
        self.title("Paramètres de l'application (Démo LabelFrame)")
        self.geometry("600x400")
        self.configure(bg='#f0f0f0')

        # Création du conteneur principal avec remplissage
        main_container = ttk.Frame(self, padding="20")
        main_container.pack(fill=tk.BOTH, expand=True)

        # Création et placement de la section d'informations personnelles
        self.create_personal_info_frame(main_container)

        # Création et placement de la section des préférences
        self.create_preferences_frame(main_container)

        # Création et placement des paramètres de notification
        self.create_notification_frame(main_container)

    def create_personal_info_frame(self, parent: ttk.Frame) -> None:
        """Crée un LabelFrame pour les paramètres d'informations personnelles."""
        personal_frame = ttk.LabelFrame(
            parent,
            text="Informations Personnelles",
            padding="10"
        )
        personal_frame.pack(fill=tk.X, pady=(0, 10))

        # Création et placement des éléments du formulaire
        ttk.Label(personal_frame, text="Nom :").grid(row=0, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        ttk.Label(personal_frame, text="Email :").grid(row=1, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        # Configuration des poids des colonnes de la grille
        personal_frame.columnconfigure(1, weight=1)

    def create_preferences_frame(self, parent: ttk.Frame) -> None:
        """Crée un LabelFrame pour les préférences de l'application."""
        pref_frame = ttk.LabelFrame(
            parent,
            text="Préférences de l'application",
            padding="10"
        )
        pref_frame.pack(fill=tk.X, pady=(0, 10))

        # Sélection du thème
        ttk.Label(pref_frame, text="Thème :").grid(row=0, column=0, sticky=tk.W, pady=5)
        theme_combo = ttk.Combobox(
            pref_frame,
            values=["Clair", "Sombre", "Système"],
            state="readonly"
        )
        theme_combo.set("Clair")
        theme_combo.grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        # Sélection de la langue
        ttk.Label(pref_frame, text="Langue :").grid(row=1, column=0, sticky=tk.W, pady=5)
        lang_combo = ttk.Combobox(
            pref_frame,
            values=["Anglais", "Espagnol", "Français", "Allemand"],
            state="readonly"
        )
        lang_combo.set("Anglais")
        lang_combo.grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        # Configuration des poids des colonnes de la grille
        pref_frame.columnconfigure(1, weight=1)

    def create_notification_frame(self, parent: ttk.Frame) -> None:
        """Crée un LabelFrame pour les paramètres de notification."""
        notif_frame = ttk.LabelFrame(
            parent,
            text="Paramètres de notification",
            padding="10"
        )
        notif_frame.pack(fill=tk.X)

        # Notifications par email
        ttk.Checkbutton(
            notif_frame,
            text="Activer les notifications par email"
        ).grid(row=0, column=0, sticky=tk.W, pady=2)

        # Notifications de bureau
        ttk.Checkbutton(
            notif_frame,
            text="Activer les notifications de bureau"
        ).grid(row=1, column=0, sticky=tk.W, pady=2)

        # Notifications sonores
        ttk.Checkbutton(
            notif_frame,
            text="Activer les notifications sonores"
        ).grid(row=2, column=0, sticky=tk.W, pady=2)

if __name__ == "__main__":
    app = SettingsApp()
    app.mainloop()

Exécutez avec : python settings_app.py

11 Vidéo & Points à retenir

Si vous préférez regarder, voici une courte présentation de l'utilisation de LabelFrame et de la mise en page de base.

Conclusion : LabelFrame organise les sections de l'interface utilisateur, leur donne un nom et améliore la clarté. Utilisez le remplissage, des titres clairs et des poids de colonnes pour que les formulaires restent cohérents et réactifs.