العناصر المرئيّة الشائعة في Xamarin – الجزء الأوّل

تُعدّ منصة Xamarin إحدى الأدوات القوية التي توفّر إطار عمل متكامل لتطوير تطبيقات الأجهزة المحمولة عبر أنظمة تشغيل متعددة مثل Android وiOS باستخدام لغة برمجة واحدة وهي C#. تبرز قوة Xamarin في القدرة على إعادة استخدام الكود البرمجي بنسبة عالية عبر مختلف المنصات، مما يسهم في تقليل التكاليف الزمنية والمادية للتطوير، ويتيح للمطورين بيئة مرنة لبناء واجهات المستخدم باستخدام عناصر مرئية (UI Controls) غنية ومتنوعة.

في هذا الجزء الأول من المقال، سنسلّط الضوء على العناصر المرئية الشائعة في Xamarin.Forms، والتي تُعدّ الأساس في تصميم واجهات المستخدم الديناميكية والتفاعلية في تطبيقات الأجهزة الذكية.

أولاً: نظرة عامة على نظام العناصر في Xamarin.Forms

تعتمد Xamarin.Forms على بنية قائمة على XAML (eXtensible Application Markup Language) في تصميم الواجهات، حيث يتم وصف وتخطيط العناصر المرئية من خلال تعليمات XAML مع إمكانية الربط بينها وبين منطق التطبيق عبر C#. يمكن للمطورين أيضًا كتابة الواجهة البرمجية بالكامل باستخدام C# دون اللجوء إلى XAML، إلا أن الخيار الأول أكثر تنظيماً ووضوحاً في المشاريع الكبيرة.

تتوفر مجموعة كبيرة من العناصر المرئية (UI Elements) في Xamarin، بعضها بسيط مثل النصوص والأزرار، وبعضها مركّب مثل القوائم والنماذج والرسوم البيانية. هذه العناصر تُدار من خلال آلية تخطيط ذكية مثل StackLayout، Grid، وAbsoluteLayout.

ثانياً: عناصر النصوص والعناوين

1. Label

عنصر Label هو العنصر الأساسي لعرض النصوص الثابتة داخل التطبيق. يمكن التحكم بخواصه مثل الخط، الحجم، اللون، المحاذاة، عدد الأسطر، وغيرها.

أهم الخصائص:

• Text: النص الظاهر للمستخدم.

• FontSize: حجم الخط.

• TextColor: لون النص.

• HorizontalTextAlignment / VerticalTextAlignment: محاذاة النص.

xaml
CopyEdit

ثالثاً: عناصر الإدخال

2. Entry

يُستخدم عنصر Entry لإدخال سطر واحد من البيانات مثل اسم المستخدم أو كلمة المرور. يتميز بخفة الأداء وسهولة التخصيص.

الخصائص المهمة:

• Placeholder: نص تلميحي يظهر عند عدم وجود إدخال.

• IsPassword: لتشفير الإدخال (كلمات المرور).

• Keyboard: لتحديد نوع لوحة المفاتيح.

xaml
CopyEdit

3. Editor

يُعد عنصر Editor خياراً مثالياً لإدخال نصوص متعددة الأسطر مثل التعليقات أو الملاحظات.

xaml
CopyEdit

رابعاً: عناصر التفاعل

4. Button

يُعتبر Button أحد أهم عناصر التفاعل، حيث يتيح للمستخدم تنفيذ إجراء عند النقر عليه.

أبرز الخصائص:

• Text: النص الظاهر على الزر.

• Clicked: الحدث المرتبط بالنقر.

• BackgroundColor: لون الخلفية.

• CornerRadius: درجة انحناء الحواف.

xaml
CopyEdit

5. ImageButton

هو زر ذو خلفية مرئية على شكل صورة، ويمكن تخصيصه ليجمع بين الجمالية والتفاعل.

xaml
CopyEdit

خامساً: عناصر العرض

6. Image

يُستخدم لعرض صورة داخل الواجهة، مع تحكم شامل في المصدر والحجم والتناسب.

الخصائص الأساسية:

• Source: مسار الصورة (محلية أو عبر الإنترنت).

• Aspect: تحديد كيفية عرض الصورة (Fill، Fit، Center).

xaml
CopyEdit

7. BoxView

عنصر بسيط يُستخدم لرسم أشكال مستطيلة غالباً لأغراض جمالية مثل تقسيم العناصر أو التظليل.

xaml
CopyEdit

سادساً: عناصر الاختيار والتبديل

8. Switch

مفتاح تبديل بين حالتين (تشغيل/إيقاف) يُستخدم غالباً في الإعدادات.

xaml
CopyEdit

9. CheckBox

عنصر اختيار يسمح بتحديد حالة معينة، ويمكن استخدامه بشكل فردي أو في مجموعة.

xaml
CopyEdit

10. RadioButton

يُستخدم في القوائم التي تتطلب اختياراً واحداً من بين عدة خيارات.

xaml
CopyEdit

  
  

سابعاً: عناصر القوائم

11. Picker

عنصر يُشبه القائمة المنسدلة، يسمح باختيار قيمة من بين مجموعة محددة مسبقاً.

xaml
CopyEdit

  
    
      السعودية
      مصر
      الأردن
    
  

12. ListView

عنصر مركّب يُستخدم لعرض قائمة ديناميكية من العناصر يمكن تمريرها عموديًا، ويدعم القوالب والبيانات المرتبطة (Data Binding).

xaml
CopyEdit

  
    
      
    
  

ثامناً: عناصر التخطيط (Layouts)

13. StackLayout

يُستخدم لترتيب العناصر بشكل رأسي أو أفقي، ويُعتبر من أكثر أدوات التخطيط استخداماً.

xaml
CopyEdit

  
  

14. Grid

أداة تخطيط قوية ترتب العناصر في شبكة من الصفوف والأعمدة.

xaml
CopyEdit

  
    
    
  
  
    
    
  

  
  

جدول يلخص أهم العناصر المرئية في Xamarin.Forms

خاتمة تمهيدية للجزء الثاني

في هذا الجزء من المقال، تمّ التعرّف بشكل موسّع على العناصر المرئية الأكثر استخداماً في تطوير واجهات المستخدم باستخدام Xamarin.Forms، وتوضيح كيفية التعامل معها برمجياً من خلال XAML وC#. وتشكّل هذه العناصر الأساس الذي يُبنى عليه كل تطبيق ناجح في مجال الأجهزة الذكية.

في الجزء الثاني من المقال، سيتم التعمق في العناصر المركبة والمتقدمة مثل CollectionView وCarouselView وShell Navigation، بالإضافة إلى مناقشة إمكانيات الربط بالبيانات (Data Binding)، والتفاعل مع الأنماط (Styles) والقوالب (Templates)، وكيفية تخصيص تجربة المستخدم بشكل أكثر مرونة واحترافية.

المراجع:

1. Microsoft Docs – Xamarin.Forms Controls
   
   https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/

2. Xamarin.Forms Guide – Syncfusion
   
   https://www.syncfusion.com/xamarin-ui-controls