🎓 الدرس 16 من Tkinter: إضافة الأيقونات (Icons) والنصوص مع الأزرار

الهدف من هذا الدرس هو تعلم كيفية جعل الأزرار (Buttons) أكثر جاذبية من خلال إضافة صورة (Icon) بجانب النص.

---

📌 لماذا نستخدم الصور في الأزرار؟

• لزيادة التفاعل البصري.
• لجعل التطبيق أكثر احترافية.
• لتسهيل فهم الأوامر مثل: 🖨️ طباعة، 💾 حفظ، 🗑️ حذف...

---

🧱 الطريقة العامة:

btn = tk.Button(window, text="زر", image=img, compound="left")

• image: الصورة التي تريد عرضها داخل الزر.
• compound: تحدد مكان الصورة بالنسبة للنص (left, right, top, bottom, center).

---

🖼️ مثال كامل:

🔹 صورة + نص في زر واحد:

import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("زر بصورة ونص")
window.geometry("300x200")

# تحميل صورة (png فقط مع PhotoImage)
icon = tk.PhotoImage(file="save_icon.png")

# إنشاء زر
btn = tk.Button(window, text="حفظ", image=icon, compound="left", padx=10)
btn.pack(pady=40)

window.mainloop()

✅ تأكد أن الصورة موجودة بنفس المجلد، ويفضل أن تكون 32x32 أو 24x24.

---

📌 خيارات compound لتنسيق الصورة والنص:

القيمة	النتيجة
"left"	الصورة يسار النص
"right"	الصورة يمين النص
"top"	الصورة أعلى النص
"bottom"	الصورة أسفل النص
"center"	تظهر الصورة فقط بدون النص

---

🧠 ملاحظات مهمة:

• تأكد من الاحتفاظ بمرجع الصورة (icon في المثال)، حتى لا تُحذف من الذاكرة.
• استخدم padx أو pady لمساحة إضافية حول النص أو الصورة.

---

✅ التمرين التطبيقي: "زر الحفظ الاحترافي"

🎯 المطلوب:

1. أنشئ نافذة باستخدام Tkinter.
2. أنشئ زرًا يحتوي على:
   • صورة (مثل رمز حفظ).
   • كلمة "حفظ".
   • الصورة تكون على يسار النص.
3. عند الضغط على الزر، يتم طباعة "تم حفظ الملف" في الطرفية.

---

🧾 الكود الكامل للحل:

📌 ملاحظة: تأكد من أن لديك صورة بصيغة .png باسم save_icon.png في نفس مجلد السكربت. يمكنك استخدام أي أيقونة بحجم صغير (مثل 32x32 بكسل).

import tkinter as tk

# دالة عند الضغط على الزر
def حفظ():
    print("تم حفظ الملف")

# إنشاء النافذة
window = tk.Tk()
window.title("زر حفظ احترافي")
window.geometry("300x200")

# تحميل الأيقونة (يفترض أن الصورة باسم save_icon.png)
icon = tk.PhotoImage(file="save_icon.png")

# إنشاء الزر مع الصورة والنص
btn = tk.Button(window, text="حفظ", image=icon, compound="left", command=حفظ, padx=10)
btn.pack(pady=50)

# بدء التطبيق
window.mainloop()

---

💡 ما تتعلمه من التمرين:

العنصر	الاستخدام
PhotoImage	لتحميل صورة PNG داخل الزر
compound	لتحديد موضع الصورة نسبة للنص
command	تنفيذ أمر معين عند الضغط