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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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:
1 2 3 4 | <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
1 2 3 4 5 6 7 8 9 10 | <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
1 2 3 4 5 6 7 8 9 10 | <GridView x:Name="PeopleDisplay" ItemsSource="{Binding}" ItemTemplate="{StaticResource MyDataTemplate}" Background="White"> <GridView.ItemsPanel> <ItemsPanelTemplate> <WrapGrid Orientation="Vertical" /> </ItemsPanelTemplate> </GridView.ItemsPanel> </GridView> |