Partager via


Code source L2DBForm.xaml

Cette page contient et décrit le fichier source XAML de la liaison de données WPF à l’aide de l’exemple LINQ to XML.

Structure globale de l’interface utilisateur

Comme c’est le cas pour un projet WPF, ce fichier contient un élément parent, un élément XML Window associé à la classe dérivée L2XDBFrom dans l’espace de noms LinqToXmlDataBinding.

La zone cliente est contenue dans un objet StackPanel auquel est affecté un arrière-plan bleu clair. Ce panneau contient quatre sections d’interface utilisateur DockPanel séparées par Separator barres. L’objectif de ces sections est décrit ici.

Chaque section contient une étiquette qui l’identifie. Dans les deux premières sections, cette étiquette est pivotée de 90 degrés à l’aide d’un LayoutTransform. Le reste de la section contient des éléments d’interface utilisateur appropriés à l’objectif de cette section, par exemple, les blocs de texte, les zones de texte et les boutons. Parfois, un objet StackPanel enfant est utilisé pour aligner ces contrôles enfants.

Section des ressources de fenêtre

La balise d’ouverture <Window.Resources> sur la ligne 9 indique le début de la section de ressource de fenêtre. Elle se termine par la balise fermante sur la ligne 35.

La balise <ObjectDataProvider>, qui s’étend sur les lignes 11 à 25, déclare un ObjectDataProvider, nommé LoadedBooks, qui utilise un XElement comme source. Le XElement est initialisé en analysant un document XML incorporé (élément CDATA). Notez que l’espace blanc est conservé lors de la déclaration du document XML incorporé et également lorsqu’il est analysé. L’espace blanc est conservé, car le contrôle TextBlock, utilisé pour afficher le code XML brut, n’a pas de fonctionnalités de mise en forme XML spéciales.

Enfin, une DataTemplate nommée BookTemplate est définie sur les lignes 28 à 34. Ce modèle est utilisé pour afficher les entrées dans la section Liste de livres de l’interface utilisateur. Il utilise les propriétés dynamiques LINQ to XML et de liaison de données pour récupérer l'ID de livre et le nom de livre par le biais des affectations suivantes :

Text="{Binding Path=Attribute[id].Value}"Text="{Binding Path=Value}"

Code de liaison de données

En plus de l’élément DataTemplate, la liaison de données est utilisée dans un certain nombre d’autres emplacements dans ce fichier.

Dans la balise <StackPanel> ouvrante sur la ligne 38, la propriété DataContext de ce panneau est attribuée au fournisseur de données LoadedBooks.

DataContext="{Binding Source={StaticResource LoadedBooks}}

La définition du contexte de données permet (à la ligne 46) pour l'TextBlock nommée tbRawXml d’afficher le code XML brut en liant la propriété Xml de ce fournisseur de données :

Text="{Binding Path=Xml}"

L'objet ListBox dans la section d'interface utilisateur Book List , sur les lignes 58 à 62, définit le modèle pour ses éléments d'affichage au BookTemplate défini dans la section de ressources de fenêtre :

ItemTemplate ="{StaticResource BookTemplate}"

Ensuite, sur les lignes 59 à 62, les valeurs réelles des livres sont liées à cette zone de liste :

<ListBox.ItemsSource>
    <Binding Path="Elements[{http://www.mybooks.com}book]"/>
</ListBox.ItemsSource>

La troisième section d'interface utilisateur, Edit Selected Book, lie d'abord la propriété DataContext de l'objet StackPanel parent à l'élément actuellement sélectionné dans la section d'interface utilisateur Book List (ligne 82) :

DataContext="{Binding ElementName=lbBooks, Path=SelectedItem}"

Il utilise ensuite la liaison de données bidirectionnelle, afin que les valeurs actuelles des éléments du livre soient affichées et mises à jour à partir des deux zones de texte de ce panneau. La liaison de données aux propriétés dynamiques est similaire à la liaison de données utilisée dans le modèle de données BookTemplate :

Text="{Binding Path=Attribute[id].Value}"...Text="{Binding Path=Value}"

La dernière section de l’interface utilisateur, Add New Book, n’utilise pas la liaison de données dans son code XAML. Au lieu de cela, la liaison de données se trouve dans son code de gestion des événements dans le fichier L2DBForm.xaml.cs.

Exemple

Description

Remarque

Nous vous recommandons de copier le code suivant ci-dessous dans un éditeur de code, tel que l’éditeur de code source C# dans Visual Studio, afin que les numéros de ligne soient plus faciles à suivre.

Code

<Window x:Class="LinqToXmlDataBinding.L2XDBForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:xlinq="clr-namespace:System.Xml.Linq;assembly=System.Xml.Linq"
    xmlns:local="clr-namespace:LinqToXmlDataBinding"
    Title="WPF Data Binding using LINQ-to-XML" Height="665" Width="500" ResizeMode="NoResize">

    <Window.Resources>
        <!-- Books provider and inline data -->
        <ObjectDataProvider x:Key="LoadedBooks" ObjectType="{x:Type xlinq:XElement}" MethodName="Parse">
            <ObjectDataProvider.MethodParameters>
                <system:String xml:space="preserve">
<![CDATA[
<books xmlns="http://www.mybooks.com">
  <book id="0">book zero</book>
  <book id="1">book one</book>
  <book id="2">book two</book>
  <book id="3">book three</book>
</books>
]]>
                </system:String>
                <xlinq:LoadOptions>PreserveWhitespace</xlinq:LoadOptions>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>

        <!-- Template for use in Books List listbox. -->
        <DataTemplate x:Key="BookTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="3" Text="{Binding Path=Attribute[id].Value}"/>
                <TextBlock Margin="3" Text="-"/>
                <TextBlock Margin="3" Text="{Binding Path=Value}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <!-- Main visual content container -->
    <StackPanel Background="lightblue" DataContext="{Binding Source={StaticResource LoadedBooks}}">
        <!-- Raw XML display section -->
        <DockPanel Margin="5">
            <Label  Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" FontWeight="Bold">XML
            <Label.LayoutTransform>
                <RotateTransform Angle="90"/>
            </Label.LayoutTransform>
            </Label>
            <TextBlock Name="tbRawXml" Height="200" Background="LightGray" Text="{Binding Path=Xml}" TextTrimming="CharacterEllipsis" />
        </DockPanel>

        <Separator Height="4" Margin="5" />

        <!-- List box to display all books section -->
        <DockPanel Margin="5">
            <Label  Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" FontWeight="Bold">Book List
                <Label.LayoutTransform>
                    <RotateTransform Angle="90"/>
                </Label.LayoutTransform>
            </Label>
            <ListBox Name="lbBooks" Height="200" Width="415" ItemTemplate ="{StaticResource BookTemplate}">
                <ListBox.ItemsSource>
                    <Binding Path="Elements[{http://www.mybooks.com}book]"/>
                </ListBox.ItemsSource>
            </ListBox>
            <Button Margin="5" DockPanel.Dock="Right" Height="30" Width ="130" Content="Remove Selected Book" Click="OnRemoveBook">
            <Button.LayoutTransform>
                <RotateTransform Angle="90"/>
            </Button.LayoutTransform>
            </Button>
        </DockPanel>

        <Separator Height="4" Margin="5" />

        <!-- Edit current selection section -->
        <DockPanel Margin="5">
            <TextBlock Margin="5" Height="30" Width="65" DockPanel.Dock="Right" Background="LightGray" TextWrapping="Wrap" TextAlignment="Center">
                    Changes are live!
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
            <StackPanel>
                <Label Width="450" Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" FontWeight="Bold">Edit Selected Book</Label>
                <StackPanel Margin="1" DataContext="{Binding ElementName=lbBooks, Path=SelectedItem}">
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">ID:</Label>
                        <TextBox Name="editAttributeTextBox" Width="410" Text="{Binding Path=Attribute[id].Value}">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="Bold" TextAlignment="Center">
                                    <Label>Edit the selected book ID and see it changed.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">Value:</Label>
                        <TextBox Name="editValueTextBox" Width="410" Text="{Binding Path=Value}" Height="25">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="Bold" TextAlignment="Center">
                                    <Label>Edit the selected book Value and see it changed.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DockPanel>

        <Separator Height="4" Margin="5" />

        <!-- Add new book section -->
        <DockPanel Margin="5">
            <Button Margin="5" Height="30" DockPanel.Dock="Right" Click ="OnAddBook">Add Book
                <Button.LayoutTransform>
                    <RotateTransform Angle="90"/>
                </Button.LayoutTransform>
            </Button>
            <StackPanel>
                <Label Width="450" Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" FontWeight="Bold">Add New Book</Label>
                <StackPanel Margin="1">
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">ID:</Label>
                        <TextBox Name="tbAddID" Width="410">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="Bold" TextAlignment="Center">
                                    <Label>Enter a book ID and Value pair, then click Add Book.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">Value:</Label>
                        <TextBox Name="tbAddValue" Width="410" Height="25">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="UltraBold" TextAlignment="Center">
                                    <Label>Enter a book ID and Value pair, then click Add Book.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DockPanel>
    </StackPanel>
</Window>

Commentaires

Pour le code source C# pour les gestionnaires d’événements associés aux éléments de l’interface utilisateur WPF, consultez L2DBForm.xaml.cs code source.

Voir aussi