ساخت SessionDetailView

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

ساخت SessionDetailView

در مرحله قبل برای هر Session یک منو و یک گزینه Details ایجاد کردیم که هدف آن نمایش جزئیات Session انتخاب شده بود.

برای ساخت SessionDetailsView یک صفحه XAML مانند صفحه ای که برای SessionsView ساختیم ایجاد می کنیم. با باز کردن صفحه SessionDetailsView کدهای زیر را مشاهده خواهید کرد:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage

    xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="ENEI.SessionsApp.Views.SessionDetailsView">

</ContentPage>

سپس محتویات آن را مطابق کدزیر تغییر دهید:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="ENEI.SessionsApp.View.SessionDetailsView" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="White" Icon="ic_action_users.png">

  <StackLayout BackgroundColor="White" Spacing="20">

    <StackLayout Orientation="Horizontal" Padding="20,10,0,0">

      <StackLayout.IsVisible>

        <OnPlatform Android="false"  WinPhone="true" iOS="false”" x:TypeArguments="x:Boolean" />

      </StackLayout.IsVisible>

      <Image WidthRequest="48" HeightRequest="38" Source="Images/ic_action_users.png"/>

      <Label FontSize="Large" FontAttributes="Bold" Text="{Binding Name}" TextColor="Black"/>

    </StackLayout>

    <StackLayout Orientation="Horizontal" Padding="20,20,20,0" Spacing="20">

      <Image HorizontalOptions="Start" Source="{Binding Speaker.ImageUrl}" VerticalOptions="Start">

        <Image.WidthRequest>

          <OnPlatform Android="50" WinPhone="200" iOS="50" x:TypeArguments="x:Double" />

        </Image.WidthRequest>

        <Image.HeightRequest>

          <OnPlatform Android="50" WinPhone="200" iOS="50" x:TypeArguments="x:Double" />

        </Image.HeightRequest>

      </Image>

      <StackLayout HorizontalOptions="Start" Padding="10,0,0,0">

        <Label Font="Large" HorizontalOptions="Start" LineBreakMode="WordWrap" Text=" {Binding Speaker.Name}" TextColor="Black" />

        <Label Font="Small" HorizontalOptions="Start" LineBreakMode="TailTruncation" Text="{Binding Date}" TextColor="Black" />

      </StackLayout>

    </StackLayout>

    <ScrollView VerticalOptions="FillAndExpand" Padding="20,20,20,0">

      <Label Font="Medium" HorizontalOptions="Start" LineBreakMode="WordWrap" Text="{Binding Description}"  TextColor="Black" />

    </ScrollView>

  </StackLayout>

</ContentPage>

 و کد تعیین کننده BindingContext و عنوان عبارت است از:

  public partial class SessionDetailsView : ContentPage

        {

            private readonly Session _session;

            public SessionDetailsView(Session session)

            {

                _session = session;

                InitializeComponent();

                Title = session.Name;

                BindingContext = session;

            }

        }

در این صفحه BindingContext بوسیله شی Session تعریف شده است اما می تواند صفحه ای مانند SessionView باشد.

Details gesture (جزئیات حرکت)

حالا که صفحه جدید ایجاد شده است، باید هر دو صفحه را به هم متصل کنید. این کار بوسیله گزینه Detail در هر Session در ListView امکان پذیر است. بنابراین باید در SessionView از detail gesture برای انتقال از SessionView به SessionDetailView استفاده کنیم و Session انتخاب شده را ارسال کنیم. پیاده سازی آن به شکل زیر است:

private void DetailsGesture_OnTapped(object sender, EventArgs e)

        {

            var tappedEventArg = e as TappedEventArgs;

            if (tappedEventArg != null)

            {

                var session = tappedEventArg.Parameter as Session;

                if (session != null)

                {

                    Navigation.PushAsync(new SessionDetailsView(session), true);

                }

            }

        } 

اجرای برنامه

حالا باید به جزئیات Session بروید که نتیجه ی آن را در تصویر زیر مشاهده می کنید:

Navigation از یک SessionDetailsView با استفاده از کلید بازگشت سیاه رنگ در iOS و Android و با بازگشت فیزیکی توسط دکمه بازگشت در Windows phone (که دیگر نیازی به پیاده سازی ندارد) فراهم شده است.