تمرين: إنشاء صفحة XAML الأولى

10 دقائق

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

على Android، يبدو التطبيق كما يلي:

The engineer's app running on Android, showing the editor page.

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

تستخدم هذه الوحدة النمطية .NET 8.0 SDK. تأكد من تثبيت .NET 8.0 عن طريق تشغيل الأمر التالي في الوحدة الطرفية للأوامر المفضلة لديك:

dotnet --list-sdks

يظهر إخراج مشابه للمثال التالي:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

تأكد من إدراج إصدار يبدأ بـ 8. إذا لم يتم سرد أي منها أو لم يتم العثور على الأمر، فقم بتثبيت أحدث .NET 8.0 SDK.

مراجعة التطبيق الموجود

استنساخ مستودع GitHub لهذا التمرين محليا على جهاز الكمبيوتر الخاص بك.

إشعار

من الأفضل استنساخ محتوى التمرين أو تنزيله إلى مسار مجلد قصير، مثل C:\dev، لتجنب تجاوز الملفات المنشأة الحد الأقصى لطول المسار.
انتقل إلى مجلد exercise1 في نسختك المحلية من المستودع.
افتح ملف الحل Notes.sln Visual Studio في هذا المجلد أو المجلد في Visual Studio Code.
في نافذة مستكشف الحلول، قم بتوسيع مشروع الملاحظات وافتح الملف MainPage.xaml.cs.

راجع فئة MainPage المحددة في هذا الملف. يحتوي المنشئ على التعليمات البرمجية التالية التي تنشئ واجهة المستخدم:

public MainPage()
{
    var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };

    editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
    editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;

    var buttonsGrid = new Grid() { HeightRequest = 40.0 };
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });

    var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
    saveButton.Clicked += OnSaveButtonClicked;
    Grid.SetColumn(saveButton, 0);
    buttonsGrid.Children.Add(saveButton);

    var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
    deleteButton.Clicked += OnDeleteButtonClicked;
    Grid.SetColumn(deleteButton, 2);
    buttonsGrid.Children.Add(deleteButton);

    var stackLayout = new VerticalStackLayout 
    { 
        Padding = new Thickness(30, 60, 30, 30),
        Children = { notesHeading, editor, buttonsGrid }
    };

    this.Content = stackLayout;
}

تتكون واجهة المستخدم من VerticalStackLayout تحتوي على Labelو Editorو Grid مع ثلاثة أعمدة. يحتوي العمود الأول على عنصر تحكم saveButton ، والثاني هو مفتاح المسافة، ويحتوي العمود الثالث على عنصر تحكم deleteButton .

يوضح الرسم التخطيطي التالي بنية واجهة المستخدم:

A diagram of the UI structure for the Notes app.

لاحظ أن فئة MainPage تحتوي أيضا على أساليب معالجة الأحداث للأزرار وبعض التعليمات البرمجية Editor التي تهيئ عنصر التحكم. هذه التعليمة البرمجية غير مميزة عن تعريف واجهة المستخدم.

قم بإنشاء التطبيق وتشغيله على Windows، فقط لمعرفة شكله. حدد F5 لإنشاء التطبيق وتشغيله.
أغلق التطبيق وارجع إلى Visual Studio أو Visual Studio Code عند الانتهاء.

إنشاء إصدار XAML من واجهة المستخدم

افتح الملف MainPage.xaml . تمثل العلامات في هذه الصفحة صفحة محتوى MAUI فارغة:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.MainPage">

</ContentPage>

إضافة عنصر VerticalStackLayout تحكم إلى صفحة المحتوى:

<ContentPage ...>
    <VerticalStackLayout Margin="30,60,30,30">

    </VerticalStackLayout>
</ContentPage>

أضف عنصر Label تحكم إلى VerticalStackLayout. تعيين خصائص Text و HorizontalTextAlignment و FontAttributes لعنصر التحكم هذا كما هو موضح أدناه:

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label Text="Notes"
               HorizontalOptions="Center"
               FontAttributes="Bold" />
    </VerticalStackLayout>
</ContentPage>

إضافة عنصر Editor تحكم إلى VerticalStackLayout:

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
    </VerticalStackLayout>
</ContentPage>

إضافة طفل Grid إلى VerticalStackLayout. يجب أن يحتوي هذا Grid على ثلاثة أعمدة؛ يتم تغيير حجم العمودين الأول والثالث تلقائيا، بينما يبلغ عرض العمود الثاني 30:
```
<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ColumnDefinitions="Auto, 30, Auto">

        </Grid>
    </VerticalStackLayout>
</ContentPage>
```

Button أضف إلى العمود الأول من التابع Grid. هذا هو الزر حفظ :

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    Clicked="OnSaveButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

أضف آخر Button إلى العمود الثالث من التابع Grid. هذا هو الزر حذف :

<ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button ... />

            <Button Grid.Column="2"
                    Text="Delete" 
                     WidthRequest="100"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

إزالة رمز التخطيط من ملف التعليمات البرمجية في الخلف

في نافذة مستكشف الحلول، قم بتوسيع عقدة MainPage.xaml، وافتح الملف MainPage.xaml.cs.
قم بإزالة حقل المحرر من فئة MainPage .
في الملف MainPage.xaml.cs ، في الدالة الإنشائية MainPage ، قم بإزالة جميع التعليمات البرمجية التي تنشئ عناصر واجهة المستخدم، واستبدلها باستدعاء الأسلوب InitializeComponent . أضف التعليمات البرمجية التي تتحقق مما إذا كان الملف المستخدم لتخزين الملاحظات موجودا، وإذا كان الأمر كذلك، فاقرأ المحتويات وقم بتعبئة الحقل النصي لعنصر تحكم المحرر . يجب أن تبدو الدالة الإنشائية كما يلي:
```
public partial class MainPage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public MainPage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
        {
            editor.Text = File.ReadAllText(_fileName);
        }
    }

    ...
}
```
في قائمة Build ، حدد Rebuild Solution. تحقق من أن التطبيق يبني دون أي أخطاء.
قم بتشغيل التطبيق: يجب أن يعمل تماما كما كان من قبل.
إذا كان لديك الوقت، فقم بنشر التطبيق وتشغيله باستخدام محاكي Android. يجب أن تشبه واجهة مستخدم التطبيق ذلك الموضح في الصورة في بداية هذا التمرين.

متابعة

مراجعة التطبيق الموجود

إنشاء إصدار XAML من واجهة المستخدم

إزالة رمز التخطيط من ملف التعليمات البرمجية في الخلف

الملاحظات