Gegevensbinding in een Windows Presentation Foundation-client

Het WPFDataBinding-voorbeeld demonstreert het gebruik van gegevensbinding in een WPF-client (Windows Presentation Foundation). In het voorbeeld wordt een WCF-service (Windows Communication Foundation) gebruikt die willekeurig een matrix met albums genereert om terug te keren naar de client. Elk album heeft een naam, een prijs en een lijst met albumnummers. De albumnummers hebben een naam en duur. De informatie die door de service wordt geretourneerd, wordt automatisch gebonden aan de gebruikersinterface (UI) die wordt geleverd door de WPF-client (Windows Presentation Foundation).

Notitie

De installatieprocedure en build-instructies voor dit voorbeeld bevinden zich aan het einde van dit onderwerp.

Met gegevensbinding kan een gegevensbron automatisch worden gebonden aan een gebruikersinterface. Dit vereenvoudigt het programmeermodel omdat u niet programmatisch elk UI-element hoeft bij te werken met de gegevens uit een gegevensobject of een matrix met gegevensobjecten. U kunt een object binden aan één UI-element of een matrix aan een besturingselement dat meerdere invoer gebruikt, zoals een ListBox. De volgende code laat zien hoe u gegevens koppelt aan het element van de DataContext gebruikersinterface.

// Event handler executed when call is complete
void client_GetAlbumListCompleted(object sender, GetAlbumListCompletedEventArgs e)
{
    // This is on the UI thread, myPanel can be accessed directly
    myPanel.DataContext = e.Result;
}

In het vorige voorbeeld wordt het DataContext voor het grid indelingselement met de naam myPanel ingesteld op de gegevens die door de GetAlbumList methode worden geretourneerd. Hiermee DataContext kunnen elementen informatie overnemen van de bovenliggende elementen over de gegevensbron die wordt gebruikt voor binding, evenals andere kenmerken van de binding, zoals het pad. De coderegel moet telkens worden uitgevoerd wanneer de gegevens op de server worden bijgewerkt. Het wordt bijvoorbeeld uitgevoerd wanneer het venster wordt geïnitialiseerd en wanneer er een nieuw album wordt toegevoegd.

In de volgende XAML-voorbeeldcode geeft u de ListBox opgegeven ItemsSource="{Binding }".

<ListBox
          ItemTemplate="{StaticResource AlbumStyle}"
          ItemsSource="{Binding }"
          IsSynchronizedWithCurrentItem="true" />

Hiermee geeft u op dat de gegevens die zijn gebonden aan het ui-element op het hoogste niveau, ook zijn gebonden aan dit besturingselement (dat wil gezegd de matrix van albums). Daarnaast ItemTemplate="{StaticResource AlbumStyle}" geeft u de gegevenssjabloon op die voor elk item in het ListBoxitem moet worden gebruikt. U kunt ook gegevenssjablonen definiëren om op te geven hoe de gegevens moeten worden opgemaakt. Deze gegevenssjablonen kunnen opnieuw worden gebruikt voor andere UI-elementen in de toepassing. Het voordeel is dat de gegevenssjabloon op één plaats wordt gedefinieerd en onderhouden.

In de AlbumStyle gegevenssjabloon wordt een raster met twee naast elkaar TextBlockweergegeven. De ene geeft de naam van het album en het andere nummer van tracks in het album op.

<DataTemplate x:Key="AlbumStyle">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="260" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" TextContent="{Binding Path=Title}" />
        <TextBlock Grid.Column="1" TextContent="{Binding Path=Tracks#.Count}" HorizontalAlignment="Right" />
    </Grid>
</DataTemplate>

Met de volgende XAML-code wordt een tweede ListBoxgemaakt.

<ListBox Grid.Row="2"
            Grid.ColumnSpan="2"
            ItemTemplate="{StaticResource TrackStyle}"
            ItemsSource="{Binding Path=Tracks}" />

De code geeft een pad voor de ItemsSource. Dit geeft aan dat de gegevens die aan dit besturingselement zijn gebonden, niet de gegevens op het hoogste niveau zijn, maar een eigenschap van de gegevens op het hoogste niveau met de naam Tracks. Deze eigenschap vertegenwoordigt de matrix van nummers in het album. Daarnaast wordt een andere DataTemplate naam TrackStyle opgegeven. De indeling van de TrackStyle sjabloon is vergelijkbaar met die van de AlbumStyle sjabloon, maar de TextBlocks zijn gebonden aan verschillende eigenschappen. Dit komt doordat de twee sjablonen worden gebruikt met verschillende gegevensobjecten.

Het voorbeeld instellen, compileren en uitvoeren

1. Zorg ervoor dat u de eenmalige installatieprocedure voor de Windows Communication Foundation-voorbeelden hebt uitgevoerd.

2. Als u de C# of Visual Basic .NET-editie van de oplossing wilt bouwen, volgt u de instructies in het bouwen van de Windows Communication Foundation-voorbeelden.

3. Als u het voorbeeld wilt uitvoeren in een configuratie met één of meerdere computers, volgt u de instructies in Het uitvoeren van de Windows Communication Foundation-voorbeelden.