انتقال ItemTemplate به منابع (Resources)

انتقال ItemTemplate به منابع (Resources)

در دو آموزش قبلی چگونگی استفاده از رویکرد XAML جهت ساخت یک کلاس App و نیز چگونگی استفاده از الگوی MVVM جهت تفکیک UI از منطق را یاد گرفتید. در این آموزش یاد خواهید گرفت چطور DateTemplate را از Itemtemplate در listView استخراج کرده و به Resources منتقل کنید.

در App.xaml قطعه کد زیر را وارد کنید تا DataTemplate اضافه شود. برای این منظور باید منابع برنامه (Application Resources) را به شکل زیر تعیین کنید:

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

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

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

             x:Class="ENEI.SessionsApp.App">

  <Application.Resources>

    <ResourceDictionary>

    </ResourceDictionary>

  </Application.Resources>

</Application>

سپس DataTemplate تعریف شده در ItemTemplate مربوط به ListView به شکل زیر را:

<ListView x:Name="SessionsList"

               Grid.Row="1"

               RowHeight="{Binding Converter={StaticResource RowHeightConverter}}"

               ItemSelected="SessionsList_OnItemSelected"

               ItemsSource="{Binding Sessions}"

               SeparatorColor="#0094FF">

  <ListView.ItemTemplate>

    <DataTemplate>

      <!—this DataTemplate-->

    </DataTemplate>

  </ListView.ItemTemplate>

در ResourceDictionary کپی کنید:

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

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

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

             x:Class="ENEI.SessionsApp.App">

  <Application.Resources>

    <ResourceDictionary>

      <DataTemplate>

        <ViewCell>

          <ViewCell.View>

            <Grid BackgroundColor="Transparent" Padding="20,0,20,0">

              <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto" />

                <ColumnDefinition Width="*" />

              </Grid.ColumnDefinitions>

              <Grid.RowDefinitions>

                <RowDefinition Height="5" />

                <RowDefinition Height="Auto" />

                <RowDefinition Height="48" />

                <RowDefinition Height="5" />

              </Grid.RowDefinitions>

              <Image Grid.Row="1" HorizontalOptions="StartAndExpand"

                     Source="{Binding Speaker.ImageUrl}"

                     VerticalOptions="Start">

                <Image.WidthRequest>

                  <OnPlatform Android="50"

                              WinPhone="100"

                              iOS="50"

                              x:TypeArguments="x:Double" />

                </Image.WidthRequest>

                <Image.HeightRequest>

                  <OnPlatform Android="50"

                              WinPhone="100"

                              iOS="50"

                              x:TypeArguments="x:Double" />

                </Image.HeightRequest>

              </Image>

              <StackLayout Grid.Row="1"

                           Grid.Column="1"

                           HorizontalOptions="FillAndExpand"

                           Padding="10,0,0,0">

                <Label Font="Medium"

                       FontAttributes="Bold"

                       Text="{Binding Name}"

                       TextColor="Black" />

                <Label Font="Medium"

                       LineBreakMode="TailTruncation"

                       Text="{Binding Speaker.Name}"

                       TextColor="Black" />

                <Label Font="Small"

                       LineBreakMode="TailTruncation"

                       TextColor="Black" Text="{Binding Details}"/>

              </StackLayout>

              ….

            </DataTemplate>

    </ResourceDictionary>

  </Application.Resources>

</Application>

سپس مقدار x:key را جهت شناسایی  DataTemplate به شکل زیر تعریف کنید:

<Application.Resources>

  <ResourceDictionary>

    <DataTemplate x:Key="SessionTemplate"> 

اگر برنامه را اجرا کنید با یک خطا مواجه خواهید شد. چون باید مبدل ها را جابجا کرده و SessionViewModel را به App.xaml منتقل کنید:

<Application.Resources>

  <ResourceDictionary>

    <viewModels:SessionViewModel x:Key="SessionViewModel"/>

    <converters:FavoriteImageConverter x:Key="FavoriteImageConverter"/>

    <converters:ImageSizeConverter x:Key="ImageSizeConverter"/>

    <converters:ImageUrlConverter x:Key="ImageUrlConverter"/>

    <DataTemplate x:Key="SessionTemplate">

      <ViewCell>   

حالا می توانیدبا استفاده از  کلید تعریف شده در SessionTemplate، از DataTemplate تعریف شده در Resources استفاده کنید.

!-- ListView will be defined here -->

<ListView x:Name="SessionsList"

               Grid.Row="1"

               RowHeight="{Binding Converter={StaticResource RowHeightConverter}}"

               ItemSelected="SessionsList_OnItemSelected"

               ItemsSource="{Binding Sessions}"

               SeparatorColor="#0094FF" ItemTemplate="{StaticResource SessionTemplate}">

به این ترتیب SessionsView.xaml تمیز تر به نظر می رسد و کدهای آن قابل فهم تر است. همچنین در صورت نیاز قابلیت استفاده مجدد ار DataTemplate نیز وجود دارد.