Bagikan melalui

Membuat Xamarin.Forms DataTemplate

  • Artikel

Templat data dapat dibuat sebaris, di ResourceDictionary, atau dari jenis kustom atau jenis sel yang sesuai Xamarin.Forms . Artikel ini mengeksplorasi setiap teknik.

Skenario penggunaan umum untuk adalah DataTemplate menampilkan data dari kumpulan objek dalam ListView. Tampilan data untuk setiap sel dalam ListView dapat dikelola dengan mengatur ListView.ItemTemplate properti ke DataTemplate. Ada sejumlah teknik yang dapat digunakan untuk mencapai hal ini:

Terlepas dari teknik yang digunakan, hasilnya adalah bahwa tampilan setiap sel di ListView didefinisikan oleh DataTemplate, seperti yang ditunjukkan pada cuplikan layar berikut:

ListView dengan DataTemplate

Membuat DataTemplate Sebaris

Properti ListView.ItemTemplate dapat diatur ke sebaris DataTemplate. Templat sebaris, yang merupakan templat yang ditempatkan sebagai anak langsung dari properti kontrol yang sesuai, harus digunakan jika tidak perlu menggunakan kembali templat data di tempat lain. Elemen yang ditentukan dalam DataTemplate menentukan tampilan setiap sel, seperti yang ditunjukkan dalam contoh kode XAML berikut:

<ListView Margin="0,20,0,0">
    <ListView.ItemsSource>
        <x:Array Type="{x:Type local:Person}">
            <local:Person Name="Steve" Age="21" Location="USA" />
            <local:Person Name="John" Age="37" Location="USA" />
            <local:Person Name="Tom" Age="42" Location="UK" />
            <local:Person Name="Lucas" Age="29" Location="Germany" />
            <local:Person Name="Tariq" Age="39" Location="UK" />
            <local:Person Name="Jane" Age="30" Location="USA" />
        </x:Array>
    </ListView.ItemsSource>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    ...
                    <Label Text="{Binding Name}" FontAttributes="Bold" />
                    <Label Grid.Column="1" Text="{Binding Age}" />
                    <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Anak dari sebaris DataTemplate harus dari, atau berasal dari, jenis Cell. Contoh ini menggunakan ViewCell, yang berasal dari Cell. Tata letak di ViewCell dalam dikelola di sini oleh Grid. Grid berisi tiga Label instans yang mengikat propertinya Text ke properti yang sesuai dari setiap Person objek dalam koleksi.

Kode C# yang setara ditampilkan dalam contoh kode berikut:

public class WithDataTemplatePageCS : ContentPage
{
    public WithDataTemplatePageCS()
    {
        ...
        var people = new List<Person>
        {
            new Person { Name = "Steve", Age = 21, Location = "USA" },
            ...
        };

        var personDataTemplate = new DataTemplate(() =>
        {
            var grid = new Grid();
            ...
            var nameLabel = new Label { FontAttributes = FontAttributes.Bold };
            var ageLabel = new Label();
            var locationLabel = new Label { HorizontalTextAlignment = TextAlignment.End };

            nameLabel.SetBinding(Label.TextProperty, "Name");
            ageLabel.SetBinding(Label.TextProperty, "Age");
            locationLabel.SetBinding(Label.TextProperty, "Location");

            grid.Children.Add(nameLabel);
            grid.Children.Add(ageLabel, 1, 0);
            grid.Children.Add(locationLabel, 2, 0);

            return new ViewCell { View = grid };
        });

        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children = {
                ...
                new ListView { ItemsSource = people, ItemTemplate = personDataTemplate, Margin = new Thickness(0, 20, 0, 0) }
            }
        };
    }
}

Di C#, sebaris DataTemplate dibuat menggunakan kelebihan beban konstruktor yang menentukan Func argumen.

Membuat DataTemplate dengan Jenis

Properti ListView.ItemTemplate juga dapat diatur ke yang DataTemplate dibuat dari jenis sel. Keuntungan dari pendekatan ini adalah bahwa tampilan yang ditentukan oleh jenis sel dapat digunakan kembali oleh beberapa templat data di seluruh aplikasi. Kode XAML berikut menunjukkan contoh pendekatan ini:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             ...>
    <StackLayout Margin="20">
        ...
        <ListView Margin="0,20,0,0">
           <ListView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    ...
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <local:PersonCell />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Di sini, ListView.ItemTemplate properti diatur ke DataTemplate yang dibuat dari jenis kustom yang menentukan tampilan sel. Jenis kustom harus berasal dari jenis ViewCell, seperti yang ditunjukkan dalam contoh kode berikut:

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="DataTemplates.PersonCell">
     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.2*" />
            <ColumnDefinition Width="0.3*" />
        </Grid.ColumnDefinitions>
        <Label Text="{Binding Name}" FontAttributes="Bold" />
        <Label Grid.Column="1" Text="{Binding Age}" />
        <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
    </Grid>
</ViewCell>

ViewCellDalam tata letak , dikelola di sini oleh Grid. Grid berisi tiga Label instans yang mengikat propertinya Text ke properti yang sesuai dari setiap Person objek dalam koleksi.

Kode C# yang setara ditampilkan dalam contoh berikut:

public class WithDataTemplatePageFromTypeCS : ContentPage
{
    public WithDataTemplatePageFromTypeCS()
    {
        ...
        var people = new List<Person>
        {
            new Person { Name = "Steve", Age = 21, Location = "USA" },
            ...
        };

        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children = {
                ...
                new ListView { ItemTemplate = new DataTemplate(typeof(PersonCellCS)), ItemsSource = people, Margin = new Thickness(0, 20, 0, 0) }
            }
        };
    }
}

Di C#, DataTemplate dibuat menggunakan kelebihan beban konstruktor yang menentukan jenis sel sebagai argumen. Jenis sel harus berasal dari tipe ViewCell, seperti yang diperlihatkan dalam contoh kode berikut:

public class PersonCellCS : ViewCell
{
    public PersonCellCS()
    {
        var grid = new Grid();
        ...
        var nameLabel = new Label { FontAttributes = FontAttributes.Bold };
        var ageLabel = new Label();
        var locationLabel = new Label { HorizontalTextAlignment = TextAlignment.End };

        nameLabel.SetBinding(Label.TextProperty, "Name");
        ageLabel.SetBinding(Label.TextProperty, "Age");
        locationLabel.SetBinding(Label.TextProperty, "Location");

        grid.Children.Add(nameLabel);
        grid.Children.Add(ageLabel, 1, 0);
        grid.Children.Add(locationLabel, 2, 0);

        View = grid;
    }
}

Catatan

Perhatikan bahwa Xamarin.Forms juga menyertakan jenis sel yang dapat digunakan untuk menampilkan data sederhana dalam ListView sel. Untuk informasi selengkapnya, lihat Tampilan Sel.

Membuat DataTemplate sebagai Sumber Daya

Templat data juga dapat dibuat sebagai objek yang dapat digunakan kembali dalam ResourceDictionary. Ini dicapai dengan memberikan setiap deklarasi atribut unik x:Key , yang menyediakannya dengan kunci deskriptif di ResourceDictionary, seperti yang ditunjukkan dalam contoh kode XAML berikut:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...>
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="personTemplate">
                 <ViewCell>
                    <Grid>
                        ...
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Margin="20">
        ...
        <ListView ItemTemplate="{StaticResource personTemplate}" Margin="0,20,0,0">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    ...
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>
</ContentPage>

DataTemplate ditetapkan ke ListView.ItemTemplate properti dengan menggunakan StaticResource ekstensi markup. Perhatikan bahwa saat DataTemplate ditentukan dalam halaman ResourceDictionary, itu juga dapat ditentukan pada tingkat kontrol atau tingkat aplikasi.

Contoh kode berikut menunjukkan halaman yang setara di C#:

public class WithDataTemplatePageCS : ContentPage
{
  public WithDataTemplatePageCS ()
  {
    ...
    var personDataTemplate = new DataTemplate (() => {
      var grid = new Grid ();
      ...
      return new ViewCell { View = grid };
    });

    Resources = new ResourceDictionary ();
    Resources.Add ("personTemplate", personDataTemplate);

    Content = new StackLayout {
      Margin = new Thickness(20),
      Children = {
        ...
        new ListView { ItemTemplate = (DataTemplate)Resources ["personTemplate"], ItemsSource = people };
      }
    };
  }
}

DataTemplate ditambahkan ke ResourceDictionary menggunakan Add metode , yang menentukan Key string yang digunakan untuk mereferensikan DataTemplate saat mengambilnya.

Ringkasan

Artikel ini telah menjelaskan cara membuat templat data, sebaris, dari jenis kustom, atau di ResourceDictionary. Templat sebaris harus digunakan jika tidak perlu menggunakan kembali templat data di tempat lain. Atau, templat data dapat digunakan kembali dengan menentukannya sebagai jenis kustom, atau sebagai sumber daya tingkat kontrol, tingkat halaman, atau tingkat aplikasi.