Schlagwort: ItemTemplate

Data Binding mit ListView und ItemTemplate

Daten können in Windows Store apps ganz einfach mit C# an ein XAML-Layout gebunden werden. Alles was man dazu braucht sind Daten (z.B. ein Array mit Strings) und ein geeingetes Layout-Element (z.B. eine ListView) mit einem ItemTemplate. Den Code dazu gibt es im Anhang dieses Beitrags. Wer eigene Datentypen an das Layout binden möchte, der kann sich das etwas komplizierte Beispiel „[post id=“4861″]XAML Data Binding mit C# für Windows 8-Apps[/post]“ anschauen.
Data Binding mit ListView und ItemTemplate weiterlesen

XAML Data Binding mit C# für Windows 8-Apps

Das Data Binding in Windows 8-Apps funktioniert so wie das [post id=“3810″]Data Binding in Windows Phone 7[/post]. Im Schnelldurchlauf geht das wie folgt:

  1. Eigene Klasse erstellen
  2. Gewünschtes XAML-Element mit Binding-Eigenschaften ausrüsten
  3. Instanzen der Klasse erzeugen
  4. Instanzen in einer Liste verwalten
  5. Liste dem DataContext des XAML-Elementes zuweisen

Ein kleines Code-Beispiel dazu.
XAML Data Binding mit C# für Windows 8-Apps weiterlesen

Von statischen Inhalten bis hin zum Data Binding

Windows Phone-Programmierer können sich aussuchen, ob sie Inhalte einer Windows Phone-Page statisch oder dynamisch erstellen wollen. Eine statische Liste könnte beispielsweise so aussehen:

ListBox mit statischen Inhalten

MainPage.xaml

1
2
3
4

<ListBox>
  <TextBlock Text="Benny Neugebauer" />
  <TextBlock Text="Tamay Gündüz" />
</ListBox>

ListBox dynamisch befüllt, vom CodeBehind

Möchte man das Ganze etwas dynamischer haben, bietet es sich an, der ListBox einen Namen zu geben und über den CodeBehind anzusprechen und mit dynamisch generierten TextBlock-Elementen zu füllen:

MainPage.xaml

1
2

<ListBox x:Name="myListBox">
</ListBox>

MainPage.xaml.cs

1
2
3
4
5
6
7
8
9
10

public MainPage()
{
  InitializeComponent();
  //
  List<TextBlock> myList = new List<TextBlock>();
  TextBlock benny = new TextBlock { Text = "Benny Neugebauer" };
  TextBlock tamay = new TextBlock { Text = "Tamay Gündüz" };
  myListBox.Items.Add(benny);
  myListBox.Items.Add(tamay);
}

Der Nachteil dieser Methodik ist aber, dass im Quellcode (der eigentlich für die Logik gedacht ist) Design-Elemente (Textblöcke) erzeugt werden. Dadurch werden Design und Logik vermischt und nicht sauber getrennt. Doch dafür gibt es Abhilfe.

ListBox mit Data Binding

Die schönste Art und Weise seine View mit Daten zu füllen ist das Data Binding. Dazu braucht man eine ItemsSource, ein ItemTemplate und ein DataTemplate:

MainPage.xaml

1
2
3
4
5
6
7

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

MainPage.xaml.cs

1
2
3
4
5
6
7
8
9

public MainPage()
{
  InitializeComponent();
  //
  List<string> myList = new List<string>();
  myList.Add("Benny Neugebauer");
  myList.Add("Tamay Gündüz");
  myListBox.DataContext = myList;
}

ListBox mit Data Binding und komplexem Datentyp

Wer noch schöner programmieren möchte, der erstellt einen eigenen Datentyp für die darzustellenden Elemente.

MainPage.xaml

1
2
3
4
5
6
7

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

Person.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace PhoneApp
{
  public class Person
  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
 
    public override string ToString()
    {
      return FirstName+" "+LastName;
    }
  }
}

MainPage.xaml.cs

1
2
3
4
5
6
7
8
9

public MainPage()
{
  InitializeComponent();
  //
  List<Person> myList = new List<Person>();
  myList.Add(new Person { FirstName = "Benny", LastName = "Neugebauer" });
  myList.Add(new Person { FirstName = "Tamay", LastName = "Gündüz" });
  myListBox.DataContext = myList;
}

ListBox mit StackPanel, Data Binding und komplexem Datentyp

Um das Beispiel noch abzurunden, hier ein Beispiel mit etwas schönerer View und Binding von einzelnen Properties:

MainPage.xaml

1
2
3
4
5
6
7
8
9
10
11
12
13

<ListBox x:Name="myListBox" ItemsSource="{Binding}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Number}" Style="{StaticResource PhoneTextLargeStyle}" />
        <StackPanel Orientation="Vertical">
          <TextBlock Text="{Binding FirstName}" />
          <TextBlock Text="{Binding LastName}" />
        </StackPanel>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Person.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14

namespace PhoneApp
{
  public class Person
  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Number { get; set; }
 
    public override string ToString()
    {
      return FirstName+" "+LastName;
    }
  }
}

MainPage.xaml.cs

1
2
3
4
5
6
7
8
9

public MainPage()
{
  InitializeComponent();
  //
  List<Person> myList = new List<Person>();
  myList.Add(new Person { FirstName = "Benny", LastName = "Neugebauer", Number = 1 });
  myList.Add(new Person { FirstName = "Tamay", LastName = "Gündüz", Number = 2 });
  myListBox.DataContext = myList;
}

Ergebnis

Vielen Dank an Tamay Gündüz für seine hilfreichen Kommentare. Wer übrigens seine Windows Phone Kenntnisse vertiefen möchte, sollte unbedingt Tamays Windows Phone Coding Camp vom 16. – 17. Juni in Hamburg besuchen oder in der Dark Side Bakery in Berlin vorbeischauen.

Hinweise

String-Template anstatt String-Konkatenation

Wer diese String-Konkatenation nicht sonderlich mag:

1
2
3
4

public override string ToString()
{
  return FirstName+" "+LastName;
}

Der kann auch ein String-Template verwenden:

1
2
3
4

public override string ToString()
{
  return String.Format("{0} {1}", FirstName, LastName);
}

Initialisierung von XAML-Komponenten

Damit vom CodeBehind auf die in XAML definierten Objekte (wie beispielsweise myListBox) zugreifen kann, müssen alle Operationen nach der Anweisung InitializeComponent(); ausgeführt werden. Wer wirklich hundertprozentig sicher gehen möchte, dass alle XAML-Objekte vollständig geladen sind, der sollte außerdem seinen Code nicht im Konstruktur, sondern in der OnNavigatedTo-Methode ausführen.

Beispiel:

1
2
3
4

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
  // Your code here...
}