استخدم عنصر تحكم لتعديل خاصية عناصر التحكم الأخرى

مكتمل

عند العمل باستخدام عناصر التحكم، يمكنك تعديل الطريقة التي يعمل بها عنصر تحكم معين بناءً على خصائص عنصر تحكم آخر. تسمح هذه الوظيفة للمستخدمين برؤية التغييرات فِي تجربتهم بناءً على مدخلاتهم.

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

لقطة شاشة لقائمة منسدلة تُظهر تسمية نصية صغيرة وتعرض الخط بالحجم 8.

لقطة شاشة لنفس القائمة المنسدلة تُظهر تسمية نصية كبيرة ونفسها تظهر حجم الخط فِي 24.

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

لقطة شاشة لمربع اختيار يسأل

لقطة شاشة لمربع اختيار يسأل

استخدام الإدخالات لضبط مواضع عنصر تحكم

فلنستخدم المثال التالي لفهم تحديد موضع التحكم على اللوحة وكيفية استخدام مدخلات المستخدم لتعديلها. كمقدمة، يعتمد موقع عنصر التحكم على اللوحة على مزيج من خاصيتين: X وY.

  • X - المسافة بين الحافة اليسرى لعنصر التحكم والحافة اليسرى للشاشة.

  • Y - المسافة بين الحافة العلوية لعنصر التحكم والحافة العلوية للشاشة.

تذكّر أنه تنطبق الخاصيتان X وY على جميع عناصر التحكم باستثناء الشاشات. والآن انتقل إلى تطبيقك ودعنا نتعلم من خلال الممارسة.

  1. أولاً، لنقم بإنشاء شاشة جديدة لتطبيقك عن طريق تحديد + شاشة جديدة من لوحة طريقة عرض الشجرة ثم حدّد فارغ.

  2. بعد ذلك، أدخل عنصر تحكم منسدلة. حدّد زر + إدراج وأدخل منسدلة فِي حقل البحث، ثم حدّد قائمة منسدلة

  3. قم بتغيير الخاصية Items على القائمة المنسدلة من DropDownSample إلى ما يلي:

    Table({Position:"Top"},{Position:"Middle"},{Position:"Bottom"})
    

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

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

  5. والآن، لنجعل أيقونة طائرة تظهر بارتفاعات مختلفة على الشاشة استناداً إلى عنصر التحكم الخاص بنا فِي القائمة المنسدلة. للقيام بذلك، حدّد رمز الطائرة وابحث عن الخاصية Y. لاحظ أنها تحتوي على قيمة رقمية ثابتة حالياً. غيّر قيمة الخاصية Y إلى ما يلي:

    Switch(Dropdown1.SelectedText.Value,"Top",0,"Middle",Screen1.Height/2,"Bottom",Screen1.Height/1-Self.Height)
    

    ملاحظة

    قد يكون لعنصر القائمة المنسدلة اسم مختلف عن Dropdown1؛ تأكد من استبدال Dropdown1 بالاسم المحدّد لعنصر التحكم الخاص بك.

  6. للحصول على بعض المتعة (واختبار المعادلة الخاصة بك)، قم بوضع التطبيق فِي وضع الإصدار الأولي. والآن، حدّد كل موضع من القائمة المنسدلة. لاحظ أن رمز الطائرة يضبط 'altitude' (أو إحداثيات Y ) أثناء تغيير قيمة القائمة المنسدلة!

الشرح

تمكنا من إنجاز حركة رمز الطائرة لدينا لأن الخاصية Y الخاصة بنا هي مجرد قيمة رقمية. ومع ذلك، لن تعمل جميع الأرقام، لذلك كان علينا تقديم أرقام من شأنها أن تظهر رمزنا على الشاشة.

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

استخدمنا أيضًا الخاصية Height لرمز الطائرة (Self.Height) لقيمة "Bottom" حتى نتمكن من رؤية رمز الطائرة فِي الجزء السفلي من الشاشة، وإلا فسيكون خارج الشاشة القابلة للعرض.

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