Abrir ventana secundaria Toplevel con tkinter

Qué es Tkinter Toplevel

Tkinter Toplevel son las ventanas secundarias de nuestra aplicación gráfica Python con Tkinter. Así como Tkinter Tk es la ventana principal y en principio sólo debería haber una, Toplevel es la clase que debemos usar para ventanas secundarias.

Ejemplo con Tkinter Toplevel

El siguiente código muestra una ventana principal Tk con un botón. Al pulsar el botón, se abre una ventana secundaria Toplevel

import tkinter as tk


# Función para abrir la ventana secundaria
def open_secondary_window():
    secondary_window = tk.Toplevel(root)
    secondary_window.title("Ventana Secundaria")

    # Una etiqueta por mostrar algo
    label = tk.Label(secondary_window, text="Esta es la ventana secundaria")
    label.pack(padx=20, pady=20)


if __name__ == '__main__':
    # Ventana principal
    root = tk.Tk()
    root.title("Ventana Principal")

    # Botón para abrir la ventana secundaria
    button = tk.Button(root, text="Abrir Ventana Secundaria", command=open_secondary_window)
    button.pack(padx=20, pady=20)

    # Iniciar el bucle principal de la aplicación
    root.mainloop()

Vamos a explicarlo.

Ventana principal Tk

Partimos de que tienes algún conocimiento básico de cómo crear una ventana con Tkinter. Así que poco que comentar en la parte del main del código. Se crea una ventana principal Tk, se le añade un botón Button que al pulsarlo llama a una función open_secondary_window() y se inicial el bucle principal de la aplicación.

Ventana secundaria Toplevel

La función open_secondary_window() es la encargada de instanciar y construir la ventana secundaria Toplevel. El primer paso es instanciarla y ponerle un título

secondary_window = tk.Toplevel(root)
secondary_window.title("Ventana Secundaria")

El siguiente paso, añadirle los widget que queremos que muestre. En este ejemplo sencillo será un Label con un texto

label = tk.Label(secondary_window, text="Esta es la ventana secundaria")
label.pack(padx=20, pady=20)

Y no es neceario nada más. Al pulsar el botón de la ventana principal se llamará a la función open_secondary_window() que crea la ventana secundaria. Se visualiza automáticamente en cuanto termine la llamada a open_secondary_window().

Ventana Tkinter Toplevel modal

Por defecto podemos interactuar con la ventana principal mientras está abierta la secundaria. Esto nos permite pulsar el botón repetidas veces y abrir varias ventanas secundarias a la vez. Si no queremos que se pueda interactuar con la ventana principal mientras está abierta la secundaria, debemos llamar a grab_set()

# Si queremos que sea modal
secondary_window.grab_set()

Posición en pantalla de la ventana Toplevel

Para fijar la posición en pantalla de la ventana Toplevel debemos llamar a su método geometry que admite un texto con el siguiente formato

ancho x alto + posicion_x + posicion_y

El formato es sin espacios, los hemos puesto por claridad. Un ejemplo concreto podría ser

600x300+100+50

para una ventana de 600 pixel de ancho, 300 pixels de alto y cuyo centro está en el pixel (100,50) de la pantalla.

Por ejemplo, para centrar esta ventana Toplevel en pantalla pondríamos el siguiente código

#centrado en pantalla
# Obtener las dimensiones deseadas de la ventana secundaria
ancho_ventana = secondary_window.winfo_reqwidth()
alto_ventana = secondary_window.winfo_reqheight()

# Calcular las coordenadas para centrar la ventana
x = (root.winfo_screenwidth() - ancho_ventana) // 2
y = (root.winfo_screenheight() - alto_ventana) // 2

# Establecer la geometría de la ventana secundaria
secondary_window.geometry(f"{ancho_ventana}x{alto_ventana}+{x}+{y}")

Las llamadas a winfo_reqwidth() y winfo_reqheight() nos dan el tamaño requerido por la ventana secundaria. Es importante por tanto hacer estas llamadas después de haber añadido todos los componentes (widget) que necesitemos.

El siguiente bloque calcula la posición (x,y) en la pantalla donde debería estar el centro de nuestra ventana secundaria. Para ello, la ventana principal root que instanciamos en el ejemplo tiene métodos winfo_screenwidth() y winfo_screenheight() para obtener las dimensiones de la pantalla.

Finalmente, con el método geometry() indicamos dónde colocar la ventana construyendo el texto de parámetro con las variable que hemos calculado. Usamos para ello el formato python f"...." que reemplazará los {variable} por los valores de las variables correpondientes.

Mostrar y Ocultar la ventana Toplevel

Para ocultar la ventana Toplevel podemos llamar a su método withdraw() o bien a su método iconify. El primero la oculta sin más. El segundo la minimiza y la tendremos accesible desde la barra de tareas de nuestro sistema operativo.

Para volver a mostrarla, basta llamar al método deiconify() independientemnte de cómo la hayamos ocultado

<syntaxhighlight lang="python">

1. Función para abrir la ventana secundaria

def open_secondary_window():

   global secondary_window
   secondary_window=tk.Toplevel(root)
   secondary_window.title("Ventana Secundaria")
   ...

def oculta():

   secondary_window.withdraw()
   # secondary_window.iconify()

def muestra():

   secondary_window.deiconify()

</syntaxhighligth>

Hemos hecho secondary_window global para tener acceso a ella desde las funciones oculta() y muestra().