السابق

التالي

تمرين: إضافة سلوك إلى صفحة XAML

مكتمل

لقد قمت مسبقا بتعديل تطبيق الملاحظات لنقل تخطيط واجهة المستخدم من التعليمات البرمجية C# إلى XAML. أنت الآن جاهز لإضافة الميزات التالية إلى الصفحة:

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

• اضبط ارتفاع عنصر تحكم المحرر على Android وiOS. عند التشغيل على Windows، يكون لعنصر التحكم هذا عرض كاف للسماح للمستخدم بإدخال قدر معقول من النص قبل التمرير. على هاتف Android أو i الهاتف، يؤدي العرض الأضيق إلى حدوث التمرير بسرعة أكبر، لذلك من المفيد توفير مساحة عمودية أكبر.

استخدام مورد ثابت في XAML

ستقوم بإنشاء فئة ثابتة للاحتفاظ بلون خط التطبيق وقيم لون الخلفية. ثم ستستخدم x:Static ملحق العلامات لقراءة هذه القيم من الفئة وتطبيقها على علامات XAML لعناصر التحكم على الصفحة.

1. في Visual Studio، ارجع إلى تطبيق الملاحظات الذي قمت بتحريره في التمرين السابق.

   إشعار

   تتوفر نسخة عمل من التطبيق في مجلد exercise2 في مستودع التمرين الذي نسخته في بداية التمرين السابق.

2. في نافذة مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع الملاحظات، وحدد إضافة، ثم حدد فئة.

3. في مربع الحوار إضافة عنصر جديد، تأكد من تحديد قالب الفئة . قم بتسمية ملف الفئة الجديد SharedResources.cs، ثم حدد إضافة:

   

4. في ملف SharedResources.cs ، استبدل using التوجيهات بالتعليمات البرمجية التالية، وضع علامة على فئة SharedResources ك static:

   namespace Notes;
   
   static class SharedResources
   {
   
   }
   

5. static readonly أضف الحقل FontColor إلى فئة SharedResources. يوفر هذا الحقل حاليا قيمة تتوافق مع اللون الأزرق، ولكن يمكنك تعديله باستخدام أي تركيبة صالحة من قيم RGB:

   static class SharedResources
   {
       public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
   }
   

6. أضف حقلا ثانيا static readonly باسم BackgroundColor، وقم بتعيينه إلى لون من اختيارك:

   static class SharedResources
   {
       ...
       public static readonly Color BackgroundColor = Color.FromRgb(0xFF, 0xF0, 0xAD);
   }
   

7. افتح الملف MainPage.xaml .

8. أضف تعريف مساحة الاسم التالي ل XML إلى ContentPage العنصر، قبل السمة x:Class . يجلب هذا الإعلان الفئات في مساحة اسم C#‎ Notes إلى نطاق في صفحة XAML:

   <ContentPage ...
            xmlns:notes="clr-namespace:Notes"
            x:Class="Notes.MainPage"
            ...>
   

9. أضف السمة الموضحة TextColor في التعليمات البرمجية Label التالية إلى عنصر التحكم . تستخدم x:Static هذه العلامات ملحق العلامات لاسترداد القيم المخزنة static في الحقول في فئة SharedResources :

   <Label Text="Notes"
       HorizontalOptions="Center"
       FontAttributes="Bold" 
       TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
   

10. x:Static استخدم ملحق العلامة لتعيين TextColor السمتين و BackgroundColor لعناصر Editor التحكم وButton. يجب أن تبدو العلامات المكتملة لملف MainPage.xaml كما يلي:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:notes="clr-namespace:Notes"
             x:Class="Notes.UIPage">
    
        <VerticalStackLayout Padding="30,60,30,30">
            <Label Text="Notes"
                HorizontalOptions="Center"
                FontAttributes="Bold" 
                TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
    
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" 
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"/>
    
            <Grid Grid.Row="2" ColumnDefinitions="Auto,30,Auto">
    
                <Button Grid.Column="0"
                        Text="Save" 
                        WidthRequest="100"
                        TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                        BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                        Clicked="OnSaveButtonClicked" />
    
                <Button Grid.Column="2"
                        Text="Delete" 
                        WidthRequest="100"
                        TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                        BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                        Clicked="OnDeleteButtonClicked" />
            </Grid>
        </VerticalStackLayout>
    
    </ContentPage>
    

    إشعار

    تحتوي التعليمات البرمجية XAML هذه على تكرار العلامات التي تعين TextColor خصائص و BackgroundColor . يتيح لك XAML تحديد الموارد التي يمكن تطبيقها عالميا عبر تطبيق باستخدام قاموس موارد في ملف App.xaml . نصف هذه التقنية في وحدة نمطية لاحقة.

11. أعد إنشاء التطبيق وقم بتشغيله باستخدام Windows. تحقق من أن الألوان تطابق تلك التي حددتها في فئة SharedResources . إذا كان لديك الوقت، فحاول أيضا تشغيل التطبيق باستخدام محاكي Android:

    

12. ارجع إلى Visual Studio عند الانتهاء.

إضافة تخصيص خاص بالنظام الأساسي

1. افتح الملف MainPage.xaml في Visual Studio.

2. حدد موقع تعريف Editor عنصر التحكم، وقم بتعديل قيمة الخاصية HeightRequest كما هو موضح في المثال التالي:

   <Editor x:Name="editor"
           ...
           HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
           .../>
   

   تعين هذه العلامات ارتفاع عنصر التحكم الافتراضي إلى 100 وحدة، ولكنها تزيده إلى 500 على Android.

3. أعد إنشاء التطبيق وقم بتشغيله باستخدام Windows، ثم Android. يجب أن يبدو التطبيق كما يلي على كل نظام أساسي:

   

متابعة