🧩 الدرس 52 من سلسلة Tkinter: استخدام الـ Canvas مع Scrollbar لعرض محتوى قابل للتمرير

🎯 الهدف من الدرس:

تعلم كيفية استخدام عنصر Canvas مع Scrollbar لعرض محتوى كبير يمكن التمرير خلاله (مثل صور أو نماذج أو نماذج إدخال كثيرة).

---

🛠️ الفكرة:

• أحيانًا يكون لديك واجهة تحتوي على عدد كبير من العناصر لا تتسع داخل النافذة.
• باستخدام Canvas + Scrollbar + Frame يمكنك عرض واجهة كاملة يمكن تمريرها (مثل صفحات التطبيقات).

---

✅ الكود التطبيقي:

import tkinter as tk

# إنشاء النافذة الرئيسية
root = tk.Tk()
root.title("Canvas مع Scrollbar")
root.geometry("400x300")

# إنشاء Canvas
canvas = tk.Canvas(root)
canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

# إنشاء Scrollbar وربطها بالـ Canvas
scrollbar = tk.Scrollbar(root, orient="vertical", command=canvas.yview)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

canvas.configure(yscrollcommand=scrollbar.set)
canvas.bind('<Configure>', lambda e: canvas.configure(scrollregion=canvas.bbox("all")))

# إنشاء إطار داخل الـ Canvas
frame_inside_canvas = tk.Frame(canvas)

# إضافة الإطار داخل الـ Canvas
canvas.create_window((0, 0), window=frame_inside_canvas, anchor="nw")

# تعبئة الإطار بعدة عناصر (مثلاً: مدخلات نص)
for i in range(30):
    tk.Label(frame_inside_canvas, text=f"عنصر رقم {i+1}").pack(pady=5)

root.mainloop()

---

🔍 شرح سريع:

• canvas.create_window يستخدم لإضافة Frame داخل Canvas.
• scrollregion=canvas.bbox("all") تجعل التمرير يشمل كل المحتوى.
• استخدمنا expand=True و fill=tk.BOTH ليأخذ الـ Canvas كامل المساحة.

---

🎯 التمرين: إنشاء صفحة تحتوي على قائمة من الصور باستخدام Canvas و Scrollbar

المطلوب:

• أنشئ نافذة تحتوي على مجموعة من الصور (أي صور يمكن تحميلها من جهازك).
• استخدم Canvas لعرض هذه الصور.
• استخدم Scrollbar لتمرير الصور عند زيادة عددها بحيث لا تتسع جميعها في نافذة واحدة.

---

الحل الكامل:

import tkinter as tk
from tkinter import PhotoImage

# إنشاء نافذة رئيسية
root = tk.Tk()
root.title("عرض الصور باستخدام Canvas")
root.geometry("400x300")

# إنشاء Canvas
canvas = tk.Canvas(root)
canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

# إنشاء Scrollbar
scrollbar = tk.Scrollbar(root, orient="vertical", command=canvas.yview)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

canvas.configure(yscrollcommand=scrollbar.set)
canvas.bind('<Configure>', lambda e: canvas.configure(scrollregion=canvas.bbox("all")))

# إنشاء إطار داخل Canvas لاحتواء الصور
frame_inside_canvas = tk.Frame(canvas)
canvas.create_window((0, 0), window=frame_inside_canvas, anchor="nw")

# تحميل الصور (تأكد من تغيير المسارات للصور الخاصة بك)
image1 = PhotoImage(file="image1.png")  # قم بتغيير هذه إلى مسار الصورة الخاصة بك
image2 = PhotoImage(file="image2.png")
image3 = PhotoImage(file="image3.png")
image4 = PhotoImage(file="image4.png")

# إضافة الصور داخل الإطار
tk.Label(frame_inside_canvas, image=image1).pack(pady=10)
tk.Label(frame_inside_canvas, image=image2).pack(pady=10)
tk.Label(frame_inside_canvas, image=image3).pack(pady=10)
tk.Label(frame_inside_canvas, image=image4).pack(pady=10)

# تشغيل الحلقة الرئيسية
root.mainloop()

---

🧩 شرح الحل:

1. Canvas: تم إنشاء Canvas لعرض الصور فيه.
2. Scrollbar: تم إضافة شريط التمرير العمودي (عمودي فقط هنا لأن الصور تأخذ طولًا كبيرًا).
3. إطار داخل Canvas: استخدمنا frame_inside_canvas لاحتواء الصور داخل Canvas مما يساعد على التحكم بمحتويات كبيرة.
4. صور: تم استخدام PhotoImage لتحميل الصور. تأكد من وضع صورك في نفس المجلد أو تحديد المسار الصحيح.

---

💡 ملاحظات:

• تأكد من أنك تستخدم صور بصيغة تدعمها Tkinter مثل .png أو .gif.
• يمكنك إضافة المزيد من الصور حسب الحاجة.