MVVM, SelectionChanged du Usercontrol ListBox

Question

Bonjour,

Je suis cet article pour apprendre ce Design Pattern : http://msdn.microsoft.com/en-us/library/gg521153(v=vs.92).aspx

Dans la "Première vue", j'ai changé le code en :

<ListBox ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{Binding PathImage}" Height="70" Width="70" Margin="6" />
                        <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                            <TextBlock Text="{Binding Name}" Tag="{Binding ID}"
                             Foreground="Black" 
                            Style="{StaticResource PhoneTextTitle2Style}" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Jusque là tout va bien. Mon objectif est qu'au clic sur un item, j'envoi sur une autre page l'ID de l'item (mis dans le Tag).

Mais pour bien faire... Où mettre le

SelectionChanged="ListBox_SelectionChanged"

Car le code behind sera alors dans le usercontrol et pas sur ma Page.

Dans ma page où il y a ma vue c'est comme cela :

<Grid>
     <views:ItemFigure x:Name="ItemSurface" />
</Grid>

Mais je n'ai pas l'évènement SelectionChanged.

Il y a quelque chose de particulier pour l'utilisation des évènements ?

Merci de votre aide,christophe

Answer 1

Bonjour,

C'est un problème très récurent du MVVM que tu as là. Il y a deux solutions:

Utiliser le behavior InvokeCommandAction qui est disponnible dans Expression blend. Il te permet d'invoquer la commande de ton choix dans ton ViewModel lorsque l'événement de ton choix est déclenché.

<ListBox>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
    	    <i:InvokeCommandAction Command={Binding MyCommand}" />
    	</i:EventTrigger>
    </i:Interaction.Triggers>
</ListBox>

En pensant bien à inclure le namespace nécessaire:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

La deuxième solution est simple et consiste à implémenter une propriété SelectedItem dans ton view model et à le binder sur la propriété SelectedItem de ta listbox en mode TwoWay (cela signifie que le Binding fonctionne depuis le ViewModel vers la Vue mais aussi dans l'autre sens: de la Vue vers le ViewModel), ainsi lorsque l'utilisateur séléctionnera un élément, le setteur de la propriété sera appelé et tu pourra effectuer tout le code que tu désire:

<ListBox ItemsSource="{Binding MyPhotos}" SelectedItem="{Binding SelectedPhoto, Mode=TwoWay}" />

Et dans le View Model :

// ta collection de photos:
public ObservableCollection<Photo> MyPhotos { get; set; }

// la photo selectionnée
private Photo selectedPhoto;

public Photo SelectedPhoto
{
    get { return this.selectedPhoto; }
    set
    {
        if (value != this.selctedPhoto)
        {
            this.selctedPhoto = value;
            // Tu peux effectuer ici la navigation vers l'autre page
        }
    }
}

Bon courage et n'hésite pas si tu as besoin de plus de précisions.

Answer 2

Bonjour,

Si j'ai bien compris ton scénario, ta Listbox est dans un UserControl ? Si c'est bien le cas, le code de l'évènement doit bien entendu se trouver dans le code behind de ce même usercontrol, et donc, SelectionChanged sur la ListBox en question.

---

Pour que la discussion puisse être identifiée comme résolue merci de marquer les réponses qui vous ont aidées à solutionner votre problème comme "réponse".

Answer 3

Merci pour vos 3 possibilités ! Mince laquelle choisir... J'ai pris la première ;  le behavior InvokeCommandAction. J'ai ouï PierreCa dire qu'il fallait vraiment s'y intéresser alors.

J'ai aussi pour objectif d'utiliser cette listbox dans une autre page Xaml avec un autre code dernière le SelectionChanged et peut être que c'est mieux avec cette méthode. Je verrai bien.

J'ai chercher alors plus d'info sur InvokeCommandAction et suis tombé sur cette page : http://blogs.msdn.com/b/luc/archive/2010/11/18/ex-233-cuter-une-commande-depuis-n-importe-quel-233-v-232-nement.aspx où apparait DelegateCommand

Son code ajoute donc toute un class DelegateCommand.cs !? C'est correct ?

Answer 4

En effet, lorsque l'on utilise le InvokeCommand action, il doit être bindé à une classe de type ICommand. Cependant l'implémentation de cette classe est laissée au développeur. C'est pour ça que tu trouvera sur Internet beaucoup d'exemples d'implémentations de cette classe. Une version intéressante est celle que tu peux trouver dans la librairie MVVM Light :

http://mvvmlight.codeplex.com/

Qui propose une implémentation de la relay command ausi :

http://blog.galasoft.ch/archive/2009/09/26/using-relaycommands-in-silverlight-and-wpf.aspx

Donc oui il est correct d'ajouter une classe au code pour pouvoir utiliser InvokeCommandAction

Answer 5

Voilà où j'en suis. Dans Ma Vue j'ai maintenant ça que j'ai ajouté avec Blend :

<i:Interaction.Triggers>
  <i:EventTrigger EventName="SelectionChanged">
      <i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding SelectedItem, ElementName=myListBox}"  />
  </i:EventTrigger>
</i:Interaction.Triggers>

et dans mon ViewModel :

 public class ViewModel
    {
        public ObservableCollection<Figure> Figures { get; set; }
        public DelegateCommand<Figure> MyCommand { get; set; }
 
        public ViewModel()
        {
            this.MyCommand = new DelegateCommand<Figure>(SelectedItem);
        } 
        void SelectedItem(Figure item)
        {
            MessageBox.Show("MySelectedItem");
        }

Mais je n'arrive jamais dans la procédure "SelectedItem" . Qu'est ce que j'ai pu oublier ?

Au niveau de la class DelegateCommand.cs je l'ai simplement ajouté dans mon projet s'en y toucher

Answer 6

Il y a deux propriétés MyCommand dans ton code, ton code comme tu l'as affiché ne devrait même pas fonctionné, c'est étrange. Enlève une des deux propriété et normalement ton code devrait fonctionner.

Regarde aussi dans la fenêtre Output lors que le programme tourne, tu verra s'il ya une erreur de binding qui fait qu'il n'arrive pas à trouver la command dans le ViewModel.

Answer 7

En effet j'avais aussi mis "Public ICommand MyCommand..." que j'ai retiré. Mais j'ai toujours l'erreur bien visible dans la fenêtre de sortie :

Une exception de première chance de type 'System.IO.FileNotFoundException' s'est produite dans mscorlib.dll
System.Windows.Data Error: BindingExpression path error: 'MyCommand' property not found on 'System.Linq.Enumerable+<WhereIterator>d__0`1[Geometrics.Model.Figure]' 'System.Linq.Enumerable+<WhereIterator>d__0`1[Geometrics.Model.Figure]' (HashCode=128871806). BindingExpression: Path='MyCommand' DataItem='System.Linq.Enumerable+<WhereIterator>d__0`1[Geometrics.Model.Figure]' (HashCode=128871806); target element is 'System.Windows.Interactivity.InvokeCommandAction' (Name='null'); target property is 'Command' (type 'System.Windows.Input.ICommand')..

N'y a-t-il rien à mettre dans le code de mon Model "Figure.cs" lié avec InvokeCommandAction  ?

Answer 8

Il faut voir en fait si la command est bien bindé vers le ViewModel.

Peux-tu rajouter le code de la page ainsi que le ViewModel que je puisse voir si quelque chose cloche dans l'un ou l'autre ?

Answer 9

Mon Model :

using System;
using System.ComponentModel;
 
namespace Geometrics.Model
{
    public class Figure : INotifyPropertyChanged
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Type { get; set; }
        public string PathImage { get; set; }
 
        private float _coteA;
        public float CoteA
        {
            get { return _coteA; }
            set 
            { 
                _coteA = value; 
                RaisePropertyChanged("CoteA"); 
            }
        }
 
        private float _coteB;
        public float CoteB
        {
            get { return _coteB; }
            set 
            { _coteB = value; RaisePropertyChanged("CoteB"); }
        }
 
        private float _coteC;
        public float CoteC
        {
            get { return _coteC; }
            set
            { _coteC = value; RaisePropertyChanged("CoteC"); }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Voici Viewmodel.cs :

using System;
using System.Windows;
using System.Windows.Input;
using System.Collections.ObjectModel;
using System.IO.IsolatedStorage;
using Geometrics.Model;

namespace Geometrics.ViewModelNamespace
{
    public class ViewModel
    {
        public ObservableCollection<Figure> Figures { get; set; }
        public DelegateCommand<Figure> MyCommand { get; set; }
        //public ICommand MyCommand { get; private set; }

        public ViewModel()
        {
            this.MyCommand = new DelegateCommand<Figure>(SelectedItem);
        }

        void SelectedItem(Figure item)
        {
            MessageBox.Show("MySelectedItem");
        }


        public void GetFigures()
        {
            ObservableCollection<Figure> a = new ObservableCollection<Figure>();
            a.Add(new Figure() { ID = 1, Name = "Carré", Type = 1, PathImage = "/Geometrics;component/Images/carre.png" });
            a.Add(new Figure() { ID = 2, Name = "Rectangle", Type = 1, PathImage = "/Geometrics;component/Images/rectangle.png" });
			
            Figures = a;
        }

    }
}

Et ma Vue :

<UserControl
    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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    x:Class="Geometrics.View.ItemFigure"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
    
    <Grid x:Name="LayoutRoot">
        <ListBox x:Name="myListBox" ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{Binding PathImage}" Height="70" Width="70" Margin="6" />
                        <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                            <TextBlock Text="{Binding Name}" Tag="{Binding ID}"
                             Foreground="Black" 
                            Style="{StaticResource PhoneTextTitle2Style}" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        	
			<i:Interaction.Triggers>
		        <i:EventTrigger EventName="SelectionChanged">
                    <i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding SelectedItem, ElementName=myListBox}"  />
		    	</i:EventTrigger>
		    </i:Interaction.Triggers>
 
        </ListBox>
    </Grid>
</UserControl>

Answer 10

Je pense que c'est DelegateCommand.cs que j'ai bêtement copier/coller du net sans rien y comprendre... ! non ?

Answer 11

Il ya une question que je me pose sur le code, est-ce que tu spécifie le DataContext de la page ? (dans le code behind peut être ?)

Si oui, à quel propriété est-il définit ? J'ai l'impression qu'il est définit sur ta collection de figure directement. (ce qui explique pourquoi ta liste qui est Bindé sur rien trouve bien la collection car losque l'on ne spécifie pas de Binding particulié, c'est le data context qui est utilisé). Tout tes bindings vont donc se rapporter à ce même data context qui est une ObservableCollection. Donc c'est pour ça que ta commande n'est pas trouvé dans la liste, car le data context bindé dessus en fait.

Voilà ce qui est fait actuellement (je pense)

Le binding est un chemin relatif au DataContext que tu spécifie (comme des fichier dans un dossier). Actuellement la racine du DataContext semble être la collection directement, (donc un dossier trop bas), ce qui fait que tu peux binder la liste directement à la Racine.

Il faut donc remonter d'un niveau :

Et ainsi en remontant d'un niveau et en spécifiant le binding sur la Collection Figures dans ta ListBox, tu gardera les éléments et sera capable de binder la commande au même niveau.

<ListBox x:Name="myListBox" ItemsSource="{Binding}" />

devient donc:

<ListBox x:Name="myListBox" ItemsSource="{Binding Figures}" />

Qui est en fait un racourccis pour:

<ListBox x:Name="myListBox" ItemsSource="{Binding Path=Figures}" />

Donc peux-tu ajouter le code behind de la vue pour vérifier que c'est bien un simple problème de DataContext ?

Answer 12

Suis en plein apprentissage et j'ai suivi l'exemple là : http://msdn.microsoft.com/en-us/library/gg521153(v=vs.92).aspx

Mais j'affecte le DataContext depuis une page Selection.xaml, ça me parait très différent de ce que tu m'expliques mais je peux te zipper l'ensemble, y'a rien d'extra.. là y'a quasi tout le code sur cette page

Sur une page Pivot :

<controls:PivotItem Header="Surface">
    <Grid>
        <views:ItemFigure x:Name="ItemSurface"  />
    </Grid>
</controls:PivotItem>

et dans le code-behing :

using System;
using System.Linq;
using System.Windows;
using Microsoft.Phone.Controls;
using Geometrics.ViewModelNamespace;
 
namespace Geometrics
{
    public partial class Selection : PhoneApplicationPage
    {
        private ViewModel vm;
 
        public Selection()
        {
            InitializeComponent();
            vm = new ViewModel();
        }
 
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
 
            vm.GetFigures();
 
            ItemSurface.DataContext = from Figure in vm.Figures where Figure.Type == 1 select Figure;        }
    }
}

et mon problème initial de faire cela : <views:ItemFigure x:Name="ItemSurface" SelectionChanged="evenement"  /> mais là je rêvais

Answer 13

Il n'y a pas de problèmes, on est là pour apprendre :)

J'ai regardé un peu plus en détail le tutoriel et je n'aime pas du tout comment il font ça.

Pour que tout fonctionne il suffit simplement de faire à la place de:

ItemSurface.DataContext = from Figure in vm.Figures where Figure.Type == 1 select Figure;

ceci :

ItemSurface.DataContext = vm;

Et de penser à changer le binding de la liste box en:

<ListBox x:Name="myListBox" ItemsSource="{Binding Figures}" />

Et normalement tout devrait fonctionner parfaitement.

Answer 14

Mon point de vue à l'heure actuelle : c'est de la magie. Ca marche !

Mais alors je pleure car sur ma page selection.xaml j'ai 3 pivots avec 3 utilisation de ma vue dans lesquels je faisais une sélection sur le Type :

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
 
            vm.GetFigures();
             
            ItemSurface.DataContext = vm;//from Figure in vm.Figures where Figure.Type == 1 select Figure;
           //ItemVolume.DataContext = from Figure in vm.Figures where Figure.Type == 2 select Figure;
           //ItemLineaire.DataContext = from Figure in vm.Figures where Figure.Type == 3 select Figure;
        }

Ca se passe comment dans ce cas ?

Answer 15

Via les CollectionView ? : http://blogs.msdn.com/b/luc/archive/2009/01/14/tris-et-filtres-sur-des-observablecollection-t.aspx

Tu en penses quoi ce cet méthode ?

Answer 16

A oui, en effet dans ce cas, c'est un peu embêtant.

Tu va certainement devoir instancier un view model pour chaque control. De cette façon, tu peux spécifier un filtre différent pour chacun et donner le bon view model correspondant.

Je te propose de modifier la méthode GetFigures du ViewModel pour qu'elle prenne un paramêtre type qui premettrai de n'ajouter en amont que les Figures qui correspondent à ce type.

Tu pourra modifier ta vue de cette façon ensuite:

using System;
using System.Linq;
using System.Windows;
using Microsoft.Phone.Controls;
using Geometrics.ViewModelNamespace;
 
namespace Geometrics
{
    public partial class Selection : PhoneApplicationPage
    {
        private ViewModel vmSurface;
        private ViewModel vmVolume;
        private ViewModel vmLineaire;
 
        public Selection()
        {
            InitializeComponent();
            vmSurface = new ViewModel();
            vmVolume = new ViewModel();
            vmLineaire = new ViewModel();
        }
 
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
 
            vmSurface.GetFigures(1);
            vmVolume.GetFigures(2);
            vmLineaire.GetFigures(3);
			
            ItemSurface.DataContext = vmSurface;
            ItemVolume.DataContext = vmVolume;
            ItemLineaire.DataContext = vmLineaire;
        }
    }
}

Est-ce que ça te semble possible ?

Answer 17

Je n'ai pour ma part jamais utilisé cette méthode pour Windows Phone. Après, c'est envisageable en effet, pourquoi pas.

Il faudrait instancier plusieurs ViewModel et donner à chacun le filtre correspondant avant de l'assigner au user control qui convient.

Answer 18

Ta solution me semble super claire je teste ça

PS : J'ai oublié de te remercier grandement !

Answer 19

Si ça marche bien, ma mission est accomplie.

C'était avec plaisir, n'hésite pas à revenir par ici, si tu as d'autres questions bien sur!

Answer 20

Pour finir si y'a d'autre "pommé" comme moi un jour, voici la modif

 
publicvoid GetFigures(int categorie)
        {
            ObservableCollection<Figure> a = newObservableCollection<Figure>();
            a.Add(newFigure() { ID = 1, Name = "Carré", Type = 1 });
            a.Add(newFigure() { ID = 2, Name = "Rectangle", Type = 1 });
            a.Add(newFigure() { ID = 3, Name = "Cylindre", Type = 2 });
            a.Add(newFigure() { ID = 7, Name = "Segment", Type = 3 });
            var c = newObservableCollection<Figure>();
            foreach (Figure b in a)
            {
                if (b.Type==categorie) c.Add(b);
            }
                
            Figures =c;
        }