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:

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

Ein kleines Code-Beispiel dazu.

Eigene Klasse erstellen

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace DataBindingExample.Classes
{
  public class Person
  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
  }
}

XAML-Element mit `Binding`-Eigenschaften ausrüsten

<Page mc:Ignorable="d" x:Class="DataBindingExample.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="using:DataBindingExample"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <!-- That's the interesting part -->
  <GridView x:Name="PeopleDisplay"
            Background="White" 
            ItemsSource="{Binding}">
    <GridView.ItemTemplate>
      <DataTemplate>
        <Grid Background="Red" Height="180" HorizontalAlignment="Left" Width="240">
          <TextBlock FontSize="26.67" Foreground="Black"
            HorizontalAlignment="Right" Text="{Binding FirstName}" VerticalAlignment="Bottom"/>
        </Grid>
      </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
      <ItemsPanelTemplate>
        <WrapGrid Orientation="Vertical"/>
      </ItemsPanelTemplate>
    </GridView.ItemsPanel>
  </GridView>
</Page>

XAML-Element ein DataContext zuweisen

public MainPage()
{
  // Initialization of MainPage.xaml
  this.InitializeComponent();
 
  // Own objects
  Person benny = new Person { FirstName = "Benny", LastName = "Neugebauer", Age = 25 };
  Person charlize = new Person { FirstName = "Charlize", LastName = "Middleton", Age = 24 };
 
  // List of own Objects (the "List" is used for data binding)
  List<Person> persons = new List<Person>();
  persons.Add(benny);
  persons.Add(charlize);
 
  // Bind data to the "PeopleDisplay" XAML element
  PeopleDisplay.DataContext = persons;
}

Wenn man möchte, kann man das DataTemplate auch noch in einer Ressource auslagern. Dazu nimmt man diesen Eintrag in der App.xaml vor:

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Common/StandardStyles.xaml"/>
  <ResourceDictionary Source="Common/CustomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>

Dann erstellt man im Ordner Common das Resource Dictionary „CustomStyles.xaml“ mit der selbstdefinierten Ressource „MyDataTemplate“:

Common/CustomStyles.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DataTemplate x:Key="MyDataTemplate">
    <Grid Background="Red" Height="180" HorizontalAlignment="Left" Width="240">
      <TextBlock FontSize="26.67" Foreground="Black" HorizontalAlignment="Right"
        Text="{Binding FirstName}" VerticalAlignment="Bottom"/>
    </Grid>
  </DataTemplate>
</ResourceDictionary>

Jetzt kann das DataTemplate über die Eigenschaft ItemTemplate aus der Ressource geladen werden:

MainPage.xaml

<GridView x:Name="PeopleDisplay"              
          ItemsSource="{Binding}"
          ItemTemplate="{StaticResource MyDataTemplate}" 
          Background="White">
  <GridView.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapGrid Orientation="Vertical" />
    </ItemsPanelTemplate>
  </GridView.ItemsPanel>
</GridView>

Eigene Klasse erstellen

XAML-Element mit Binding-Eigenschaften ausrüsten

XAML-Element ein DataContext zuweisen

Schreibe einen Kommentar Antworten abbrechen

XAML-Element mit `Binding`-Eigenschaften ausrüsten