Code source L2DBForm.xamlL2DBForm.xaml Source Code

Cette rubrique contient et décrit le fichier source XAML pour WPF Data Binding Using LINQ to XML Example, L2DBForm.xaml.This topic contains and describes the XAML source file for the WPF Data Binding Using LINQ to XML Example, L2DBForm.xaml.

Structure globale d'interface utilisateurOverall UI Structure

Comme c'est généralement 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 .As is typical for a WPF project, this file contains one parent element, a Window XML element associated with the derived class L2XDBFrom in the LinqToXmlDataBinding namespace.

La zone cliente est contenue dans un objet StackPanel auquel est affecté un arrière-plan bleu clair.The client area is contained within a StackPanel that is given a light blue background. Ce volet contient quatre sections d'interface utilisateur DockPanel séparées par des barres Separator .This panel contains four DockPanel UI sections separated by Separator bars. L'objectif de ces sections est décrit dans les Remarques de la rubrique précédente.The purpose of these sections is described in the Remarks in the previous topic.

Chaque section contient une étiquette qui l'identifie.Each section contains a label that identifies it. Dans les deux premières sections, cette étiquette est pivotée de 90 degrés par le biais d'une propriété LayoutTransform.In the first two sections, this label is rotated 90 degrees through the use of a LayoutTransform. Le reste de la section contient des éléments d’interface utilisateur adaptés à l’objectif de cette section : blocs de texte, zones de texte, boutons, etc.The rest of the section contains UI elements appropriate to the purpose of that section: text blocks, text boxes, buttons, and so on. Parfois, un objet StackPanel enfant est utilisé pour aligner ces contrôles enfants.Sometimes a child StackPanel is used to align these child controls.

Section de ressources de fenêtreWindow Resource Section

La balise <Window.Resources> d'ouverture sur la ligne 9 indique le début de la section de ressources de fenêtre.The opening <Window.Resources> tag on line 9 indicates the start of the window resource section. Cette section se termine par la balise de fermeture sur la ligne 35.It ends with the closing tag on line 35.

La balise <ObjectDataProvider> , qui s'étend de la ligne 11 à la ligne 25, déclare un objet ObjectDataProvider, nommé LoadedBooks, qui utilise un objet XElement comme source.The <ObjectDataProvider> tag, which spans lines 11 through 25, declares a ObjectDataProvider, named LoadedBooks, that uses an XElement as the source. Le XElement est initialisé par l’analyse d’un document XML incorporé (un élément CDATA).The XElement is initialized by parsing an embedded XML document (a CDATA element). Notez que les espaces blancs sont conservés lors de la déclaration et de l’analyse du document XML incorporé.Notice that white space is preserved when declaring the embedded XML document, and also when it's parsed. Cela est dû au fait que le contrôle TextBlock, qui est utilisé pour afficher le code XML brut, n’a pas de fonctionnalités spéciales de mise en forme XML.White space is preserved because the TextBlock control, which is used to display the raw XML, has no special XML formatting capabilities.

Pour finir, un objet DataTemplate nommé BookTemplate est défini sur les lignes 28 à 34.Lastly, a DataTemplate named BookTemplate is defined on lines 28 through 34. Ce modèle est utilisé pour afficher les entrées dans la section Book List de l’interface utilisateur.This template is used to display the entries in the Book List UI section. 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 :It uses data binding and LINQ to XML dynamic properties to retrieve the book ID and book name through the following assignments:

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

Code de liaison de donnéesData Binding Code

En plus de l'élément DataTemplate , la liaison de données est utilisée à d'autres emplacements de ce fichier.In addition to the DataTemplate element, data binding is used in a number of other places in this file.

Dans la balise <StackPanel> d'ouverture sur la ligne 38, le fournisseur de données DataContext est affecté à la propriété LoadedBooks de ce volet.In the opening <StackPanel> tag on line 38, the DataContext property of this panel is set to the LoadedBooks data provider.

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

La définition du contexte des données permet (sur la ligne 46) à l’objet TextBlock nommé tbRawXml d’afficher le code XML brut en effectuant la liaison à la propriété Xml de ce fournisseur de données :Setting the data context makes it possible (on line 46) for the TextBlock named tbRawXml to display the raw XML by binding to this data provider's Xml property:

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 :The ListBox in the Book List UI section, on lines 58 through 62, sets the template for its display items to the BookTemplate defined in the window resource section:

ItemTemplate ="{StaticResource BookTemplate}"

Ensuite, sur les lignes 59 à 62, les valeurs réelles des livres sont liées à cette zone de texte :Then, on lines 59 through 62, the actual values of the books are bound to this list box:

<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) :The third UI section, Edit Selected Book, first binds the DataContext of the parent StackPanel to the currently selected item in from the Book List UI section (line 82):

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

Elle utilise ensuite la liaison de données bidirectionnelle, de sorte que les valeurs actuelles des éléments de livre soient affichées dans et mises à jour à partir des deux zones de texte de ce volet.It then uses two-way data binding, so that the current values of the book elements are displayed to, and updated from, the two text boxes in this panel. La liaison de données aux propriétés dynamiques est similaire à celle utilisée dans le modèle de données BookTemplate :Data binding to dynamic properties is similar to the data binding used in the BookTemplate data template:

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.The last UI section, Add New Book, doesn't use data binding in its XAML code. Au lieu de cela, la liaison de données est dans le code de son gestionnaire d’événements, dans le fichier L2DBForm.xaml.cs.Instead, data binding is in its event handling code in the file L2DBForm.xaml.cs.

ExempleExample

DescriptionDescription

Note

Nous vous recommandons de copier le code ci-dessous dans un éditeur de code, tel que l'éditeur de code source C# fourni avec Visual Studio, afin de faciliter le suivi des numéros de lignes.We recommend that you copy the following code below into a code editor, such as the C# source code editor in Visual Studio, so that line numbers will be easier to track.

CodeCode

<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>

CommentairesComments

Pour obtenir le code source C# pour les gestionnaires d’événements associés aux éléments d’interface utilisateur WPF, consultez L2DBForm.xaml.cs Source Code.For the C# source code for the event handlers associated with the WPF UI elements, see L2DBForm.xaml.cs Source Code.

Voir aussiSee also