إضافة مربع قائمة أو قائمة منسدمة أو مربع سرد سرد أو أزرار تشغيل إلى تطبيق لوحة

إظهار عمود واحد من البيانات (على سبيل المثال، من جدول متعدد الأعمدة) في تطبيق لوحة لتمكين المستخدمين من تحديد عنصر واحد أو أكثر في القائمة.

• إضافة مربع قائمة للسماح للمستخدمين بتحديد أكثر من خيار واحد.
• قم بإضافة قائمة منسدمة أو مربع سرد والسرد للحصول على مساحة أقل على الشاشة.
• إضافة مجموعة من الأزرار التبادلية للحصول على تأثير تصميم معين.

يركز هذا الموضوع على مربعات القوائم والأزرار التبادلية، ولكن المبادئ نفسها تنطبق على القوائم المنسدلة.

Prerequisites

1. Create a blank canvas app.
2. Learn how to add and configure controls.

إنشاء قائمة بسيطة

1. أضف عنصر تحكم مربع قائمة باسم MyListBox‎، وعيّن خاصية العناصر إلى هذا التعبير:

   ["circle","triangle","rectangle"]
   

   يبدو المصمم مماثلاً لما يلي:

   

2. من علامة التبويب إدراج، حدد الأيقونات، وحدد الدائرة، ثم قم بتحريكها أسفل MyListBox‎ :

   

3. أضف مثلثًا ومستطيلاً، ثم رتب الاشكال في صف تحت MyListBox‎:

   

4. قم بتعيين الخاصية مرئي للأشكال التالية إلى الدالات التالية:

   الشكل	تعيين الدالة Visible إلى
   دائرة	If("circle" in MyListBox.SelectedItems.Value, true)
   مثلث	If("triangle" in MyListBox.SelectedItems.Value, true)
   مستطيل	If("rectangle" in MyListBox.SelectedItems.Value, true)

5. مع الضغط باستمرار على المفتاح Alt، حدد شكلاً أو أكثر في MyListBox.

   يظهر فقط الشكل أو الاشكال التي تحددها.

في هذه الخطوات، استخدمت تعبيرًا لإنشاء قائمة عناصر. يمكنك تطبيق ذلك على عناصر أخرى في عملك. على سبيل المثال، يمكنك استخدام عنصر تحكم قائمة منسدلة لعرض صور المنتجات وأوصاف المنتجات وما إلى ذلك.

إضافة أزرار تبادلية

1. في علامة التبويب الصفحة الرئيسية، حدد شاشة جديدة، ثم حدد فارغة.

2. من علامة التبويب إدراج، حدد عناصر تحكم، ثم حدد زر تبادلي.

   

3. أعد تسمية عنصر تحكم الزر التبادلي إلى اختيارات، وعيّن خاصية العناصر‏‎ إلى هذه الصيغة:
   ["red","green","blue"]
   

   

   إذا لزم الأمر، يمكنك تغيير حجم عنصر التحكم لإظهار كافة الخيارات.

4. من علامة التبويب إدراج، حدد الأيقونات، ثم حدد الدائرة

5. قم بتعيين خاصية التعبئة للدائرة إلى هذه الصيغة:
   If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

   في هذه الصيغة، يتغير لون الدائرة بحسب الزر التبادلي الذي تختاره.

6. حرك الدائرة أسفل عنصر تحكم الزر التبادلي، كما هو موضح في المثال التالي:

   

7. مع الضغط باستمرار على المفتاح Alt، حدد زرًا تبادليًا آخر لتغيير لون الدائرة.

إضافة عنصر إلى قائمة موجودة

1. قم بإضافة عنصر تحكم الزر وقم بتسميته "btnReset".

   ‎لا تعرف كيفية إضافة عنصر تحكم وتسميته وتكوينه؟

2. عيِّن خاصية OnSelect على btnReset وفقًا لهذه الصيغة:

   ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
   

3. قم بتعيين خاصية Text في btnReset على "Reset".

4. أضف عنصر تحكم مربع قائمة باسم lbItems، ثم قم بتعيين خاصية العناصر الخاصة به إلى MyItems.

5. أثناء الضغط باستمرار على المفتاح Alt، اضغط على زر إعادة التعيين.

   ملاحظة

   ينبغي ملء مربع القائمة بالعناصر من مجموعة "MyItems".

6. ترتيب مربع القائمة والزر بحيث يتم وضعهم في صف عموديا.

   

7. أضف عنصر تحكم في إدخال النص، ثم قم بتسميته "txtAdd".

8. تعيين خاصية النص في txtAdd إلى "".

9. قم بإضافة عنصر تحكم الزر، وقم بتسميته "btnAdd".

10. تعيين خاصية Text في btnAdd إلى "Add".

11. قم بتعيين الخاصية OnSelect لـ btnAdd للصيغة التالية:

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    ملاحظة

    • ستعمل دالة collect على إضافة النص من إدخال النص كعنصر في المجموعة.
    • وستعيد دالة إعادة تعيين إدخال النص إلى الحالة الافتراضية الخاصة به.

12. ترتيب txtAdd وbtnAdd بحيث يتم وضعهم في صف عمودي أسفل lbItems وbtnReset.

    

13. معاينة التطبيق بالضغط على F5.

14. إضافة قيمة نصية إلى عنصر تحكم إدخال النص في txtAdd.

15. اضغط على الزر إضافة.

    ملاحظة

    ينبغي ملء مربع القائمة بالعناصر من مجموعة MyItems.

(اختياري) إزالة عنصر من قائمة موجودة

1. قم بإضافة عنصر تحكم الزر وقم بتسميته "btnDelete".

2. تعيين خاصية Text في btnDelete إلى "Delete".

3. قم بتعيين الخاصية OnSelect لـ btnDelete للصيغة التالية:

   Remove(MyItems, lbItems.Selected)
   

4. ترتيب btnDelete بحيث يتم صفه عموديا أسفل btnReset

   

5. معاينة التطبيق بالضغط على F5.

6. اضغط على الزر إعادة تعيين لإعادة تعيين مربع القائمة.

7. اضغط على عنصر في مربع القائمة لتحديده.

8. اضغط على الزر حذف لحذف العنصر.