إنشاء واجهة مستخدم متسقة باستخدام الأنماط
- 8 دقائق
في واجهة مستخدم التطبيق متعددة الأنظمة الأساسية .NET (MAUI)، تعد الموارد مفيدة لتجنب القيم المكررة ذات التعليمات البرمجية المضمنة في علامة لغة ترميز التطبيقات القابلة للتوسيع (XAML)، ولكن يمكن أن تكون مملة للتطبيق. يمكنك تعيين كل قيمة خاصية على حدة، والتي يمكن أن تؤدي إلى XAML مزدحم ومطول. توضح لك هذه الوحدة كيفية تجميع إعدادات متعددة في نمط، ما يمكن أن يساعد في إلغاء الفوضى وجعلها أكثر قابلية للصيانة.
كيف يمكن للموارد أن تشوش XAML
يوفر المورد قيمة لخاصية واحدة. ومع ذلك، يمكن أن يؤدي استخدام الكثير من الموارد إلى XAML مطول. لنفترض أنك تريد شكلاً مخصصاً للأزرار. عليك أولاً إنشاء موارد للقيم التي تحتاج إليها. ثم، يكون عليك تطبيق كل مورد على جميع الأزرار. توضح التعليمات البرمجية التالية كيف قد تبحث علامة XAML عن زرين.
<Button
Text = "OK"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
<Button
Text = "Cancel"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
لاحظ كيفية تعيين الخصائص الخمسة نفسها في كل زر من الأزرار. يؤدي استخدام الموارد إلى إزالة الحاجة إلى قيم متكررة ذات تعليمات برمجية مضمنة في أربع منها. ومع ذلك، يصعب قراءة هذا النوع من علامات XAML بسرعة. بالإضافة إلى ذلك، إذا كنت تقوم بتعيين عدد كبير من الخصائص لكل عنصر تحكم، فمن السهل حذف أحدها عن طريق الخطأ، ما يؤدي إلى عدم تناسق في مظهر عناصر التحكم. الحل هو إنشاء نمط يعين جميع الخصائص الأربعة في وقت واحد.
ما هي setter؟
Setters هي المكونات الرئيسية التي تستخدمها لإنشاء الأنماط.
setter هي حاوية لزوج مكون من خاصية/قيمة. يمكنك التفكير في setter على أنها تمثل عبارة تعيين. يمكنك تحديد الخاصية التي يجب تعيينها والقيمة التي يجب تطبيقها. عادة ما تقوم بإنشاء كائنات Setter في علامة XAML. ينشئ المثال التالي كائن Setter للخاصية TextColor .
<Setter Property="TextColor" Value="White" />
يمكنك استخدام مورد للقيمة في setter، كما هو موضح في التعليمات البرمجية التالية. ويكون هذا الأسلوب رائعاً عندما تريد استخدام القيمة نفسها في أساليب setter متعددة.
<Setter Property="TextColor" Value="{StaticResource textColor}" />
إشعار
يجب تنفيذ قيمة الخاصية التي تحددها في setter كخاصية قابلة للربط. جميع الخصائص على عناصر التحكم في .NET MAUI التي تنتهي بخاصية اللاحقة هي خصائص قابلة للربط. إذا كنت تحاول استخدام خاصية مثل TextColor في معين، فتأكد من وجود خاصية قابلة للربط مطابقة تسمى TextColorProperty لعنصر التحكم هذا. في الممارسة العملية، يتم تنفيذ جميع الخصائص تقريبا التي تريد استخدامها في setters بهذه الطريقة.
ما هو النمط؟
النمط هو مجموعة من المعينات التي تستهدف نوعا معينا من عناصر التحكم. يتطلب .NET MAUI نوع هدف حتى يتمكن من التأكد من وجود الخصائص في setters الخاصة بك على هذا النوع.
تظهر التعليمات البرمجية التالية نمطا يجمع بين القيم الأربع من المثال السابق. لاحظ أنه تم تعيين TargetType إلى Button وجميع الخصائص في setters أعضاء في فئة Button . لا يمكنك استخدام هذا النمط لتسمية، لأن فئة Label لا تتضمن الخاصية BorderColor أو BorderWidth.
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#2A84D3" />
<Setter Property="BorderColor" Value="#1C5F9B" />
<Setter Property="BorderWidth" Value="3" />
<Setter Property="TextColor" Value="White" />
</Style>
تحديد نمط
عادة ما تقوم بتعريف الأنماط كموارد داخل كائن ResourceDictionary . يسهل قاموس الموارد استخدام النمط عبر عناصر تحكم متعددة في نفس الصفحة، أو حتى عبر التطبيق بأكمله. توضح التعليمات البرمجية التالية كيفية تعريف نمط كمورد داخل قاموس. لاحظ أن النمط يتم إعطاء اسم باستخدام الخاصية x:Key . تمكنك تسمية نمط من الرجوع إليه من داخل صفحات XAML.
<ContentPage.Resources>
<Style x:Key="MyButtonStyle" TargetType="Button">
...
</Style>
</ContentPage.Resources>
تطبيق نمط
يمكنك إرفاق نمط بعنصر تحكم عن طريق تعيين الاسم إلى الخاصية Style . يؤدي التعيين إلى تطبيق كل كائن من كائنات Setter في النمط على عنصر التحكم الهدف. توضح التعليمات البرمجية التالية كيفية تطبيق نمط زر على زرين.
<Button Text="OK" Style="{StaticResource MyButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource MyButtonStyle}" />
في المثال السابق، استخدمت ملحق علامة StaticResource لإرفاق النمط بعناصر التحكم. ويكون هذا الأسلوب رائعاً عندما لا تحتاج إلى تغيير النمط في وقت التشغيل. ولكن ماذا لو كنت تريد تنفيذ شيء مثل النسق الديناميكية، حيث تحتاج واجهة المستخدم إلى التغيير؟ في هذه الحالة، يمكنك استخدام ملحق علامة DynamicResource لتحميل النمط.
<Button Text="Cancel" Style="{DynamicResource MyButtonStyle}" />
يستمع DynamicResource لاستبدال الخاصية x:Key في قاموس المورد. إذا كتبت تعليمة برمجية تقوم بتحميل نمط جديد في ResourceDictionary بنفس قيمة x:Key ، يتم تطبيق النمط الجديد تلقائيا على واجهة المستخدم الخاصة بك.
استخدام نمط ضمني لعناصر تحكم متعددة
لنفترض أن واجهة المستخدم تحتوي على 50 زراً وأنك تريد تطبيق النمط نفسه عليها كلها. مع ما نعرفه حتى الآن، ستحتاج إلى تعيين خاصية Style على كل زر يدويا. ليس من الصعب إجراء ذلك، لكنه يظل أمراً شاقاً.
النمط الضمني هو نمط تضيفه إلى قاموس مورد دون إعطائه معرف x:Key. يتم تطبيق الأنماط الضمنية تلقائيا على كافة عناصر التحكم في كائن TargetType المحدد.
تظهر التعليمات البرمجية التالية المثال السابق المعلن كنمط ضمني. يتم تطبيق هذا النمط على كل زر على الصفحة.
<ContentPage.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
...
</Style>
</ContentPage.Resources>
هام
تتطلب مطابقة الأنماط الضمنية مع عناصر التحكم تطابقا دقيقا مع TargetType المحدد. لا تتلقى عناصر التحكم التي ترث من النوع الهدف الأنماط. للتأثير على عناصر التحكم الموروثة، يمكنك تعيين السمة Style.ApplyToDerivedTypes إلى True عند تعريف النمط. على سبيل المثال، لتطبيق نمط على نوع الزر والتأثير على أي من الأزرار التي ترث من الزر (مثل ImageButton أو RadioButton أو نوع مخصص تقوم بإنشائه)، يمكنك استخدام نمط مثل هذا.
<ContentPage.Resources>
<Style TargetType="Button"
ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Black" />
</Style>
</ContentPage.Resources>
منع نمط
يمكنك التفكير في النمط على أنه يوفر مجموعة من القيم الافتراضية لعناصر التحكم. قد يكون النمط الموجود قريبا من متطلباتك، ولكنه يحتوي على معين واحد أو اثنين لا تريدهما. في هذه الحالة، يمكنك تطبيق النمط ثم تجاوز القيمة عن طريق تعيين الخصائص مباشرة. يتم تطبيق الإعداد الصريح بعد النمط، بحيث يمنع القيمة من النمط.
لنفترض أنك تريد استخدام النمط التالي لعدة أزرار على صفحتك.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderRadius" Value="10" />
<Setter Property="BorderWidth" Value="3" />
</Style>
يعمل هذا النمط مع جميع الأزرار باستثناء إلغاء الأمر، الذي يحتاج إلى خلفية حمراء. يمكنك استخدام نفس النمط للزر إلغاء طالما قمت أيضا بتعيين الخاصية BackgroundColor مباشرة. توضح التعليمات البرمجية التالية كيفية منع إعداد اللون.
<Button
Text="Cancel"
Style="{StaticResource MyButtonStyle}"
BackgroundColor="Red"
... />
استهداف نوع عنصر أصل
لنفترض أنك تريد لون خلفية مخصصاً للأزرار والتسميات. يمكنك إنشاء أنماط منفصلة لكل نوع، أو يمكنك إنشاء نمط واحد مع تعيين TargetType إلى VisualElement. تعمل هذه التقنية لأن VisualElement هي فئة أساسية لكل من الزر والتسمية.
توضح التعليمات البرمجية التالية نمطاً يستهدف فئة أساسية يتم تطبيقها على نوعين مشتقين مختلفين.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="#2A84D3" />
</Style>
...
<Button Style="{StaticResource MyVisualElementStyle}" ... />
<Label Style="{StaticResource MyVisualElementStyle}" ... />
يحدد هذا المثال النمط باستخدام x:Key وتطبقه عناصر التحكم بشكل صريح. لا يعمل النمط الضمني هنا لأن TargetType لنمط ضمني يجب أن يكون مطابقا تماما لنوع عنصر التحكم.
استخدام BasedOn للاكتساب من نمط
لنفترض أنك تريد إنشاء شكلاً متماسكاً لواجهة المستخدم. فتقرر أن جميع عناصر التحكم يجب أن تستخدم لون خلفية متسقاً. من المحتمل أن يظهر إعداد لون الخلفية في أكثر من نمط واحد. توضح التعليمات البرمجية التالية نمطين بأسلوب setter متكرر.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="TextColor" Value="White" />
</Style>
يمكنك استخدام توريث النمط لتقسيم setter المكرر إلى نمط أساسي. لإنشاء نمط مشتق، قم بتعيين الخاصية BasedOn الخاصة به للإشارة إلى النمط الأساسي. يرث النمط الجديد جميع المعينات من نمطه الأساسي. يمكن للنمط المشتق أيضا إضافة معينات جديدة أو استبدال معين موروث بنمط يحتوي على قيمة مختلفة.
تعرض التعليمات البرمجية التالية الأنماط من المثال السابق المعاد بناء التعليمات البرمجية إلى تسلسل هرمي. لا يظهر أسلوب setter الشائع إلا في النمط الأساسي بدلاً من تكراره. لاحظ أنك تستخدم ملحق علامة StaticResource للبحث عن النمط الأساسي. لا يمكنك استخدام DynamicResource في هذه الحالة.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="Blue" />
</Style>
<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="TextColor" Value="White" />
</Style>
يجب أن تكون قيمة TargetType للأنماط الأساسية والمشتقة متوافقة. لكي تكون الأنماط متوافقة، يجب أن يكون لها نفس الخاصية TargetType ، أو أن يكون TargetType للنمط المشتق تنازليا ل TargetType للنمط الأساسي.
التحقق من المعرفة
الملاحظات
هل كانت هذه الصفحة مفيدة؟
لا
هل تحتاج إلى مساعدة مع هذا الموضوع؟
هل تريد محاولة استخدام Ask Learn لتوضيح هذا الموضوع أو إرشادك خلاله؟