شماره تماس 09336863931 | 09178169907 پست الکترونیک provid.ir@gmail.com

آموزش رایگان ساخت برنامه با Xamarin.Forms و MvvmCross قسمت #9

آموزش رایگان ساخت برنامه با Xamarin.Forms و MvvmCross قسمت #9 را در این قسمت از وبسایت آموزش برنامه نویسی پرووید دانلود کنید.

آموزش رایگان ساخت برنامه با Xamarin.Forms و MvvmCross قسمت #9

یکی از موضوعاتی که قصد پیاده سازی آن را داریم این است که با کلیک کردن کاربر بر روی هر کدام از Contact ها که درون لیستی بر روی صفحه ی اصلی برنامه نشان داده می شوند صفحه ی دیگری ظاهر شود و جزئیات مربوط به آن Contact را نشان دهد. به همین منظور یک View Model دیگر به همراه View مربوط به آن را میسازسم و نام آن ها را به ترتیب ContactDetailsViewModel و ContactDetailsView مز گذاریم. تصویر زیر کد مربوط به این ViewModel را نشان می دهد.

public class ContactDetailsViewModel : MvxViewModel<Contact>
{
 public Contact Contact { get; private set; }
 public override void Prepare(Contact parameter)
 {
 Contact = parameter;
 }
}

همانطور که در تصویر مشاهده می کنید این کلاس از کلاس جنریک MvxViewModel ارث بری کرده است. این کلاس متد abstract ی با نام Prepare را دارد که پارامتری از نوع کلاس Contact را دیافت می کند. این پارامتر در زمان Navigation از MainViewModel به ContactDetailsViewModel به این کلاس پاس داده می شود. ضمنا عملیات Navigation با استفاده از اینترفیس INavigationService ی اتفاق می افتد که به همراه MvvmCross در دسترس ما قرار گرفته است. یک پارامتر از نوع این اینترفیس را به تابع سازنده ی کلاس MainViewModel اضافه خواهیم کرد. کد زیر این موضوع را نشان می دهد.


private IMvxNavigationService NavigationService { get; }
public MainViewModel(IMvxNavigationService navigationService, IContactService contactService)
{
 NavigationService = navigationService;
 ContactService = contactService;
}

 

 

آخرین موضوعی که باید انجام شود تعریف متدی است که امکان عملیات Navigation را فراهم کند. متد ShowContactDetails را به همین منظور مطابق کد زیر اصافه خواهیم کرد.


public Task ShowContactDetails(Contact contact)
{
 return NavigationService.Navigate&lt;ContactDetailsViewModel, Contact&gt;(contact);
}

تغییرات نهایی اپدیت کردن کد XAML مربوط به MainPage می باشد تا بتواند لیستی از Contact ها را نشان دهد. علاوه بر این فایل ContacContactDetail اضافه خواهیم کرد. کد زیر فایل MainPage را نشان می دهد.

<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage
 xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:TypeArguments="viewModels:MainViewModel"
 xmlns:viewModels="clr-namespace:XFwMvx.Core.ViewModels;assembly=XFwMvx.Core"
 x:Class="XFwMvx.Views.MainPage">
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <Label Text="{Binding WelcomeText}" 
 HorizontalOptions="Center"/>
 <ListView ItemsSource="{Binding Contacts}"
 ItemSelected="ContactSelected"
 Grid.Row="1" >
 <ListView.ItemTemplate>
 <DataTemplate>
 <ViewCell>
 <StackLayout>
 <Label Text="{Binding Id}"/>
 <Label Text="{Binding Name}"/>
 </StackLayout>
 </ViewCell>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </Grid>
</views:MvxContentPage>

رویداد ItemSelected مربوط به ListView که در این فایل تعریف شده است نیز باید شبیه کد زیر هندل شود.


private void ContactSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)
{
 ViewModel.ShowContactDetails(e.SelectedItem as Contact);
}

ضمنا یک Content Page با نام ContactDetailsPage به پروژه اضافه خواهیم کرد. تصویر زیر این موضوع را نشان می دهد.

 

https://visualstudiomagazine.com/Articles/2018/05/08/~/media/ECG/visualstudiomagazine/Images/2018/05/0518vsm_Randolph_Fig8.asxh

قسمت بعدی آموزش رایگان ساخت برنامه با Xamarin.Forms و MvvmCross

لطفاً، این آموزش را در قسمت بعدی دنبال کنید.

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

CLOSE
CLOSE