Schlagwort: Code Behind

WrapPanel mit Data Binding

Ein sehr beliebtes Steuerelement aus dem „Silverlight for Windows Phone 7 Toolkit“ ist das WrapPanel. Mit diesem Element können Inhalte horizontal und vertikal angeordnet werden. Ein DataBinding ist ebenfalls möglich, wie folgendes Code-Beispiel zeigt:
WrapPanel mit Data Binding weiterlesen

Vergleich von Code-Behind und XAML-Sprache

Dieser Beitrag soll helfen, Elemente aus der XAML-Sprache über den Code-Behind abzubilden. Dazu wird der XAML-Code dem Code-Behind gegenübergestellt, damit man ein Gefühl dafür kriegt, wie der entsprechende C#-Code der XAML-Elemente aussieht.
Vergleich von Code-Behind und XAML-Sprache 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...
}

XAML Code mit User Controls auslagern und wiederverwenden

XAML-Code wird oft für das Design der eigenen Windows Phone-Applikation verwendet. Wer bestimmte Design-Elemente wiederverwenden möchte, der kann XAML-Code auch auslagern und in mehreren Pages wiederverwenden. Wie das funktioniert, möchte ich an einem kurzen Beispiel erläutern.
XAML Code mit User Controls auslagern und wiederverwenden weiterlesen