IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Windows Presentation Foundation Discussion :

WPF Toolkit et le Data Binding pour les graphiques


Sujet :

Windows Presentation Foundation

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 24
    Points : 12
    Points
    12
    Par défaut WPF Toolkit et le Data Binding pour les graphiques
    Bonsoir,

    J'ai besoin d'afficher des données sur des graphiques avec le WPF Toolkit.

    Je suis donc tombé sur ce tutoriel. On y voit la création des graphiques à l'initialisation de l'application.

    Seulement voila, je souhaite faire en sorte que les données soient mises à jour suite à une interaction utilisateur. (Plus précisément, les données utilisées pour le graphique sont chargées depuis un fichier différent en fonction de la saisie utilisateur).

    J'ai donc fait un essai, que voici :

    XAML (j'ai uniquement gardé le LineChart et ajouté button1)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <Window x:Class="WpfToolkitChart.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="462" Width="737" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
            <Grid Height="921">
                <chartingToolkit:Chart  Name="lineChart" Title="Line Series Demo" VerticalAlignment="Top" Margin="24,21,26,0" Height="295" >
                    <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" Title="Serie"/>
                </chartingToolkit:Chart>
                <Button Content="Serie + 5" Height="54" HorizontalAlignment="Left" Margin="147,351,0,0" Name="button1" VerticalAlignment="Top" Width="159" Click="button1_Click" />
            </Grid>
        </ScrollViewer>
     
    </Window>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    namespace WpfToolkitChart
    {
      public partial class MainWindow : Window
      {
        public MainWindow()
        {
          InitializeComponent();
          showColumnChart();
        }
     
        private void showColumnChart()
        {
          List<KeyValuePair<string, int>> valueList = new List<KeyValuePair<string, int>>();
          valueList.Add(new KeyValuePair<string, int>("Developer", 100));
          valueList.Add(new KeyValuePair<string, int>("Misc", 20));
          valueList.Add(new KeyValuePair<string, int>("Tester", 50));
          valueList.Add(new KeyValuePair<string, int>("QA", 30));
          valueList.Add(new KeyValuePair<string, int>("Project Manager", 40));
     
          lineChart.DataContext = valueList;      
        }
     
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            List<KeyValuePair<string, int>> list = new List<KeyValuePair<string, int>>();
            List<KeyValuePair<string, int>> serie = (List<KeyValuePair<string, int>>) lineChart.DataContext;
     
            foreach ( KeyValuePair<string, int> pair in serie )
            {
                list.Add(new KeyValuePair<string, int> (pair.Key, pair.Value + 5)); // simulation d'un changement de données
            }
            lineChart.DataContext = list;
        }
      }
    }
    Cette version marche tout à fait, mais j'aimerais savoir s'il n'existe pas une façon de faire du Data Binding dans le code XAML et non dans le côté C# (qui passe par un gestionnaire d'évènements). Qu'en est-il ? Je vous en remercie par avance.

    PS : Je débute avec WPF mais pas C#

  2. #2
    Membre expert
    Avatar de GuruuMeditation
    Homme Profil pro
    .Net Architect
    Inscrit en
    Octobre 2010
    Messages
    1 705
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : Belgique

    Informations professionnelles :
    Activité : .Net Architect
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2010
    Messages : 1 705
    Points : 3 568
    Points
    3 568
    Par défaut
    Tu va devoir passer par du C# pour les données. Mais tu peux changer ton code comme ceci :


    Code C# : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
     
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Windows;
    using WpfApplication2.Annotations;
     
    namespace WpfApplication2
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : INotifyPropertyChanged
        {
            private List<KeyValuePair<string, int>> _dataList;
     
            public List<KeyValuePair<string, int>> DataList
            {
                get { return _dataList; }
                set
                {
                    if (Equals(value, _dataList)) return;
                    _dataList = value;
                    OnPropertyChanged("DataList");
                }
            }
     
            public MainWindow()
            {
                InitializeComponent();
                showColumnChart();
            }
     
            private void showColumnChart()
            {
                List<KeyValuePair<string, int>> valueList = new List<KeyValuePair<string, int>>();
                valueList.Add(new KeyValuePair<string, int>("Developer", 100));
                valueList.Add(new KeyValuePair<string, int>("Misc", 20));
                valueList.Add(new KeyValuePair<string, int>("Tester", 50));
                valueList.Add(new KeyValuePair<string, int>("QA", 30));
                valueList.Add(new KeyValuePair<string, int>("Project Manager", 40));
     
                DataContext = this;
            }
     
            private void button1_Click(object sender, RoutedEventArgs e)
            {
                var list = new List<KeyValuePair<string, int>>();
     
                foreach (KeyValuePair<string, int> pair in DataList)
                {
                    list.Add(new KeyValuePair<string, int>(pair.Key, pair.Value + 5)); // simulation d'un changement de données
                }
                DataList = list;
            }
     
            public event PropertyChangedEventHandler PropertyChanged;
     
            [NotifyPropertyChangedInvocator]
            protected virtual void OnPropertyChanged(string propertyName)
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    (Je l'ai fait sans tester, j'espère que je n'ai rien oublié)

    Ce que j'ai fait : j'ai rajouté une propriété DataList.

    J'ai implémenté INotifyPropertyChanged, qui est l'interface qui permet de dire au databinding que'une propriété à été changée et qu'il doit rafraichir.

    Je mets le Datacontext de la page sur elle-meme

    Dans le click, je crée une nouvelle liste et je la mets dans la variable DataList. Ca va envoyer une demande de rafraichissement au moteur de binding.

    Dans le XAML, tu dois binder sur la propriété :
    Code XAML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding DataList}" IsSelectionEnabled="True" Title="Serie"/>

    C'est plus dans la philosophie du databinding (et du MVVM) comme ça.

    Tu peux encore aller plus loin et implémenter ta liste comme une ObservableCollection. Comme ça les changements dans ta liste seront immédiatement répercutée en binding.
    Microsoft MVP : Windows Platform

    MCPD - Windows Phone Developer
    MCPD - Windows Developer 4

    http://www.guruumeditation.net

    “If debugging is the process of removing bugs, then programming must be the process of putting them in.”
    (Edsger W. Dijkstra)

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 24
    Points : 12
    Points
    12
    Par défaut
    Merci pour ta réponse, plus respectueuse du MVVM.

    Malheureusement, je n'arrive pas à compiler à cause du [NotifyPropertyChangedInvocator], a priori une assembly ou un using manque (d'après Visual ...)
    Visual me propose de générer la classe pour NotifyPropertyChangedInvocator ou de générer un nouveau type ...

    J'ai bien rajouté le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    using System.ComponentModel;
    mais je n'ai pas pu rajouter
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    using WpfToolkitChart.Applications// Comme j'utilise le namespace WpfToolkitChart
    à l'instar du
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    WpfApplication2.Applications
    que tu utilises.

    Saurais-tu d'où provient mon problème avec le NotifyPropertyChangedInvocator ?

    ___
    Edit : Quand je supprime purement et simplement cette ligne, à l'exécution, le graphique est vite et quand je clique sur le bouton, ça plante dans la boucle foreach car DataList n'est pas instanciée (null donc).

  4. #4
    Membre expert
    Avatar de GuruuMeditation
    Homme Profil pro
    .Net Architect
    Inscrit en
    Octobre 2010
    Messages
    1 705
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : Belgique

    Informations professionnelles :
    Activité : .Net Architect
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2010
    Messages : 1 705
    Points : 3 568
    Points
    3 568
    Par défaut
    Tu peux virer le [NotifyPropertyChangedInvocator], c'est une extension de Resharper, un plugin pour Visual Studio (que je conseille, ça aide vraiment). J'ai oublié de l'enlever, désolé.
    Microsoft MVP : Windows Platform

    MCPD - Windows Phone Developer
    MCPD - Windows Developer 4

    http://www.guruumeditation.net

    “If debugging is the process of removing bugs, then programming must be the process of putting them in.”
    (Edsger W. Dijkstra)

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 24
    Points : 12
    Points
    12
    Par défaut
    Merci ! J'ai également ajouté une ligne dans la méthode qui créé valuelist

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
            private void showColumnChart()
            {
                List<KeyValuePair<string, int>> valueList = new List<KeyValuePair<string, int>>();
                valueList.Add(new KeyValuePair<string, int>("Developer", 100));
                valueList.Add(new KeyValuePair<string, int>("Misc", 20));
                valueList.Add(new KeyValuePair<string, int>("Tester", 50));
                valueList.Add(new KeyValuePair<string, int>("QA", 30));
                valueList.Add(new KeyValuePair<string, int>("Project Manager", 40));
     
                DataList = valueList; //Sinon j'avais une erreur
                DataContext = this;
            }
    Pour Resharper, pour collaborer avec des gens qui ne le possède pas, on doit nécessairement retirer à la main les lignes comme [NotifyPropertyChangedInvocator] ?

    Et c'est le fait de mettre le DataContext sur la fenêtre elle même qui tend à respecter le MVVM ?

  6. #6
    Membre expert
    Avatar de GuruuMeditation
    Homme Profil pro
    .Net Architect
    Inscrit en
    Octobre 2010
    Messages
    1 705
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : Belgique

    Informations professionnelles :
    Activité : .Net Architect
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2010
    Messages : 1 705
    Points : 3 568
    Points
    3 568
    Par défaut
    NotifyPropertyChangedInvocator n'est pas nécessaire quand tu as resharper non plus. C'est juste pour lui dire que c'est cette méthode qui implémente INotifyPropertyChange. Avec ça, tu peux dire à Resharper de la rajouter automatiquement pour toutes les propriétés. C'est juste pour automatiqer certaines tâches redondantes. (Au cas ou tu es curieux : http://blogs.jetbrains.com/dotnet/20...n-resharper-7/ )

    Quand je parlais d'esprit MVVM, c'est l'idée de faire des propriétés, d’implémenter INotifipropertyChanged et de binder sur ces propriétés. Et non pas le faire "à la main" comme tu le faisais (en mettant le datacontext du chart dans le code)
    Microsoft MVP : Windows Platform

    MCPD - Windows Phone Developer
    MCPD - Windows Developer 4

    http://www.guruumeditation.net

    “If debugging is the process of removing bugs, then programming must be the process of putting them in.”
    (Edsger W. Dijkstra)

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 24
    Points : 12
    Points
    12
    Par défaut
    Merci pour tes réponses

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Data binding - Pour lier une textbox à une propriété.
    Par Gualino dans le forum VB.NET
    Réponses: 15
    Dernier message: 10/09/2011, 18h13
  2. Réponses: 2
    Dernier message: 07/05/2010, 18h14
  3. une bibliotèque pour les graphique 3D
    Par cedrix57 dans le forum 3D
    Réponses: 6
    Dernier message: 06/04/2009, 11h20
  4. Problème avec ChartFX pour les graphiques
    Par Saten dans le forum Windows Forms
    Réponses: 1
    Dernier message: 20/10/2008, 17h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo