ListView セルの外観をカスタマイズします。Customizing ListView Cell Appearance

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

ListViewスクロール可能なViewCellリストを表示します。これは、を使用してカスタマイズできます。ListView presents scrollable lists, which can be customized through the use of ViewCells. ViewCells テキストとイメージを表示、true または false の状態を示すおよびユーザー入力を受け取るのために使用できます。ViewCells can be used for displaying text and images, indicating a true/false state and receiving user input.

セルの構築Built in Cells

多くの単純なアプリケーションに最適な組み込みのセルには Xamarin.Forms できます。Xamarin.Forms comes with built-in cells that work for many simple applications:

  • TextCell –テキストを表示します。TextCell – for displaying text
  • ImageCell –テキストとイメージを表示します。ImageCell – for displaying an image with text.

2 つの追加セル SwitchCell EntryCell でよく使用されていないが、使用できるはListViewします。Two additional cells, SwitchCell and EntryCell are available, however they aren't commonly used with ListView. 参照してください TableView これらのセルの詳細についてはします。See TableView for more information about these cells.

TextCellTextCell

TextCell 詳細なテキストとして 2 番目の行で必要に応じて、テキストを表示するためのセルです。TextCell is a cell for displaying text, optionally with a second line as detail text.

パフォーマンスは、カスタムと比べると非常に良好なので、実行時にネイティブ コントロールとして TextCells がレンダリングされますViewCellします。TextCells are rendered as native controls at runtime, so performance is very good compared to a custom ViewCell. TextCells に設定することができます、カスタマイズ可能な場合は。TextCells are customizable, allowing you to set:

  • Text – 大きいフォントで、最初の行に表示されるテキスト。Text – the text that is shown on the first line, in large font.
  • Detail – 小さいフォントで、最初の行の下に表示されるテキスト。Detail – the text that is shown underneath the first line, in a smaller font.
  • TextColor – テキストの色。TextColor – the color of the text.
  • DetailColor – 詳細なテキストの色DetailColor – the color of the detail text

ImageCellImageCell

ImageCell、のようなTextCell、テキストおよびセカンダリの詳細なテキストを表示するために使用でき、各プラットフォームのネイティブ コントロールを使用して優れたパフォーマンスを提供します。ImageCell, like TextCell, can be used for displaying text and secondary detail text, and it offers great performance by using each platform's native controls. ImageCell 異なるTextCellイメージ、テキストの左側に表示します。ImageCell differs from TextCell in that it displays an image to the left of the text.

ImageCell 連絡先またはムービーの一覧などの視覚的要素を使用してデータの一覧を表示する必要がある場合に役立ちます。ImageCell is useful when you need to display a list of data with a visual aspect, such as a list of contacts or movies. ImageCells に設定することができます、カスタマイズ可能な場合は。ImageCells are customizable, allowing you to set:

  • Text – 大きいフォントで、最初の行に表示されるテキストText – the text that is shown on the first line, in large font
  • Detail – テキストのフォント サイズを小さく、最初の行の下に表示されます。Detail – the text that is shown underneath the first line, in a smaller font
  • TextColor – テキストの色TextColor – the color of the text
  • DetailColor – 詳細なテキストの色DetailColor – the color of the detail text
  • ImageSource – テキストの横に表示するイメージImageSource – the image to display next to the text

カスタムのセルCustom Cells

組み込みのセルが、必要なレイアウトを指定しなかった場合、カスタム セルは、必要なレイアウトを実装します。When the built-in cells don't provide the required layout, custom cells implemented the required layout. たとえば、2 つのラベルを持つ同じ重み付けをセルに表示したい場合があります。For example, you may want to present a cell with two labels that have equal weight. ATextCellための十分なできなくなるため、TextCellが小さく、1 つのラベル。A TextCell would be insufficient because the TextCell has one label that is smaller. ほとんどのセルのカスタマイズは、(追加ラベル、画像やその他の情報を表示) 読み取り専用データを追加します。Most cell customizations add additional read-only data (such as additional labels, images or other display information).

全てのカスタムセルは、すべての組み込みのセルが使用する基本クラスである ViewCell から派生する必要があります。All custom cells must derive from ViewCell, the same base class that all of the built-in cell types use.

Xamarin.Forms 2 に導入された新しいキャッシュ動作上、ListViewコントロール カスタム セルの種類によってスクロールのパフォーマンスを向上させるために設定することができます。Xamarin.Forms 2 introduced a new caching behavior on the ListView control which can be set to improve scrolling performance for some types of custom cells.

これは、カスタムのセルの例を示します。This is an example of a custom cell:

XAMLXAML

上記のレイアウトを作成する XAML を次に示します。The XAML to create the above layout is below:

<?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="demoListView.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

上記の XAML は多くのことを行っています。The XAML above is doing a lot. 分割してみましょう。Let's break it down:

  • カスタムのセルが入れ子になっている、 DataTemplate、内であるListView.ItemTemplateします。The custom cell is nested inside a DataTemplate, which is inside ListView.ItemTemplate. これは、その他のセルを使用する場合と同じプロセスです。This is the same process as using any other cell.
  • ViewCell カスタムのセルの種類です。ViewCell is the type of the custom cell. 子、DataTemplate要素でまたは型から派生する必要がありますViewCellします。The child of the DataTemplate element must be of or derive from type ViewCell.
  • その内部に注意してください、 ViewCell、レイアウトは、によって管理される、StackLayoutします。Notice that inside the ViewCell, layout is managed by a StackLayout. このレイアウトでは、背景色をカスタマイズできます。This layout allows us to customize the background color. 注意してくださいの任意のプロパティStackLayoutはバインド可能なことができますが、ここで示されていませんが、カスタムのセルの内部にバインドします。Note that any property of StackLayout that is bindable can be bound inside a custom cell, although that is not shown here.
  • 内では、すべての Xamarin. フォームレイアウトでレイアウトを管理できます。 ViewCellInside the ViewCell, layout can be managed by any Xamarin.Forms layout.

C#C#

C# でカスタムのセルを指定することは、XAML 相当するものよりもやや冗長です。Specifying a custom cell in C# is a bit more verbose than the XAML equivalent. では、始めましょう。Let's take a look:

最初に、カスタム セル クラスを定義でViewCell基底クラスとして。First, define a custom cell class, with ViewCell as the base class:

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var image = new Image ();
            StackLayout cellWrapper = new StackLayout ();
            StackLayout horizontalLayout = new StackLayout ();
            Label left = new Label ();
            Label right = new Label ();

            //set bindings
            left.SetBinding (Label.TextProperty, "title");
            right.SetBinding (Label.TextProperty, "subtitle");
            image.SetBinding (Image.SourceProperty, "image");

            //Set properties for desired design
            cellWrapper.BackgroundColor = Color.FromHex ("#eee");
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            right.HorizontalOptions = LayoutOptions.EndAndExpand;
            left.TextColor = Color.FromHex ("#f35e20");
            right.TextColor = Color.FromHex ("503026");

            //add views to the view hierarchy
            horizontalLayout.Children.Add (image);
            horizontalLayout.Children.Add (left);
            horizontalLayout.Children.Add (right);
            cellWrapper.Children.Add (horizontalLayout);
            View = cellWrapper;
        }
    }

使用してページのコンストラクターに、 ListView、ListView の設定ItemTemplateプロパティを新しいDataTemplate:In your constructor for the page with the ListView, set the ListView's ItemTemplate property to a new DataTemplate:

public partial class ImageCellPage : ContentPage
    {
        public ImageCellPage ()
        {
            InitializeComponent ();
            listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
        }
    }

注意のコンストラクターDataTemplateは、型を受け取ります。Note that the constructor for DataTemplate takes a type. Typeof 演算子の CLR 型を取得するCustomCellします。The typeof operator gets the CLR type for CustomCell.

バインド コンテキストの変更Binding Context Changes

セルのカスタム型のバインドする場合に BindableProperty のインスタンスを表示する UI コントロール、BindableProperty値を使用する必要があります、 OnBindingContextChanged に表示されるデータを設定する上書き各セルはセル コンストラクターの次のコード例で示したなく:When binding to a custom cell type's BindableProperty instances, the UI controls displaying the BindableProperty values should use the OnBindingContextChanged override to set the data to be displayed in each cell, rather than the cell constructor, as demonstrated in the following code example:

public class CustomCell : ViewCell
{
    Label nameLabel, ageLabel, locationLabel;

    public static readonly BindableProperty NameProperty =
        BindableProperty.Create ("Name", typeof(string), typeof(CustomCell), "Name");
    public static readonly BindableProperty AgeProperty =
        BindableProperty.Create ("Age", typeof(int), typeof(CustomCell), 0);
    public static readonly BindableProperty LocationProperty =
        BindableProperty.Create ("Location", typeof(string), typeof(CustomCell), "Location");

    public string Name {
        get { return(string)GetValue (NameProperty); }
        set { SetValue (NameProperty, value); }
    }

    public int Age {
        get { return(int)GetValue (AgeProperty); }
        set { SetValue (AgeProperty, value); }
    }

    public string Location {
        get { return(string)GetValue (LocationProperty); }
        set { SetValue (LocationProperty, value); }
    }
    ...

    protected override void OnBindingContextChanged ()
    {
        base.OnBindingContextChanged ();

        if (BindingContext != null) {
            nameLabel.Text = Name;
            ageLabel.Text = Age.ToString ();
            locationLabel.Text = Location;
        }
    }
}

OnBindingContextChanged ときに上書きを呼び出すが、 BindingContextChanged の値への応答でのイベントの起動、 BindingContext プロパティを変更します。The OnBindingContextChanged override will be called when the BindingContextChanged event fires, in response to the value of the BindingContext property changing. そのため、ときに、BindingContext変更されると、表示する UI コントロール、 BindableProperty 値は、データを設定する必要があります。Therefore, when the BindingContext changes, the UI controls displaying the BindableProperty values should set their data. なお、BindingContextをチェックする必要があります、null値がさらにガベージ コレクションの Xamarin.Forms で設定できます、OnBindingContextChangedオーバーライドが呼び出されます。Note that the BindingContext should be checked for a null value, as this can be set by Xamarin.Forms for garbage collection, which in turn will result in the OnBindingContextChanged override being called.

またに UI コントロールをバインドできます、 BindableProperty をオーバーライドする必要がなくなりますが、その値を表示するインスタンス、OnBindingContextChangedメソッド。Alternatively, UI controls can bind to the BindableProperty instances to display their values, which removes the need to override the OnBindingContextChanged method.

注意

オーバーライドするときにOnBindingContextChanged、基本クラスのことを確認OnBindingContextChangedメソッドが呼び出されると、登録済みのデリゲートを受け取る、BindingContextChangedイベント。When overriding OnBindingContextChanged, ensure that the base class's OnBindingContextChanged method is called so that registered delegates receive the BindingContextChanged event.

XAML では、カスタムのセルの種類のデータへのバインドを実現する次のコード例に示すように。In XAML, binding the custom cell type to data can be achieved as shown in the following code example:

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:CustomCell Name="{Binding Name}" Age="{Binding Age}" Location="{Binding Location}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

これには、バインド、 NameAgeLocationでバインド可能なプロパティ、CustomCellインスタンスに、 NameAgeLocation基になるコレクション内の各オブジェクトのプロパティ。This binds the Name, Age, and Location bindable properties in the CustomCell instance, to the Name, Age, and Location properties of each object in the underlying collection.

C# の等価なバインドは、次のコード例に示されます。The equivalent binding in C# is shown in the following code example:

var customCell = new DataTemplate (typeof(CustomCell));
customCell.SetBinding (CustomCell.NameProperty, "Name");
customCell.SetBinding (CustomCell.AgeProperty, "Age");
customCell.SetBinding (CustomCell.LocationProperty, "Location");

var listView = new ListView {
    ItemsSource = people,
    ItemTemplate = customCell
};

IOS と Android での場合、 ListView 要素がリサイクルされると、カスタムのセルは、カスタム レンダラーを使用して、カスタム レンダラーがプロパティの変更通知を正しく実装する必要があります。On iOS and Android, if the ListView is recycling elements and the custom cell uses a custom renderer, the custom renderer must correctly implement property change notification. セルが再利用されると、PropertyChanged イベントが発生し、それらセルのプロパティの値は、binding context が有効なセルに更新される時を変更します。When cells are reused their property values will change when the binding context is updated to that of an available cell, with PropertyChanged events being raised. より詳しい情報は Customizing a ViewCell を参照してください。For more information, see Customizing a ViewCell. セルのリサイクルの詳細については、キャッシュ戦略を参照してください。For more information about cell recycling, see Caching Strategy.