Schnellstart: Datenbindung an Steuerelemente
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Schnellstart: Datenbindung an Steuerelemente (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Thema erfahren Sie, wie Sie in einer Windows Store-App mit C++, C# oder Visual Basic ein Steuerelement an ein einzelnes Element oder ein Listensteuerelement an eine Auflistung von Elementen binden. Darüber hinaus wird in diesem Thema erläutert, wie Sie die Anzeige von Steuerelementen anpassen, eine Detailansicht auf Grundlage einer Auswahl implementieren und Daten für die Anzeige umwandeln. Ausführliche Informationen finden Sie unter Datenbindung mit XAML.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Siehe:

Voraussetzungen

In diesem Thema wird vorausgesetzt, dass Sie eine einfache Windows-Runtime-App mit Microsoft Visual Basic, Microsoft Visual C# oder Microsoft Visual C++ erstellen können. Anweisungen zum Erstellen Ihrer ersten Windows-Runtime-App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic.

Binden eines Steuerelements an ein einzelnes Element

Eine Datenbindung umfasst ein Ziel und eine Quelle. Normalerweise ist das Ziel eine Eigenschaft eines Steuerelements und die Quelle eine Eigenschaft eines Datenobjekts. Informationen zu den Anforderungen für Ziele und Quellen finden Sie unter Datenbindung mit XAML.

Im Folgenden finden Sie ein Beispiel für das Binden eines Steuerelements an ein einzelnes Element. Das Ziel ist die Text-Eigenschaft eines Textfeld-Steuerelements. Die Quelle ist eine einfache Recording-Klasse für Musik.



<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
  <TextBox x:Name="textBox1" Text="{Binding}" FontSize="30"
    Height="120" Width="440" IsReadOnly="True"
    TextWrapping="Wrap" AcceptsReturn="True" />
</Grid>




// Constructor
public MainPage()
{
    InitializeComponent();
    
    // Set the data context to a new Recording.
    textBox1.DataContext = new Recording("Chris Sells", "Chris Sells Live",
        new DateTime(2008, 2, 5));
}

// A simple business object
public class Recording
{
    public Recording() { }

    public Recording(string artistName, string cdName, DateTime release)
    {
        Artist = artistName;
        Name = cdName;
        ReleaseDate = release;
    }

    public string Artist { get; set; }
    public string Name { get; set; }
    public DateTime ReleaseDate { get; set; }

    // Override the ToString method.
    public override string ToString()
    {
        return Name + " by " + Artist + ", Released: " + ReleaseDate.ToString("d");
    }
}

Der vorherige Code erzeugt eine Ausgabe, die ähnlich der in der folgenden Abbildung dargestellten Ausgabe ist.

Binden eines Textfeldes

Für das Anzeigen einer Musikaufnahme in einem Textfeld wird die Text-Eigenschaft des Steuerelements mithilfe einer Markuperweiterung auf eine Binding festgelegt. In diesem Beispiel ist der Mode standardmäßig OneWay. Das bedeutet, dass die Daten von der Quelle abgerufen, die Änderungen jedoch nicht an die Quelle zurückgegeben werden.

Die Recording-Klasse besitzt drei öffentliche Eigenschaften und eine ToString-Methodenüberschreibung. Die Eigenschaften sind Artist, Name und ReleaseDate. Die ToString-Methode ist wichtig, da beim Fehlen einer Formatangabe die ToString-Methode zu Anzeigezwecken für ein gebundenes Objekt aufgerufen wird. Die Binding.Source-Eigenschaft für die Bindung wird nicht direkt festgelegt. Stattdessen wird die DataContext-Eigenschaft des TextBox-Steuerelements auf ein neues Recording-Objekt festgelegt.

Binden eines Steuerelements an eine Objektauflistung

Im vorherigen Beispiel wurde die Syntax für das nicht sehr realistische Binden von Daten an Steuerelemente beschrieben. Viel häufiger wird eine Auflistung von Geschäftsobjekten gebunden. In C# und Visual Basic stellt die generische ObservableCollection<T>-Klasse eine gute Wahl für die Datenbindung bei Auflistungen dar, da sie die INotifyPropertyChanged-Schnittstelle und die INotifyCollectionChanged-Schnittstelle implementiert. Diese Schnittstellen bieten eine Änderungsbenachrichtigung für gebundene Steuerelemente an, falls ein Element in der Liste oder eine Eigenschaft der Liste selbst geändert wird. Wenn Ihre gebundenen Steuerelemente bei Änderungen an Eigenschaften von Objekten in der Auflistung aktualisiert werden sollen, müssen die Geschäftsobjekte auch INotifyPropertyChanged implementieren. Weitere Informationen zum Binden in C++ finden Sie in Datenbindung mit XAML.

Im folgenden Beispiel wird eine Auflistung von Recording-Objekten für Musik an eine ComboBox gebunden. Zum Testen dieses Beispiels klicken Sie auf den Pfeil nach unten im Kombinationsfeld, um die Liste der gebundenen Aufnahmen anzuzeigen.



<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}"
        Foreground="Black" FontSize="30" Height="50" Width="780"/>
</Grid>



public ObservableCollection<Recording> MyMusic = new ObservableCollection<Recording>();

public Page()
{
    InitializeComponent();

    // Add items to the collection.
    MyMusic.Add(new Recording("Chris Sells", "Chris Sells Live",
        new DateTime(2008, 2, 5)));
    MyMusic.Add(new Recording("Luka Abrus",
        "The Road to Redmond", new DateTime(2007, 4, 3)));
    MyMusic.Add(new Recording("Jim Hance",
        "The Best of Jim Hance", new DateTime(2007, 2, 6)));

    // Set the data context for the combo box.
    ComboBox1.DataContext = MyMusic;
}

Der vorherige Code erzeugt eine Ausgabe, die ähnlich der in der folgenden Abbildung dargestellten Ausgabe ist.

Binden eines Kombinationsfelds

Zum Anzeigen der Musikaufnahmen in der ComboBox werden die ItemsSource-Eigenschaft des Steuerelements auf eine Binding und die DataContext-Eigenschaft des ComboBox-Steuerelements auf die Auflistung der Recording-Objekte festgelegt, die als Quelle für die Bindung fungiert. Für jedes Element in der Auflistung wird ein ComboBoxItem erstellt. ToString wird automatisch für jedes Recording-Objekt aufgerufen, damit es im Kombinationsfeld angezeigt werden kann.

Anzeigen von Elementen in einem Steuerelement mithilfe einer Datenvorlage

Sie können die Elemente in einer Liste mithilfe der ToString-Methode der Elemente anzeigen. Häufiger wird jedoch eine benutzerdefinierte Anzeige von datengebundenen Elementen mithilfe einer DataTemplate erstellt. Eine DataTemplate erlaubt das Anpassen der Anzeige von Listenelementen in einem Steuerelement. Sie legen die Datenvorlage i. d. R. mit der ContentTemplate-Eigenschaft eines Inhaltssteuerelements oder mit der ItemTemplate-Eigenschaft eines Elementsteuerelements fest.

Das folgende Beispiel veranschaulicht dieselbe Liste von Aufnahmen. Dieses Mal sind die Aufnahmen aber mithilfe einer Datenvorlage an ein Kombinationsfeld gebunden. Ein Kombinationsfeld ist ein ItemsControl. Sie können also eine Datenvorlage für jedes Element einrichten, indem Sie die ItemTemplate-Eigenschaft auf eine Datenvorlage festlegen. Zum Testen dieses Beispiels klicken Sie auf den Pfeil nach unten, um die Liste der Aufnahmen anzuzeigen. Beachten Sie die Unterschiede in der Darstellung der Aufnahmen im Vergleich zum vorherigen Beispiel. Der Interpret und der Name der CD werden in einem benutzerdefinierten Format angezeigt.



<ComboBox x:Name="ComboBox1" ItemsSource="{Binding}"
  Foreground="Black" FontSize="30" Height="50" Width="450">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" Margin="2">
        <TextBlock Text="Artist:" Margin="2" />
        <TextBlock Text="{Binding Artist}" Margin="2" />
        <TextBlock Text="CD:" Margin="10,2,0,2" />
        <TextBlock Text="{Binding Name}" Margin="2" />
      </StackPanel>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

Der vorherige Code erzeugt eine Ausgabe, die ähnlich der in der folgenden Abbildung dargestellten Ausgabe ist.

Verwenden einer Datenvorlage

Sie können in XAML die Definition von Datenvorlagen verwenden. Die Datenvorlage enthält ein StackPanel mit vier TextBlock-Steuerelementen. Das StackPanel-Element ist horizontal ausgerichtet, sodass die vier Textblock-Steuerelemente nebeneinander angezeigt werden. Zwei der TextBlock-Steuerelemente sind an die Artist-Eigenschaft und die Name-Eigenschaft eines Recording-Objekts gebunden. Die anderen beiden TextBlock-Steuerelemente zeigen statischen Text an. Die Bindung stellt im Recording-Objekt für jedes gebundene Element den Pfad zur Eigenschaft bereit. Wie auch im vorherigen Beispiel ist es für die Bindung erforderlich, den Datenkontext auf die Liste der Aufnahmen festzulegen.

Bei diesem XAML-Code wird die Syntax für Eigenschaftenelemente verwendet. Weitere Informationen zur XAML-Syntax finden Sie in Schnellstart: Erstellung einer Benutzeroberfläche mit XAML. Weitere Informationen zum Steuerelementlayout finden Sie in Schnellstart: Definieren von Layouts.

Hinzufügen einer Detailansicht

Wenn Sie bei der Auswahl eines Elements aus der Auflistung Details zu diesem anzeigen möchten, müssen Sie die entsprechende UI erstellen und an die anzuzeigenden Daten binden. Außerdem müssen Sie als Datenkontext eine CollectionViewSource verwenden, damit die Detailansicht an das aktuelle Element gebunden werden kann.

Das folgende Beispiel zeigt dieselbe Liste von Aufnahmen, die aber dieses Mal die Datenquelle einer CollectionViewSource-Instanz ist. Der Datenkontext der gesamten Seite oder des Benutzersteuerelements ist auf die Quelle der Auflistungsansicht festgelegt. Das Kombinationsfeld und die Detailansicht erben den Datenkontext. Dadurch kann im Kombinationsfeld eine Bindung mit der Auflistung hergestellt und dieselbe Elementliste angezeigt werden, während die Detailansicht automatisch an das aktuelle Element gebunden wird. Die Detailansicht muss nicht explizit an das aktuelle Element gebunden werden, da von der Quelle der Auflistungsansicht automatisch die entsprechende Datenebene bereitgestellt wird.

Wenn Sie dieses Beispiel testen möchten, klicken Sie auf den Pfeil nach unten, und wählen Sie verschiedene Aufnahmen aus. Beachten Sie, dass Interpret, CD-Name und Veröffentlichungsdatum in einer Detailansicht unterhalb des Kombinationsfelds angezeigt werden.



<!--The UI for the details view-->
<StackPanel x:Name="RecordingDetails">
  <TextBlock Text="{Binding Artist}" FontWeight="Bold" FontSize="30" />
  <TextBlock Text="{Binding Name}" FontStyle="Italic" FontSize="30" />
  <TextBlock Text="{Binding ReleaseDate}" FontSize="30" />
</StackPanel>



// Set the DataContext on the parent object instead of the ComboBox
// so that both the ComboBox and details view can inherit it.  
// ComboBox1.DataContext = MyMusic;
this.DataContext = new CollectionViewSource { Source = MyMusic };

Der vorherige Code erzeugt eine Ausgabe, die ähnlich der in der folgenden Abbildung dargestellten Ausgabe ist.

Anzeigen einer Detailansicht

In diesem Beispiel wird dem Benutzersteuerelement ein StackPanel mit dem bereits vorhandenen Kombinationsfeld hinzugefügt. Daneben befindet sich ein StackPanel-Element mit drei Textblöcken zur Anzeige von Details zur Aufnahme. Die Text-Eigenschaft der einzelnen Textblöcke ist an eine Eigenschaft im Recording-Objekt gebunden.

Konvertieren von Daten für die Anzeige in Steuerelementen

Wenn Sie einen anderen Typ als eine Zeichenfolge formatieren und in einem Steuerelement anzeigen möchten, z. B. eine TextBox, können Sie einen Konverter verwenden. Sie könnten beispielsweise anstelle eines einfachen Datums eine Beschriftung und das formatierte Datum anzeigen.

Das folgende Beispiel zeigt die Implementierung eines Konverters für das Veröffentlichungsdatum in der Liste der Aufnahmen. Wenn Sie dieses Beispiel testen möchten, klicken Sie auf den Pfeil nach unten, und wählen Sie verschiedene Aufnahmen aus. Beachten Sie, dass das Veröffentlichungsdatum in der Dropdownliste und in der Detailansicht in einem benutzerdefinierten Format dargestellt wird.



<UserControl x:Class="TestDataBindingQS.Page2"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="using:TestDataBindingQS"
  mc:Ignorable="d"
  d:DesignHeight="768" d:DesignWidth="1366">

  <UserControl.Resources>
    <local:StringFormatter x:Key="StringConverter"/>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">

    <StackPanel Width="750" Height="200"
      VerticalAlignment="Center" HorizontalAlignment="Center">
    
      <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" 
        Foreground="Black" FontSize="30" Height="50" Width="750">
        <ComboBox.ItemTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="2">
              <TextBlock Text="Artist:" Margin="2" />
              <TextBlock Text="{Binding Artist}" Margin="2" />
              <TextBlock Text="CD:" Margin="10,2,0,2" />
              <TextBlock Text="{Binding Name}" Margin="2" />
            </StackPanel>
          </DataTemplate>
        </ComboBox.ItemTemplate>
      </ComboBox>

      <!--The UI for the details view-->
      <StackPanel x:Name="RecordingDetails">
        <TextBlock Text="{Binding Artist}" FontSize="30" FontWeight="Bold" />
        <TextBlock Text="{Binding Name}" FontSize="30" FontStyle="Italic" />
        <TextBlock Text="{Binding ReleaseDate,
          Converter={StaticResource StringConverter},
          ConverterParameter=Released: \{0:d\}}" FontSize="30"  />
      </StackPanel>

    </StackPanel>
  
  </Grid>

</UserControl>



public class StringFormatter : IValueConverter
{
    // This converts the value object to the string to display.
    // This will work with most simple types.
    public object Convert(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        // Retrieve the format string and use it to format the value.
        string formatString = parameter as string;
        if (!string.IsNullOrEmpty(formatString))
        {
            return string.Format(culture, formatString, value);
        }

        // If the format string is null or empty, simply
        // call ToString() on the value.
        return value.ToString();
    }

    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Der vorherige Code erzeugt eine Ausgabe, die ähnlich der in der folgenden Abbildung dargestellten Ausgabe ist.

Anzeigen eines Datums mit benutzerdefinierter Formatierung

Ein Konverter ist eine von der IValueConverter-Schnittstelle abgeleitete Klasse. IValueConverter besitzt zwei Methoden: Convert und ConvertBack. Für eine unidirektionale Bindung von der Datenquelle zum Bindungsziel müssen Sie lediglich die Convert-Methode implementieren. Der Konverter in diesem Beispiel ist sehr allgemein. Sie können das gewünschte Zeichenfolgenformat als Parameter übergeben. Der Konverter verwendet dann die String.Format-Methode für die Konvertierung. Wenn keine Formatzeichenfolge übergeben wird, gibt der Konverter das Ergebnis des Aufrufs von ToString für das Objekt zurück.

Nach dem Implementieren des Konverters können Sie eine Instanz der Konverterklasse erstellen und diese für die Bindung festlegen. In diesem Beispiel wird hierfür XAML verwendet. Eine Instanz des Konverters wird als statische Ressource erstellt, der ein Schlüssel zugeordnet wird. Der Schlüssel wird verwendet, wenn die Konvertereigenschaft für die Bindung festgelegt wird.

Weitere Informationen zum Konvertieren von Daten für die Anzeige in Steuerelementen finden Sie unter IValueConverter.

Verwandte Themen

Roadmaps
Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
Roadmap für Windows-Runtime-Apps mit C++
Beispiele
XAML-Datenbindungsbeispiel
Beispiel für XAML-GridView-Gruppierung und SemanticZoom
Beispiel für StorageDataSource und GetVirtualizedFilesVector
Nachschlagewerk
Binding
DataContext
DependencyProperty
CollectionViewSource
IValueConverter
INotifyPropertyChanged
INotifyCollectionChanged
DataTemplate
Konzepte
Datenbindung mit XAML
So wird's gemacht: Binden an hierarchische Daten und Erstellen einer Master/Details-Ansicht
Bindungsmarkuperweiterung
Property-path-Syntax
RelativeSource-Markuperweiterung
Übersicht über Abhängigkeitseigenschaften
Benutzerdefinierte Abhängigkeitseigenschaften
Übersicht über angefügte Eigenschaften
Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic

 

 

Anzeigen:
© 2017 Microsoft