حفظ وصفات الجدة مع Xamarin. الأشكال

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

لدينا جميعًا وصفات عائلية من هذا القبيل ، وبدلاً من نسيانها ، سننشئ في هذه المقالة تطبيقًا للجوّال لنظامي التشغيل iOS و Android باستخدام Xamarin ، وهي نماذج ستوفرها لنفسي وللأجيال القادمة من عائلتي!

لذلك إذا كنت مهتمًا بكتابة تطبيقات الهاتف المحمول ، ولكن ليس لديك الوقت لكتابة نفس التطبيق مرارًا وتكرارًا لكل نظام أساسي ، فهذه المقالة مناسبة لك! لا تقلق إذا كنت لا تعرف C # من سلطة الفراولة المملحة ؛ أكتب تطبيقات Xamarin منذ أكثر من 8 سنوات ، وهذه المقالة عبارة عن جولة عبر Xamarin ، نماذج تهدف إلى تزويدك بمعلومات كافية لبدء التعلم بنفسك.

ما هي هذه الاشياء Xamarin؟

أكثر من مجرد كلمة ممتعة لقولها ، يتيح Xamarin للمطورين إنشاء تطبيقات iOS و Android أصلية باستخدام نفس أدوات SDK وعناصر تحكم واجهة المستخدم المتوفرة تمامًا كما هو الحال في Swift و XCode لنظام التشغيل iOS أو Java و Android Studio لنظام Android.

الفرق هو أن التطبيقات تم تطويرها باستخدام C # باستخدام .NET Framework و Visual Studio أو Visual Studio لنظام التشغيل Mac. ومع ذلك ، فإن التطبيقات الناتجة هي نفسها تمامًا. إنها تبدو وتشعر وتتصرف تمامًا مثل التطبيقات الأصلية المكتوبة في Objective-C أو Swift أو Java.

يتألق Xamarin عندما يتعلق الأمر بمشاركة الكود. يمكن للمطور إنشاء وتخصيص واجهة المستخدم الخاصة به لكل نظام أساسي باستخدام عناصر التحكم الأصلية ومجموعات SDK ، ولكن بعد ذلك يكتب مكتبة من منطق التطبيق المشترك الذي يتم مشاركته عبر الأنظمة الأساسية.

إنها مشاركة الكود حيث يمكن تحقيق توفير هائل للوقت.

ومثل الكعك اللذيذ الذي تخبزه جدتي ، بمجرد إعطاء طعم المشاركة - من الصعب عدم الرغبة في المزيد - وهنا يأتي دور Xamarin. الأشكال.

Xamarin. الأشكال

Xamarin.Forms يأخذ مفهوم تطوير Xamarin التقليدي ويضيف طبقة من التجريد إليه.

بدلاً من تطوير واجهة المستخدم لنظامي التشغيل iOS و Android بشكل منفصل ، تقدم Xamarin.Forms مجموعة أدوات واجهة المستخدم التي تمكنك من كتابة تطبيقات جوال أصلية من قاعدة رمز واحدة.

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

هذه واحدة من مشاكل Xamarin.Forms تحل.

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

إحصائيات مشاركة التعليمات البرمجية للتطبيقات التي تم تطويرها باستخدام Xamarin يمكن أن تكون النماذج خارج المخططات. يحتوي تطبيق تنظيم المؤتمرات على 93٪ من شفرته المشتركة على iOS و 91٪ على Android. التطبيق مفتوح المصدر. ألق نظرة خاطفة على الكود.

توفر Xamarin.Forms أكثر من عناصر تحكم واجهة المستخدم. كما يحتوي أيضًا على إطار عمل MVVM وخدمة مراسلة عامة / فرعية وواجهة برمجة تطبيقات للرسوم المتحركة وخدمة تبعية ، بالإضافة إلى خدمات أخرى.

لكن اليوم ، سنركز على إمكانيات واجهة المستخدم لبناء تطبيق مدير الوصفات.

التطبيق الذي سنبنيه

سيكون لتطبيق مدير الوصفات واجهة مستخدم مباشرة. سنعمل في المطبخ ، لذلك يجب أن يكون سهل الاستخدام!

سيتكون من 3 شاشات . سيظهر الأول قائمة بجميع الوصفات التي تم تحميلها حاليًا في التطبيق.

بعد ذلك ، من خلال النقر على إحدى تلك الوصفات ، ستتمكن من رؤية تفاصيلها على شاشة ثانية:

من هناك يمكنك النقر فوق زر تحرير لإجراء تغييرات على الوصفة على الشاشة الثالثة:

يمكنك أيضًا الوصول إلى هذه الشاشة بالنقر فوق الزر "إضافة" من شاشة قائمة الوصفات.

بيئة التطوير

تم تصميم تطبيقات Xamarin باستخدام C # و .NET ، باستخدام Visual Studio على Windows أو Visual Studio لنظام التشغيل Mac على جهاز Mac ، ولكنك تحتاج إلى تثبيت iOS أو Android SDK والأدوات أيضًا. قد يكون تثبيت كل شيء بالترتيب الصحيح مشكلة بعض الشيء ، ومع ذلك ، فإن مثبتات Visual Studio سيهتمون فقط بتثبيت IDE ، ولكن أيضًا أدوات النظام الأساسي.

على الرغم من أن جهاز Mac مطلوب دائمًا لإنشاء تطبيقات iOS ، فلا يزال بإمكانك باستخدام Xamarin تطوير وتصحيح هذه التطبيقات من Visual Studio على Windows! لذا ، إذا كان نظام التشغيل Windows هو المربى لديك ، فلا داعي لتغيير بيئاتك تمامًا.

لنرى الآن كيف يمكن للنماذج Xamarin.Forms مساعدتنا في حفظ بعض الوصفات العائلية من قاعدة تعليمات برمجية واحدة!

صفحة قائمة الوصفات: تخطيط واجهة المستخدم

لنبدأ بالحديث عن كيفية تخطيطنا لواجهة المستخدم لتطبيقنا لحفظ الوصفات!

بشكل عام ، تتكون كل شاشة في Xamarin. تتكون النماذج من 3 عناصر. Page . عنصر واحد على الأقل يسمى Layout . وعلى الأقل Control .

الصفحة

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

نخبر Xamarin.Forms Page التي سيتم عرضها عبر خدمة الملاحة . ستهتم هذه الخدمة بعد ذلك بعرض أي صفحة بطريقة مناسبة وأصلية لنظام التشغيل.

بمعنى آخر ، تم أيضًا تلخيص رمز التنقل بين الشاشات!

أخيرًا ، على الرغم من أنها ليست الطريقة الوحيدة للقيام بذلك ، إلا أنني أقوم بتشفير واجهة مستخدم Page في XAML. (الطريقة الأخرى هي استخدام C #.) XAML هي لغة ترميز تصف كيف تبدو الصفحة. وفي الوقت الحالي ، يكفي أن نقول ، إنها نوعًا ما تشبه HTML.

تخطيط

يتم ترتيب جميع عناصر التحكم في الصفحة حسب ما يسمى التخطيط.

يمكن إضافة تخطيط واحد أو أكثر إلى الصفحة.

هناك عدة أنواع مختلفة من التخطيطات في النماذج. تتضمن بعض أكثرها شيوعًا تخطيطات Stack و Absolute و Relative و Grid و Scroll و Flex.

الضوابط

ثم أخيرا هناك الضوابط. هذه هي أدوات تطبيقك التي يتفاعل معها المستخدم.

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

عند إضافة عنصر تحكم إلى شاشة ، فإنك تضيفه إلى تخطيط. إنه التخطيط الذي يعتني بمعرفة المكان الذي يجب أن يظهر فيه عنصر التحكم بالضبط على الشاشة.

لذلك لإنشاء الشاشات التالية على iOS و Android على التوالي:

لقد استخدمت XAML هذا:

 <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="https://xamarin.com/schemas/2014/forms" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="SmashingRecipe.RecipeListPage" Title="Recipes"> <ContentPage.Content> <StackLayout> <ListView x:Name="recipesList"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Name}"/> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage.Content> <ContentPage.ToolbarItems> <ToolbarItem Text="Add" /> </ContentPage.ToolbarItems> </ContentPage>

هناك شيئان مهمان يحدثان هنا.

الأول هو <StackLayout> . هذا هو إخبار النماذج بترتيب جميع عناصر التحكم التي تتبع في مكدس.

يحدث أن يكون هناك عنصر تحكم واحد فقط في التخطيط ، وهو <ListView> ، وسنمنحه اسمًا حتى نتمكن من الرجوع إليه لاحقًا.

ثم هناك القليل من الاحتفال المعياري إلى ListView قبل أن نصل إلى ما نحن بعد: <TextCell> . هذا هو إخبار النماذج بعرض نص بسيط في كل خلية في القائمة.

نخبر <TextCell> بالنص الذي نريده أن يعرضه من خلال تقنية تسمى Data Binding . يبدو بناء الجملة مثل Text="{Binding Name}" . حيث Name هو خاصية لفئة Recipe التي تصمم… حسنًا ، الوصفات.

فكيف يتم إضافة الوصفات إلى القائمة؟

إلى جانب كل ملف XAML ، يوجد ملف "رمز خلفي". يسمح لنا هذا الكود الخلفي بالقيام بأشياء مثل التعامل مع أحداث تفاعل المستخدم ، أو إجراء الإعداد ، أو القيام بمنطق تطبيق آخر.

هناك وظيفة يمكن تجاوزها في كل Page تسمى OnAppearing - والتي كما خمنت - يتم استدعاؤها عند ظهور Page .

 protected override void OnAppearing() { base.OnAppearing(); recipesList.ItemsSource = null; recipesList.ItemsSource = App.AllRecipes; }

لاحظ recipesList.ItemsSource = AllRecipes;

هذا يقول ListView - “Hey! تم العثور على جميع بياناتك في App.AllRecipes (متغير على مستوى التطبيق) ويمكنك استخدام أي من خصائص الكائن الفرعي لربط! ".

قائمة الوصفات كلها جيدة وجيدة - لكن لا يمكنك خبز أي شيء دون رؤية تفاصيل الوصفة أولاً - وسنعتني بذلك بعد ذلك.

التعامل مع الحدث

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

لنجعل كل خلية في ListView تستجيب للنقرات حتى نتمكن من معرفة كيفية إعداد الوصفة!

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

معالجة أحداث النقر في عرض القائمة ثم:

 recipesList.ItemSelected += async (sender, eventArgs) => { if (eventArgs.SelectedItem != null) { var detailPage = new RecipeDetailPage(eventArgs.SelectedItem as Recipe); await Navigation.PushAsync(detailPage); recipesList.SelectedItem = null; } };

هناك بعض الأشياء الأنيقة التي تحدث هناك.

عندما يختار شخص ما صفًا ، يتم تشغيل ItemSelected في ListView .

من بين الوسائط التي يتم تمريرها إلى المعالج ، يحتوي كائن eventArgs على خاصية SelectedItem التي تصادف أن تكون كل ما هو مرتبط بـ ListView من قبل.

في حالتنا ، هذه هي فئة Recipe . (لذلك لا يتعين علينا البحث عن الكائن في المصدر الرئيسي - يتم تمريره إلينا.)

صفحة تفاصيل الوصفة

بالطبع ، هناك صفحة توضح لنا المكونات والتوجيهات السرية لكيفية إعداد كل وصفة ، ولكن كيف يتم عرض هذه الصفحة؟

لاحظ await Navigation.PushAsync(detailPage); خط من فوق. كائن Navigation هو كائن مستقل عن النظام الأساسي يتعامل مع انتقالات الصفحة بطريقة أصلية لكل نظام أساسي.

الآن دعنا نلقي نظرة خاطفة على صفحة تفاصيل الوصفة:

تم إنشاء هذه الصفحة باستخدام XAML أيضًا. ومع ذلك ، فإن Layout المستخدم (FlexLayout) رائع جدًا لأنه مستوحى من CSS Flexbox.

 <ContentPage.Content> <ScrollView> <FlexLayout AlignItems="Start" AlignContent="Start" Wrap="Wrap"> <Image Source="buns.png" FlexLayout.Basis="100%" /> <Label Text="{Binding Name}" HorizontalTextAlignment="Center" TextColor="#01487E" FontAttributes="Bold" FontSize="Large" Margin="10, 10" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Ingredients" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Ingredients}" Margin="10,10" FontSize="Small" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Directions" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Directions}" Margin="10,10" FontSize="Small" /> </FlexLayout> </ScrollView> </ContentPage.Content>

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

يساعد هذا بشكل كبير عند التعامل مع أحجام الشاشات المختلفة ، والتي يوجد الكثير منها في تطوير الأجهزة المحمولة.

حسنًا ، مع مساعدة FlexLayout لنا في الحفاظ على شاشة التفاصيل تبدو جيدة ، ما زلنا بحاجة إلى تعديل تلك الوصفات ، أليس كذلك؟

ربما لاحظت هذا:

 <ToolbarItem Text="Edit" Clicked="Edit_Clicked" />

هذا الخط مسؤول عن وضع زر في شريط أدوات التطبيق. Clicked="Edit_Clicked" يخبر الزر أنه عند النقر عليه ، ابحث في الكود الموجود خلف وظيفة بهذا الاسم ، ثم نفذ الكود الخاص به.

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

وصفة تحرير الصفحة

صفحة مع قائمة الوصفات: تحقق! صفحة بها كل التفاصيل لعمل الوصفات: تحقق! كل ما تبقى الآن هو إنشاء الصفحة التي نستخدمها لإدخال أو تغيير الوصفة بينما نشاهد الجدة تعمل بسحرها!

أولاً ، تحقق من الشاشات:

والآن الكود:

 <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TableView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Intent="Form" HasUnevenRows="true"> <TableSection Title="General"> <EntryCell x:Name="recipeNameCell" Label="Name" /> </TableSection> <TableSection Title="Ingredients"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="ingredientsCell" /> </StackLayout> </ViewCell> </TableSection> <TableSection Title="Directions"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="directionsCell" /> </StackLayout> </ViewCell> </TableSection> </TableView> <Button Text="Save" Grid.Row="1" Grid.Column="0" BackgroundColor="#EE3F60" TextColor="White" x:Name="saveButton" /> <Button Text="Cancel" Grid.Row="1" Grid.Column="1" BackgroundColor="#4CC7F2" TextColor="White" x:Name="cancelButton" /> </Grid> </ContentPage.Content>

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

ونلاحظ أيضًا عدم وجود ربط للبيانات هنا. لأنني أردت أن أعطي مثالاً عن كيفية تعبئة عناصر التحكم من الكود الموجود خلف الملف تمامًا:

 void InitializePage() { Title = TheRecipe.Name ?? "New Recipe"; recipeNameCell.Text = TheRecipe.Name; ingredientsCell.Text = TheRecipe.Ingredients; directionsCell.Text = TheRecipe.Directions; saveButton.Clicked += async (sender, args) => { SaveRecipe(); await CloseWindow(); }; cancelButton.Clicked += async (sender, args) => { await CloseWindow(); }; }

ترى أن الخاصية TheRecipe ؟ إنه مستوى الصفحة ، ويحمل جميع البيانات الخاصة بوصفة معينة ، ويتم تعيينه في مُنشئ الصفحة.

ثانيًا ، إن معالجات الأحداث التي تم Clicked عليها لـ saveButton و cancelButton هي بالكامل .NET-ified (ونعم ، أقوم بعمل كلماتي الخاصة كثيرًا.)

أقول إنهم .NET-ified لأن بناء الجملة للتعامل مع هذا الحدث ليس أصليًا لـ Java أو Objective-C. عند تشغيل التطبيق على Android أو iOS ، سيكون السلوك تمامًا مثل Android Click أو iOS TouchUpInside.

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

ها هي - لدينا واجهة مستخدم أسفل لحفظ الوصفات من الآن وحتى نهاية الوقت!

CSS وها؟!؟ أو جعل التطبيق جميلًا

توفير الأفضل للأخير: Xamarin.Forms 3.0 يمنحنا - من بين أشياء أخرى - القدرة على تصميم عناصر التحكم باستخدام CSS!

Xamarin.Forms CSS ليست 100٪ ما قد تستخدمه من تطوير الويب. لكنها قريبة بما يكفي بحيث يشعر أي شخص على دراية بـ CSS وكأنه في المنزل. تماما مثلي في جدتي!

لذلك دعونا نأخذ صفحة تفاصيل الوصفة ونعيد تشكيلها ، لذا فهي تستخدم أوراق الأنماط المتتالية لتعيين العناصر المرئية بدلاً من تعيين كل شيء بشكل مضمّن مباشرةً في XAML.

الخطوة الأولى هي إنشاء مستند CSS! في هذه الحالة سيبدو كما يلي:

 .flexContent { align-items: flex-start; align-content: flex-start; flex-wrap: wrap; } image { flex-basis: 100%; } .spacer { flex-basis: 100%; height: 0; } .foodHeader { font-size: large; font-weight: bold; color: #01487E; margin: 10 10; } .dataLabel { font-size: medium; font-weight: bold; color: #EE3F60; margin: 10 10; } .data { font-size: small; margin: 10 10; }

بالنسبة للجزء الأكبر ، يبدو مثل CSS. هناك فصول هناك. يوجد محدد واحد لنوع الفصل ، Image . ثم مجموعة من واضعي الممتلكات.

بعض واضعي الخصائص ، مثل flex-wrap أو flex-basis base خاصة بـ Xamarin.Forms. من الآن فصاعدًا ، سيبدأ الفريق بأولئك الذين لديهم xf- لاتباع الممارسات القياسية.

سيكون التالي هو تطبيقه على عناصر تحكم XAML.

 <ContentPage.Resources> <StyleSheet Source="../Styles/RecipeDetailStyle.css" /> </ContentPage.Resources> <ContentPage.Content> <ScrollView> <FlexLayout StyleClass="flexContent"> <Image Source="buns.png" /> <Label Text="{Binding Name}" StyleClass="foodHeader" /> <BoxView StyleClass="spacer" /> <Label Text="Ingredients" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Ingredients}" StyleClass="data" /> <BoxView StyleClass="spacer" /> <Label Text="Directions" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Directions}" StyleClass="data" /> </FlexLayout> </ScrollView> </ContentPage.Content>

هذا ما كان عليه الحال من قبل.

في Xamarin.Forms ، للإشارة إلى مستند CSS ، أضف <StyleSheet Source="YOUR DOC PATH" /> . ثم يمكنك الرجوع إلى الفئات الموجودة في كل عنصر تحكم عبر خاصية StyleClass .

إنه ينظف XAML بالتأكيد ، ويجعل نية عنصر التحكم أكثر وضوحًا أيضًا. على سبيل المثال ، من الواضح الآن ما الذي يفعله هؤلاء <BoxView StyleClass="spacer" /> !

ويتم تصميم Image بنفسها لأنها Image والطريقة التي حددنا بها المحدد في CSS.

من المؤكد أن CSS في Xamarin.Forms لم يتم تنفيذها بالكامل مثل ابن عمها على الويب ، لكنها لا تزال رائعة. لديك محددات ، فئات ، يمكنك تعيين الخصائص ، وبالطبع ، هذا الشيء المتتالي بأكمله يحدث!

ملخص

ثلاث شاشات ومنصتين ومقال واحد ووصفات لا تنتهي! وأنت تعرف ماذا أيضا؟ يمكنك إنشاء تطبيقات باستخدام Xamarin.Forms لأكثر من Android و iOS. يمكنك بناء UWP و macOS وحتى منصات Samsung Tizen!

Xamarin.Forms عبارة عن مجموعة أدوات لواجهة المستخدم تتيح لك إنشاء تطبيقات عن طريق كتابة واجهة المستخدم مرة واحدة وتقديم واجهة المستخدم محليًا عبر الأنظمة الأساسية الرئيسية.

يقوم بذلك من خلال توفير SDK وهو تجريد لعناصر التحكم الأكثر استخدامًا عبر الأنظمة الأساسية. بالإضافة إلى مزايا واجهة المستخدم ، توفر Xamarin.Forms أيضًا إطار عمل MVVM كامل الميزات وخدمة نشر / فرعي وواجهة برمجة تطبيقات للرسوم المتحركة وخدمة تبعية.

يمنحك Xamarin.Forms أيضًا جميع مزايا التعليمات البرمجية نفسها التي يوفرها تطوير Xamarin التقليدي. تتم مشاركة أي منطق تطبيق عبر جميع الأنظمة الأساسية. ويمكنك تطوير جميع تطبيقاتك باستخدام IDE واحد باستخدام لغة واحدة - وهذا رائع جدًا!

اين التالي؟ قم بتنزيل الكود المصدري لتطبيق Xamarin.Forms هذا لتجربته بنفسك. ثم لمعرفة المزيد حول Xamarin.Forms ، بما في ذلك القدرة على إنشاء تطبيق كل ذلك داخل متصفحك ، تحقق من هذا البرنامج التعليمي عبر الإنترنت!