Participer au site avec un Tip
Rechercher
 

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Liaison d'un contrôle DataGrid à des données XML

Accès rapide :
Définition de données XML dans un fichier XAML
Définition de données XML dans un fichier XML autonome
Le contrôle DataGrid

La librairie WPF propose le contrôle DataGrid. Comme son nom l'indique, ce contrôle permet d'afficher des données sous forme d'une grille. Ces données peuvent provenir de différentes sources et notamment de flux XML : c'est le sujet de cet exemple de code. Comme nous allons le voir, le flux XML peut être localisé dans différents fichiers : soit un fichier XAML, soit un fichier XML autonome. Voici une capture d'écran du contrôle Datagrid avec ses données chargées.

Définition de données XML dans un fichier XAML

L'exemple de code suivant définit un « XmlDataProvider » dont les données y sont directement stockées. Une requête XPATH est utilisée pour sélectionner les tags à incorporer dans le contrôle GridView (ici tous les articles).

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
<Application x:Class="ArticleExplorer.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ArticleExplorer"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <!--
            On définit notre "Data Provider" et on y sélectionne tous les articles.
        -->
        <XmlDataProvider x:Key="XmlProvider" XPath="//Article">
            <x:XData>
                <!--
                    Il ne peut y avoir qu'un unique tag à ce niveau.
                    Mais il peut contenir autant de sous-tags que nécessaire.
                    Il est important d'y retirer le namespace.
                -->
                <Catalog xmlns=""> 
                    <Article>
                        <IdArticle>1</IdArticle>
                        <Description>An article</Description>
                        <Brand>A Brand</Brand>
                        <UnitaryPrice>10</UnitaryPrice>
                    </Article>
                    <Article>
                        <IdArticle>2</IdArticle>
                        <Description>Another article</Description>
                        <Brand>Super brand</Brand>
                        <UnitaryPrice>100</UnitaryPrice>
                    </Article>
                    <Article>
                        <IdArticle>3</IdArticle>
                        <Description>Last article</Description>
                        <Brand>Low cost</Brand>
                        <UnitaryPrice>1</UnitaryPrice>
                    </Article>
                </Catalog>
            </x:XData>
        </XmlDataProvider>
        
    </Application.Resources>
</Application>
Les données XML sont embarquées directement dans le fichier XAML

Définition de données XML dans un fichier XML autonome

Si vous préférez, il est possible de définir vos données dans un fichier XML autonome. Ensuite, le fichier XAML pourra référencer le fichier XML de données dans son tag <XmlDataProvider>. Voici un exemple de fichier de données au format XML contenant les articles précédemment proposés.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
<?xml version="1.0" encoding="utf-8" ?>
<Catalog> 
    <Article>
        <IdArticle>1</IdArticle>
        <Description>An article</Description>
        <Brand>A Brand</Brand>
        <UnitaryPrice>10</UnitaryPrice>
    </Article>
    <Article>
        <IdArticle>2</IdArticle>
        <Description>Another article</Description>
        <Brand>Super brand</Brand>
        <UnitaryPrice>100</UnitaryPrice>
    </Article>
    <Article>
        <IdArticle>3</IdArticle>
        <Description>Last article</Description>
        <Brand>Low cost</Brand>
        <UnitaryPrice>1</UnitaryPrice>
    </Article>
</Catalog>
Définition du fichier Articles.xml contenant vos données

Et voici maintenant le fichier XAML de configuration de votre application. Notez bien que le XmlDataProvider qui y est défini, référence le fichier de données XML.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
<Application x:Class="ArticleExplorer.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ArticleExplorer"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <XmlDataProvider x:Key="XmlProvider" Source="Articles.xml" XPath="//Article" />
        
    </Application.Resources>
</Application>
Le fichier XAML de configuration de l'application WPF
un fichier XAML est stocké, après compilation, directement dans l'assemblage de votre application. Il ne sera donc plus éditable. Au contraire le fichier XML devra être présent à côté de l'assemblage de votre application. Si vous devez régulièrement modifier des données, un fichier XML autonome sera plus simple à utiliser, car il ne nécessitera pas de recompilation de votre application.

Le contrôle DataGrid

Pour insérer une grille de données liée à des données XML, il est nécessaire de définir la configuration de la grille ainsi que sa source de données. En voici un exemple.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
<Window x:Class="ArticleExplorer.MainWindow"
        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="clr-namespace:ArticleExplorer"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <DataGrid ItemsSource="{Binding Source={StaticResource XmlProvider}}" AutoGenerateColumns="False" >
        <DataGrid.Columns>
            <DataGridTextColumn Header="IdArticle" Binding="{Binding XPath=IdArticle}"/>
            <DataGridTextColumn Header="Description" Binding="{Binding XPath=Description}"/>
            <DataGridTextColumn Header="Brand" Binding="{Binding XPath=Brand}"/>
            <DataGridTextColumn Header="Price" Binding="{Binding XPath=UnitaryPrice}" Foreground="Red"/>
        </DataGrid.Columns>
    </DataGrid>
    
</Window>
Liaison du contrôle DataGrid à sa source de données XML