[MVVM] Binding à un ViewModel depuis le code-behind

Bonjour tout le monde,

Ma question peut paraitre relativement bizarre puisque un des intérêts de MVVM et de "supprimer" le code-behind des différentes vues... mais dans mon cas je ne vois pas d'autre solution.

En faite je souhaite utilisé le Ruban Office 2007 pour mon interface graphique. Sur un des onglet de celui-ci, je souhaite personnalisé les boutons qui y seront présents suivant des configurations que mon application charge depuis un fichier XML (le but est de pouvoir ajouter ou supprimer des boutons du menu dans le futur sans pour autant mettre à jour l'application, le fichier xml de configuration sera mis à jour par l'application elle même suivant le contenu de différents fichiers que l'utilisateur chargera dans l'application). Seulement il n'est pas possible de faire de binding sur la propriété "Controls" qui est la liste des contrôles contenues dans mon RibbonGroup. Premièrement, Controls n'est pas une DependencyProperty, deuxièmement, Controls n'est accessible qu'à travers un getter et ne dispose pas de setter.
Donc au revoir mas belle idée de faire un menu dynamique avec le ruban Office 2007.

Je suis donc en train de me rabattre vers un menu standard mais sans perdre espoir de trouver un ruban type Office qui me convienne.
Dans cette optique, je vais mettre à disposition les éléments servant à composer mon menu dynamique dans mon ViewModel. J'utiliserais ensuite un Converter pour créer mes MenuItem à partir de ces éléments.

Seulement au cours de ma réflexion, je me suis demandé comment il était possible de faire un binding depuis le code-behind de ma View sur une ObservableCollection exposée par mon ViewModel. Car dans le cas où la propriété Controls de mon fameux ruban Office aurait disposée d'un setter, j'aurais pu alors réalisé une moulinette dans mon code-behind pour peupler mon ruban depuis les données de mon ViewModel...

Désolé pour les explications un peu longues, mais si quelqu'un peu au passage me trouver une solution de dernière minute pour mon problème de ruban, je suis preneur ^^

J'ai pas regardé en détail mais peut être que le lien suivant peut t'aider

http://blog.lexique-du-net.com/index...-Office-Ribbon

Merci pour le lien, mais je l'avais déjà vu ...

En faite ce post permet de résoudre le problème de la commande attaché au bouton. Hors dans mon cas, c'est le bouton tout entier que je veux être capable de générer suivant mon ViewModel (voir même les boutons... suivant le contenu de mon ViewModel).

Hello,

Je te réponds ici plutôt que sur mon blog, cela permettra d'aider plus de monde je pense :mrgreen: !

J'ai cette problématique en ce moment, j'intègre le Ribbon de chez infragistics dans une architecture CAB (en faisant une UIExtensionSite pour les connaisseurs) ... par contre, je ne sais pas pour le ribbon "officiel".

Je vais me pencher sur la question demain... Le plus simple serait peut-être de créer un control dérivant du Ribbon en ajoutant la fonctionnalité voulue ... ?

Hello,

J'ai bien réussi à synchroniser les items du ribbonGroup avec une collection du ViewModel. Pour cela j'utilise un objet intermédiaire.

Par contre j'ai un problème : L'ajout fonctionne parfaitement jusqu'à ce que le groupe soit affiché pour la première fois. Ensuite plus aucune mise à jour de l'interface, la collection Controls est bien mise à jour ...

J'ai essayé de faire des updateLayoyt et cie mais rien ne met à jour la vue ...

Quelqu'un saurait comment faire ?

Pourquoi ne pas passer par une propriété attachée au contrôle Ruban, bindée sur le contenu du fichier XML récupéré depuis le ViewModel ?

Dans le code de la prop attachée, on récupère le ruban, on récupère la propriété Controls et on ajoute autant de contrôles que l'on veut...

Citation:

---

Envoyé par Thomas Lebrun

Pourquoi ne pas passer par une propriété attachée au contrôle Ruban, bindée sur le contenu du fichier XML récupéré depuis le ViewModel ?

---

Ce n'est pas possible d'utiliser le ramora pattern (déjà essayé :P).

Citation:

---

Envoyé par Visual Studio 2010

A 'Binding' cannot be set on the 'SetCollectionToSync' property of type 'RibbonGroup'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject.

---

J'ai utilisé une solution en créant un Syncher dans mon XAML. Je vais détailler cela dans un article prochainement...

Quoiqu'il en soit, le problème restera de faire se recréer le visual du ribbonGroup. Il a l'air 'figé' une fois créé...

Merci pour l'info Thomas mais cela reste un peu abstrait pour moi.

Comment une attached property peut elle me permettre d'ajouter des éléments à la propriété Control si celle-ci ne dispose pas de set ?

J'ai commencé à regarder un peu comment cela fonctionne, mais mon niveau n'est pas très élevé et je patauge un peu ..

Donc si je dois résumer ce que je dois faire :
1. Dans le code-behind de mon ruban (que j'ai placé dans un UserControl), il faut que je crée un nouvelle classe (RibbonGroupExtension) qui hérite du RibbonGroup et qui déclare mon AttachedProperty suivant le modèle :

Code:

---

1 2 3 4 5 6 7

public static readonly DependencyProperty ContentProperty = DependencyProperty.RegisterAttached("Content", typeof(IList), typeof(RibbonGroupExtension), new UIPropertyMetadata( null, new PropertyChangedCallback(OnContentPropertyChanged)));

---

2. Il faut ensuite que je déclare les accesseurs de mon AttachedProperty :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

public static Collection<IRibbonControl> GetContent(DependencyObject element) { if (element == null) throw new ArgumentNullException("The RibbonGroupExtension hasn't any content");   return (Collection<IRibbonControl>)element.GetValue(ContentProperty); }   public static void SetContent(DependencyObject element, Collection<IRibbonControl> value) { if (element == null) throw new ArgumentNullException("The new element is null");   element.SetValue(ContentProperty, value); }

---

3. Il me reste maintenant plus qu'à implémenter la méthode qui sera appelé lorsque mon AttachedProperty changera... seulement c'est la que la difficulté intervient. Même si la déclaration de la méthode ne pose pas vraiment problème...

Code:

---

1 2 3 4 5

private static void OnContentPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {   }

---

Comment puis je accéder à la propriété Controls du RibbonGroup dont j'ai hérité pour lui ajouter mon nouveau bouton ?

Je pense qu'il y a quelque chose que je n'ai pas saisi dans ta solution de l'AttachedProperty ...

Peux tu m'aider ?

Pour info, j'utilise le ruban Office de la CTP du mois de novembre 2009.

Re-Bonjour,

Comme je le disait plus haut, j'ai testé cette solution hier et cela ne fonctionne pas... La liste des Controls se met bien à jour avec de nouveaux éléments mais par contre le visuel n'est pas synchronisé dessus : tes boutons n'apparaissent pas ...


Ce dont te parles Thomas c'est cela :http://blog.lexique-du-net.com/index...the-components

PS: en pièce jointe la classe avec la propriété attachée pour exemple...

Hello,

Un visiteur de mon blog a donné la réponse au problème de rafraichissement du visuel.

Premièrement, nous avons l'impossibilité d'utiliser le RamoraPattern en raison de cette erreur :

Citation:

---

Envoyé par Visual Studio 2010

A 'Binding' can only be set on a DependencyProperty of a DependencyObject.

---

Aussi, je peux te proposer une solution qui consiste en la création d'un DependencyObject qui va servir à synchroniser les items ribbonGroup avec une liste de RibbonControls que tu lui fournit. La solution n'est pas du tout générique pour le moment mais cela fonctionne alors :P !

Voici la classe Syncher :

Citation:

---

public class Syncher : FrameworkElement
{

public static readonly DependencyProperty CollectionToSyncProperty =
DependencyProperty.Register("CollectionToSync", typeof(INotifyCollectionChanged), typeof(Syncher));

public INotifyCollectionChanged CollectionToSync
{
get { return (INotifyCollectionChanged)GetValue(Syncher.CollectionToSyncProperty); }
set { SetValue(Syncher.CollectionToSyncProperty, value); }
}

public static readonly DependencyProperty RibbonGroupToSyncProperty =
DependencyProperty.Register("RibbonGroupToSync", typeof(RibbonGroup), typeof(Syncher));

public RibbonGroup RibbonGroupToSync
{
get { return (RibbonGroup)GetValue(Syncher.RibbonGroupToSyncProperty); }
set { SetValue(Syncher.RibbonGroupToSyncProperty, value); }
}


protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
{
base.OnPropertyChanged(e);
if (e.Property.Name == CollectionToSyncProperty.Name)
{
if (CollectionToSync != null)
{
CollectionToSync.CollectionChanged +=
new NotifyCollectionChangedEventHandler(CollectionToSync_CollectionChanged);
}
}
}

void CollectionToSync_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (RibbonGroupToSync == null) return;
switch (e.Action)
{
case NotifyCollectionChangedAction.Add:

foreach (object obj in e.NewItems)
{
// Tu peux utiliser tes propres interfaces et les convertir en IRibbonControl aussi...
RibbonGroupToSync.Controls.Add(obj as IRibbonControl);
}
break;
case NotifyCollectionChangedAction.Remove:
foreach (object obj in e.NewItems)
// Tu peux utiliser tes propres interfaces et les convertir en IRibbonControl aussi...
RibbonGroupToSync.Controls.Remove(obj as IRibbonControl);
break;
case NotifyCollectionChangedAction.Reset:
RibbonGroupToSync.Controls.Clear();
break;
}

if (RibbonGroupToSync.IsArrangeValid)
RibbonGroupToSync.OnApplyTemplate();
}
}

---

Et l'utilisation dans le XAML:

Citation:

---

<DockPanel LastChildFill="True">
<r:Ribbon DockPanel.Dock="Top">
<r:RibbonTab Label="A second tab">
<r:RibbonGroup x:Name="myRibbonGroup">
<r:RibbonButton Command="{StaticResource cmd_AntoineCommand}" />
</r:RibbonGroup>
</r:RibbonTab>
</r:Ribbon>
<fwk:Syncher CollectionToSync="{Binding Controls}"
RibbonGroupToSync="{Binding ElementName=myRibbonGroup}" />
</DockPanel>

---

La cela synchronise un ribbonGroup en particulier avec une liste de RibbonControl. Il faudra surement mettre en place des convertisseurs, et/ou utiliser la même méthode pour synchroniser tout l'arbre Ribbon-->Tab-->RibbonGroup depuis des éléments de ton cru...

Merci pour l'info, je vais tester ça tout de suite et je vous tiens au courant.

En tout cas mercie de me confirmer que le RamoraPattern n'est pas utilisable ici car je cherche maintenant depuis un bon petit moment comment passer outre ce message d'erreur de VS

Code:

---

Impossible d'utiliser un 'Binding' dans une collection 'RibbonGroup'. Un 'Binding' ne peut être défini que sur un DependencyProperty d'un DependencyObject.

---

Je pensais que c'était moi qui avais mal fait quelque chose :D

Ce n'est pas du tout un problème si la solution n'est pas générique car normalement je n'ai que cette partie la de mon menu qui doit être dynamique.

En tout cas merci pour votre aide, ça fait plaisir de se sentir soutenu, surtout quand on se lance dans cette techno comme moi !

Désolé mais j'ai toujours une erreur ...

Citation:

---

Impossible de définir 'Binding' sur la propriété 'CollectionToSync' de type 'Syncher'. Un 'Binding' peut uniquement être défini sur un DependencyProperty d'un DependencyObject.

---

Lorsque je regarde de plus près avec le debugger, mon erreur me semble venir du moment ou mon objet Syncher est instancié.

http://img687.imageshack.us/img687/7660/ribbon1.png

Je ne comprends pas d'où vient ce XmlnsDictionary ...

Encore une petite idée pour moi ? :D

Bon rien à voir en faite, ça fait une heure que je tourne autour du pot pour rien.
Le problème provient du

Code:

---

1 2	<fwk:Syncher CollectionToSync="{Binding Controls}" RibbonGroupToSync="{Binding ElementName=myRibbonGroup}" />

---

Le binding du RibbonGroupToSync sur un RibbonGroup n'est pas possible car mon RibbonGroup n'est pas une DependencyProperty, tout simplement...

Pour le CollectionToSync, j'ai changer le type en ObservableCollection<> comme c'est le cas dans mon ViewModel. Donc maintenant mon CollectionToSync est bien une DependencyProperty mais ce n'est pas le cas du RibbonGroupToSync. Pour lui je ne vois pas comment faire ...

Désolé pour tous les messages qui ne serves à rien, mais comme tous les petits nouveaux, je ne suis pas capable de faire du copier/coller correctement :D

Maintenant mon application se lance bien.

Mon menu n'est pas remplie mais je dois bien avoir 2-3 trucs à corriger. Je reviens vers vous en cas de soucis :D

Citation:

---

Envoyé par Gigi070

Désolé pour tous les messages qui ne serves à rien, mais comme tous les petits nouveaux, je ne suis pas capable de faire du copier/coller correctement :D

---

lol, pas de problèmes !

Cela m'étonnai aussi car j'ai un projet VS qui fonctionne avec le code que je t'ai fournis !

Merci pour ta patience.

Ça commence à venir petit à petit mais j'ai toujours des problèmes...

Pour le moment ma propriété "Controls" est vide.
Lorsque je lance mon debugger en pas à pas, je vois que les étapes se déroule dans l'ordre suivant :
1. Mon ViewModelLocator est créé au lancement de mon application
2. Mon MainWindowViewModel est instancié, celui-ci pour le moment ne me sert à rien
3. Mon MenuViewModel est instancié, c'est lui qui contient les paramètres de mon ruban, l'ObservableCollection qui contient les éléments est bien remplie.
4. La View correspondant à mon menu est ensuite créée. Je vois bien mon debugger passer dans le "OnPropertyChanged" pour les propriétés CollectionToSync et RibbonGroupToSync.

Puis mon application finit de démarrer. Du coup elle ne passe jamais dans le CollectionToSync_CollectionChanged puisque mon ObservableCollection est remplie avant que le Handler ne soit attaché au OnPropertyChanged.

Il y a t-il une méthode pour le forcer ?

Oui, tu peux mettre la création du ViewModel, ou son initialisation qu'une fois la vue créée et "binder".

J'utilise le MVVM Light Toolkit, mes ViewModel sont donc gérées par mon ViewModelLocator.
Ma vue elle vient se binder au ViewModel par le DataContext de mon UserControl (Élément racine du UserControl qui contient mon ruban).

J'ai donc un peu de mal à voir comment faire :D

De toute manière je suis obligé de créer mon ViewModel avant ma vue sinon celle-ci ne peut pas faire ses bindings. Et je ne vois pas vraiment comment décaler son initialisation en dehors de son constructeur ...

Il n'y a pas une méthode pour forcer le OnPropertyChanged à la fin de l'initialisation de ma View (this.InitializeComponent();) ?

Bah, tu peux dire au syncher de faire la synchro une fois qu'il a les deux infos nécessaires peut être ?

Bonjour,

Je ne m'en sors pas vraiment...

J'ai essayé de décaler la création de la vue et du binding du datacontext de mon ruban à la suite de son this.InitializeComponent(); mais cela ne change rien au problème.
En effet, le binding du RibbonGroupToSync se fait bien durant l'initialisation du composant mais celui du CollectionToSync se fait une fois le DataContext définit pour mon ruban(car avant il n'a aucune référence vers mon ViewModel).

En ce qui concerne ta proposition de faire la synchro par le Syncher une fois qu'il a les 2 infos nécéssaire, je ne vois pas comment faire. CollectionToSync étant un INotifyCollectionChanged, il ne me permet pas de parcourir la collection associé du coté de mon ViewModel..

N'est il pas possible de déplacer la surcharge de la méthode CollectionChanged du CollectionToSync dans un constructeur de la classe Syncher ?

Hello,

Non, mais quand tu fais le binding pour la première fois, au lieu de s'abonner uniquement au INotifyCollectionChanged, tu rajoutes les éléments déjà présents ...

Bon alors je pense que ce que j'ai fait est très très sale et moche ...

Mais tu ne peux pas savoir à quel point sa fait plaisir de voir son menu se remplir :D

Il ne me reste plus que à régler les problèmes des CanExecute et Execute et puis tout sera bon !

Merci beaucoup pour ton aide et surtout ta patience... Je comprends que cela puisse être pénible de répondre à toutes les questions basiques que peu poser un petit nouveau qui n'y connait rien.

Pas de pb.

En plus tes questions ne sont pas si basiques que ça...
J'ai tourné un peu avant de trouver une solution correcte.

Bon courage !

Salut Jonathan,

Comme je t'aie indiqué l'autre jour, j'essaie maintenant de m'atteler aux propriétés Executed et CanExecuted de la commande associée à mon bouton.

J'ai voulu reprendre la solution que tu avais mis sur CodePlex pour palier au faite que les RibbonCommand ne sont pas des DependencyObject. Seulement avec la solution sur laquelle nous avons abouti pour les RibbonButton, la RibbonCommand qui est associé à mon bouton est générée dans le Syncher (j'associe les différents éléments tel que LargeImageSource, SmallImageSource et LabelTitle à partir des propriétés des objets contenus dans l'ObservableCollection de mon ViewModel).
Même si je remplace la RibbonCommand générée par une RibbonCommandExtended de ton cru, celle-ci sera générée dans du code-behind qui ne peut pas être bindé ... ou sinon il faut m'expliquer comment ...

Sinon pour une RibbonCommand "Basique" j'ai pu suivre ta solution sans problème ...