サーチ…


ListBoxでのDataTemplateの使用

次のXAMLスニペットがあるとします。

<ListBox x:Name="MyListBox" />

次に、このXAMLファイルのコードビハインドで、コンストラクタに次のコードを記述します。

MyListBox.ItemsSource = new[]
{
    1, 2, 3, 4, 5
};

アプリケーションを実行すると、入力した番号のリストが取得されます。

ここに画像の説明を入力

しかし、このようにカスタムタイプのオブジェクトのリストを表示しようとすると

MyListBox.ItemsSource = new[]
{
    new Book { Title = "The Hitchhiker's Guide to the Galaxy", Author = "Douglas Adams" },
    new Book { Title = "The Restaurant at the End of the Universe", Author = "Douglas Adams" },
    new Book { Title = "Life, the Universe and Everything", Author = "Douglas Adams" },
    new Book { Title = "So Long, and Thanks for All the Fish", Author = "Douglas Adams" },
    new Book { Title = "Mostly Harmless", Author = "Douglas Adams" }
};

Bookというクラスがあると仮定します

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
}

リストは次のようになります。

ここに画像の説明を入力

リストボックスは、ブックオブジェクトを正しく表示するために「十分にスマート」であると仮定していますが、実際にはBookタイプのフルネームが表示されます。 ListBoxが実際に何を表示するかは、表示するオブジェクトに対して組み込みのToString()メソッドを呼び出すことで、数値の場合は望ましい結果が得られますが、カスタムクラスのオブジェクトのToString()を呼び出すと、そのスクリーンショットに見られるように、そのタイプ。

これを解決するには、BookクラスのToString()を書いてください。

public override string ToString()
{
    return Title;
}

ここに画像の説明を入力

しかし、これはあまり柔軟性がありません。著者も表示したいのですが?それをToStringも書き込むことができますが、アプリのすべてのリストでそうしたくなければどうしますか?どのように素晴らしい本の表紙を表示するには?

それがDataTemplatesが役立つところです。これらはXAMLのスニペットであり、必要に応じて「インスタンス化」することができ、作成されたソースデータに基づいて詳細が入力されます。簡単に言えば、ListBoxコードを次のように拡張するとします。

<ListBox x:Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

そのリストはソース内の各項目のTextBoxを作成し、それらのTextBoxのTextプロパティはオブジェクトのTitleプロパティの値で埋められます。

今すぐアプリケーションを実行すると、カスタムToString実装を削除しても、上記と同じ出力が得られます。これについて有益なのは、このテンプレートを単純なstring (およびToString )の機能を超えてカスタマイズできることです。カスタムXAML要素を含む任意のXAML要素を使用することができ、その値をオブジェクトの実際のデータ(上記の例のTitleなど)に「バインド」することができます。たとえば、次のようにテンプレートを拡張します。

<ListBox x:Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock FontStyle="Italic" Text="{Binding Author}" />
                <TextBlock FontSize="18" Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

それから私たちは本の書式の良いビューを取得します!

ここに画像の説明を入力



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow