Begin with a new folder, which will hold all of the code for our chat application. Inside this folder, create a file called friendslist.py. In this file, we will begin writing our FriendsList class:

import tkinter as tk
import tkinter.ttk as ttk


class FriendsList(tk.Tk):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

        self.title('Tk Chat')
        self.geometry('700x500')

        self.canvas = tk.Canvas(self, bg="white")
        self.canvas_frame = tk.Frame(self.canvas)

        self.scrollbar = ttk.Scrollbar(self, orient="vertical", 
                                        command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.scrollbar.set)

        self.scrollbar.pack(side=tk.LEFT, fill=tk.Y)
        self.canvas.pack(side=tk.LEFT, expand=1, fill=tk.BOTH)

        self.friends_area = self.canvas.create_window((0, 0), 
                            window=self.canvas_frame, anchor="nw")

        self.bind_events()

        self.load_friends()

Hopefully everything here looks very familiar. We import the usual tkinter and ttk modules, set a few window properties, then get straight into creating the components for our scrollable window.

After the Scrollbar, Canvas, and Frame are all taken care of, we call bind_events to handle binding of our necessary functions, followed by load_friends to populate the window with all of our added friends:

def bind_events(self):
    self.bind('<Configure>', self.on_frame_resized)

def on_frame_resized(self, event=None):
    self.canvas.configure(scrollregion=self.canvas.bbox("all"))

In bind_events we bind a method to our window's <Configure> event, which takes care of setting up the scrollregion of our Canvas, as we saw with the previous demo.

To add friends to our window, we will first create all of the necessary widgets inside their own Frame then add this to the canvas_frame, which is inside our Canvas:

def load_friends(self):
    friend_frame = ttk.Frame(self.canvas_frame)

    profile_photo = tk.PhotoImage(file="images/avatar.png")
    profile_photo_label = ttk.Label(friend_frame, image=profile_photo)
    profile_photo_label.image = profile_photo

    friend_name = ttk.Label(friend_frame, text="Jaden Corebyn",
                            anchor=tk.W)

    message_button = ttk.Button(friend_frame, text="Chat",
                                 command=self.open_chat_window)

    profile_photo_label.pack(side=tk.LEFT)
    friend_name.pack(side=tk.LEFT)
    message_button.pack(side=tk.RIGHT)

    friend_frame.pack(fill=tk.X, expand=1)

Each friend will consist of three widgets:

1. A PhotoImage holding their avatar of choice.
2. A Label showing their name.
3. A Button that opens up their chat window.

We can now run this initial version of the window. You should see a wide window with a small section containing the friend information:

This doesn't look very nice; we should make the friends span the entire window width. In order to do this we just need one more binding:

def bind_events(self):
    ...
    self.canvas.bind('<Configure>', self.friends_width)

def friends_width(self, event):
    canvas_width = event.width
    self.canvas.itemconfig(self.friends_area, width=canvas_width)

This time we bind to our Canvas' <Configure> event. Whenever our Canvas is resized, we grab its new width from the event object and apply it to the window within. In order to access the window in our Canvas, we use the itemconfig method. This method is like configure but it references items that have been created inside another widget, such as windows or images.

We pass this method our friends_area attribute, which holds the result of our create_window call, and the new width we want it to be set to.

Run this updated version of the file and you should see the friend will span the entire window width now. It will also stay at full width as you resize the window:

The last thing to do is create the ability to add a new friend. We can use our knowledge of the Menu widget to present this feature:

def __init__(self, **kwargs):
    ...
    self.menu = tk.Menu(self, bg="lightgrey", fg="black", tearoff=0)

    self.friends_menu = tk.Menu(self.menu, fg="black", bg="lightgrey",
                                tearoff=0)
    self.friends_menu.add_command(label="Add Friend", 
                                  command=self.add_friend)
    self.menu.add_cascade(label="Friends", menu=self.friends_menu)

    self.configure(menu=self.menu)

We can create a Menu in our __init__ method, which contains a Friends submenu. Inside here will be an Add Friend option.

Since we have no way of getting friend information yet, we can just call our load_friends method to act as a placeholder:

def add_friend(self):
    self.load_friends()

One final method remains now—open_chat_window. This will require us to create a new class that will act as the chat window. Create a new file in your folder called chatwindow.py, then add this code to finish off your friendslist.py file:

from chatwindow import ChatWindow

...

    def open_chat_window(self):
        cw = ChatWindow(self, 'Jaden Corebyn', 'images/avatar.png')

With this done we can move on to our ChatWindow class.