web-dev-qa-db-ja.com

ユニバーサルWindowsプラットフォーム（Windows 10アプリ）でListViewを使用する方法

誰でも説明してくださいItemTemplate.DataTemplateおよびListView。このコードスニペット。私はTemplatesの概念を本当に理解していません。誰かがそれに光を当てるなら、それは完全に役立つでしょう。私はこの質問を見ました：

メトロアプリ：選択したアイテムのListView ItemTemplate DataTemplate

しかし、まだ混乱しています。ありがとうございました！ :(

<ListView Margin="10" Name="lvDataBinding">
     <ListView.ItemTemplate>
           <DataTemplate>
                <WrapPanel>
                    <TextBlock Text="Name: " />
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                    <TextBlock Text=", " />
                    <TextBlock Text="Age: " />
                    <TextBlock Text="{Binding Age}" FontWeight="Bold" />
                    <TextBlock Text=" (" />
                    <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                    <TextBlock Text=")" />
                    </WrapPanel>
            </DataTemplate>
     </ListView.ItemTemplate>
</ListView>
listviewtemplateswindows-phone-7windows-phone-8uwp
18
Hemant-Webo

ListViewは、ユーザーがアイテムのリストをスクロールして必要なものを見つけられるように、アイテムのリストを動的に表示できるコントロールです。 XAMLで定義するのは本当に簡単です。

<ListView x:Name="StudentsList" />

さて、大学生のリストがあるとしましょう。すべての生徒は、簡単なStudentクラスで表されます。

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

数十、数百、数千の学生がいる可能性があるため、UIを静的に定義することはできません。通常、それらの学生は、コードビハインドで何らかのリスト/コレクションに保持します。さまざまなソース（データベース、Webサービス、またはハードコーディング）からそれらを取得します。これは、デモの目的でここで行います。

private List<Student> listOfStudents = new List<Student>();

public MainPage()
{
    this.InitializeComponent();

    listOfStudents.Add(new Student { Name = "John", Age = 20 });
    listOfStudents.Add(new Student { Name = "Bob", Age = 21 });
    listOfStudents.Add(new Student { Name = "Steve", Age = 19 });
    listOfStudents.Add(new Student { Name = "Marko", Age = 18 });
    listOfStudents.Add(new Student { Name = "Igor", Age = 20 });
    listOfStudents.Add(new Student { Name = "Ivan", Age = 20 });
    listOfStudents.Add(new Student { Name = "Nina", Age = 21 });
    listOfStudents.Add(new Student { Name = "Paul", Age = 20 });
    listOfStudents.Add(new Student { Name = "Ana", Age = 23 });
    listOfStudents.Add(new Student { Name = "Ivana", Age = 20 });

    StudentsList.ItemsSource = listOfStudents;
}

このリスト/コレクションは、ListViewのアイテムソースとして機能するため、ListViewのItemsSourceプロパティを設定して、2つを接続し、UIにリストを表示します。 ListViewを使用すると、アイテムの数に関係なく、すべてのアイテムが動的にレンダリングされます。

ここでアプリを実行すると、かなりprettyいものになります。

Ugly ListView

きれいにするためにDataTemplateを定義する必要があります。すべての生徒には名前と年齢があるため、それらのプロパティを使用して見た目を美しくしたいと思うでしょう。このDataTemplateはListView.ItemTemplateプロパティに割り当てられ、ListViewはリスト内のすべてのアイテムにそれを使用します。

<ListView x:Name="StudentsList">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" 
                           Margin="20,0,20,8"
                           FontSize="24" 
                           FontStyle="Italic" 
                           FontWeight="SemiBold"
                           Foreground="DarkBlue" />
                <TextBlock Text="{Binding Age}" 
                           Margin="20,0,20,8"
                           FontSize="16"
                           Foreground="DarkGray" 
                           Opacity="0.8" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

参照して、DataTemplateを使用して、表示するプロパティとそれらのレンダリング方法を定義しました。フォントサイズ、フォントの色、余白などで遊んでみました。ポイント：

A bit prettier ListView

あなたが気づくもう一つのことは、私がこのようなバインディング構造を使用したことです：

<TextBlock Text="{Binding Name}" ... />

これは基本的に、オブジェクトがプロパティNameを持っているかどうかを確認し、持っている場合はTextBlock.Textとしてレンダリングします。

物事はより複雑になる可能性があるため、1つのリストなどの異なるアイテムに異なるテンプレートを使用できますが、それは私が考える質問の範囲ではありません。

TLDR：ListViewは、アイテムのリストを動的にレンダリングします。 ItemsSourceは、そのListViewのアイテムソースを定義します。 DataTemplateは、何かをレンダリングするために使用されるテンプレートを定義します。このDataTemplateはItemTemplateのListViewプロパティに割り当てられるため、ListViewは、そのテンプレートを使用してアイテムをレンダリングする必要があることを認識します。

48
Igor Ralic