ميزات استخدام XAML
XAML هي لغة ترميز يمكنك استخدامها لإنشاء واجهة المستخدم الخاصة بك بدلا من تعليمة C# البرمجية. باستخدام XAML، يمكنك تقسيم التعليمة البرمجية لواجهة المستخدم والسلوك الخاص بك لتسهيل إدارتهما.
في هذه الوحدة، ستقارن استخدام XAML بتعريف تخطيط واجهة المستخدم باستخدام التعليمات البرمجية C#. ستتعرف على بعض فوائد استخدام XAML كلغة ترميز لتحديد واجهة المستخدم الخاصة بك.
ما هي لغة التمييز؟
لغة التمييز هي لغة كمبيوتر يمكنك استخدامها لتقديم عناصر متعددة في مستند. يمكن وصف العناصر باستخدام علامات معرّفة مسبقًا. العلامات لها معاني محددة في سياق المجال حيث يتم استخدام المستند.
على سبيل المثال، يمكنك استخدام لغة تمييز النص التشعبي (HTML) لإنشاء صفحة ويب يمكنك عرضها في مستعرض ويب. لا تحتاج إلى فهم جميع العلامات المستخدمة في المثال التالي. ما يجب رؤيته هو أن هذه التعليمة البرمجية تصف مستندا يحتوي على النص "مرحبًا بالعالم!" كمحتوياته.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
من المحتمل أنك عملت بالفعل باستخدام لغة تمييز. ربما قمت بإنشاء صفحة ويب باستخدام HTML، أو ربما قمت بتعديل تعريفات Extensible Markup Language (XML) في ملف Visual Studio project.csproj. تقوم أدوات إنشاء Microsoft بتحليل هذا الملف ومعالجته.
من الشائع معالجة الملفات التي تحتوي على لغة التمييز وتفسيرها بواسطة أدوات البرامج الأخرى. هذه الطبيعة التفسيرية للعلامات تبين بالضبط كيف يُقصد بالعمل باستخدام XAML. ومع ذلك، فإن أدوات البرنامج التي تفسرها تساعد على إنشاء واجهة مستخدم التطبيق.
ما هي XAML؟
XAML هي لغة تمييز تعريفية تم إنشاؤها بواسطة Microsoft. تم تصميم XAML لتبسيط عملية إنشاء واجهة المستخدم في التطبيقات.
تحتوي مستندات XAML التي تقوم بإنشائها على عناصر تصف عناصر واجهة مستخدم التطبيق بشكل تعريفي. ضع في اعتبارك أن هذه العناصر في XAML تمثل مباشرة إنشاء العناصر. بمجرد تحديد عنصر في XAML، يمكنك الوصول إليه في ملفات التعليمات البرمجية الخلفية وتحديد السلوك باستخدام التعليمات البرمجية C#.
الفرق بين .NET MAUI XAML وMicrosoft XAML
يستند XAML إلى مواصفات Microsoft 2009 XAML. ومع ذلك، تحدد هذه المواصفات بناء جملة اللغة فقط. كما هو الحال مع Windows Presentation Foundation (WPF) النظام الأساسي العام لـ Windows (UWP) وWinUI 3، وكلها تستخدم XAML، ستتغير العناصر التي تعلن عنها في XAML.
XAML ظهرت لأول مرة في عام 2006، مع Windows Presentation Foundation. إذا كنت تعمل مع Microsoft XAML لفترة من الوقت، يجب أن تبدو تركيبة XAML مألوفة.
هناك بعض الاختلافات الرئيسية بين نكهة .NET MAUI من XAML وXAML المستخدمة من قبل أدوات واجهة المستخدم الأخرى. البنية والمفاهيم متشابهة، ولكن بعض أسماء الفئات والخصائص مختلفة.
إنشاء واجهة مستخدم باستخدام .NET MAUI XAML
أفضل طريقة لرؤية XAML قيد التنفيذ هي إلقاء نظرة على مثال لنوع صفحة ContentPage المرمزة بلغة C#. يمكنك بعد ذلك مقارنتها بصفحة أخرى لها نفس واجهة المستخدم المعرفة باستخدام XAML.
لنفترض أن لديك التعليمات البرمجية ContentPage التالية في تطبيقك:
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
تحتوي الصفحة على حاوية تخطيط، وتسمية اثنين، وإدخالين، وزر. تعالج التعليمات البرمجية أيضا الحدث Clicked للزر . هناك أيضًا بعض خصائص التصميم المحددة حسب العناصر في الصفحة. في وقت التشغيل، على جهاز Android، تبدو الصفحة كما يلي:
على الرغم من أن الصفحة تحتوي على تصميم بسيط، إلا أنها مزيج من السلوك والتصميم في نفس الملف.
يبدو تخطيط الصفحة نفسه المحدد باستخدام XAML كما يلي:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
تبدو التعليمات البرمجية C# التي تهيئ الصفحة وتنفذ معالج الأحداث لحدث ClickedLoginButton عنصر التحكم في ملف التعليمات البرمجية في الخلف كما يلي:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
إشعار
InitializeComponent يقرأ الأسلوب في منشئ الصفحة وصف XAML للصفحة، ويحمل عناصر التحكم المختلفة على تلك الصفحة، ويعين خصائصها. يمكنك استدعاء هذا الأسلوب فقط إذا قمت بتعريف صفحة باستخدام علامات XAML. المثال السابق الذي يوضح كيفية إنشاء واجهة المستخدم باستخدام التعليمات البرمجية InitializeComponentC# لا يستدعي .
تسمح هذه البنية بالفصل بين التصميم والسلوك. يتم تضمين الإعلان الكامل لواجهة المستخدم في ملف مصدر مخصص واحد. وهو منفصل عن سلوك واجهة المستخدم. بالإضافة إلى ذلك، توفر علامات XAML مزيدا من الوضوح للمطور الذي يحاول فهم شكل التطبيق وأسلوبه.
ميزات استخدام XAML
يسمح لك استخدام XAML بفصل منطق السلوك عن تصميم واجهة المستخدم. يساعدك هذا الفصل على بناء كل قطعة بشكل مستقل ويجعل التطبيق بأكمله أسهل في الإدارة أثناء نموه.
يسمح هذا الأسلوب أيضا لمصمم واجهة مستخدم متخصص بالعمل على تحديث شكل واجهة المستخدم وأسلوبها باستخدام أدوات تحرير XAML بشكل منفصل عن مطور يقوم بتحديث منطق واجهة المستخدم.