Hub Tile Control verwenden

Ein Hub Tile ist ein kleines Rechteck, dass sich dynamisch bewegt. Hub-Tiles sehen so aus wie die Live-Tiles (zu sehen auf dem Startbildschirm von Windows Phone, Screenshot), unterscheiden sich aber dadurch, dass sie ihre Informationen nicht unbedingt aktualisieren (so wie Live-Tiles es üblicherweise tun) und auch innerhalb einer App verwendet werden können.
Hub Tile Control verwenden weiterlesen

Nokia Lumia 800 sendet Bilder komprimiert an SkyDrive

Wer mit seinem Windows Phone (Nokia Lumia 800) Bilder an SkyDrive sendet, wird feststellen, dass die Bilder von der Größe meist im 100 KB-Bereich liegen und komprimiert übertragen werden. Wer seine Bilder lieber in Originalqualität hochladen möchte, der sollte das direkt über die SkyDrive-App machen und nicht über die „Versenden“-Funktion des Nokia Lumia 800.

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

LaTeX Formeln in XAML Code umwandeln

Wer Formeln mit LaTeX erstellt, möchte meist, dass diese Formeln vektorisiert dargestellt werden, um beliebig groß und scharf skaliert werden zu können. Zur Darstellung in Windows 8 oder auf einem Windows Phone bietet sich dazu XAML Code an, der Vektor-Pfade benutzt.

Ich möchte kurz aufführen, wie die Arbeitsschritte aussehen, um aus einer LaTeX Formel eine vektorbasierte XAML Datei zu erstellen.
LaTeX Formeln in XAML Code umwandeln weiterlesen

Auf XAML Elemente vom Code-Behind zugreifen

Die Inhalte von XAML-Elementen können fest im XAML-Code gesetzt werden:

MainPage.xaml

1
2
3
<controls:Pivot Title="Hello World">
  <controls:PivotItem Header="Item 1"></controls:PivotItem>
</controls:Pivot>

Man kann aber den XAML-Elementen auch Namen zuweisen und dann vom Code-Behind drauf zugreifen:

MainPage.xaml

1
2
<controls:Pivot x:Name="MyPivotList" Title="Hello World">
</controls:Pivot>

MainPage.xaml.cs

1
2
3
4
5
6
7
8
9
10
11
12
public MainPage()
{
  InitializeComponent();
 
  TextBlock NewTextBlock = new TextBlock();
  NewTextBlock.Text = "Item 1";
 
  PivotItem NewPivotItem = new PivotItem();
  NewPivotItem.Header = NewTextBlock;
 
  MyPivotList.Items.Add(NewPivotItem);
}