Discussion :

[Marcopilon]

Bonjour,

Après plusieurs jours de galère et de recherche sur le net, je n'arrive pas à trouver une solution fonctionnelle pour le problème suivant.

Je cherche à faire des UserControl pour simplifier mon design de fenetres WPF.

Soit la classe simplifiée suivante (les classes réelles contiennent bcp plus d'attributs) :

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
 
public class Joueur 
{
private String _nom;
private String _prenom;
 
public String Nom{
	get { return _nom; }
	set {	_nom = value;}
}
public String Prenom{
	get { return _nom; }
	set {	_prenom = value;}
}
public Joueur (){}
}

Je crée un UserControl WPF (sous Visual Studio 2010 : Projet -> Ajouter un Controle Utilisateur), contenant une :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//!\\ pseudo code :
public partial class UserControlJoueur : UserControl
{
	TextBox textBoxNom; // présent en fait dans le UserControlJoueur .xaml
	TextBox textBoxPrenom;
}

Ensuite, je veux créer une fenetre et y glisser mon UserControlJoueur.

Je souhaite faire un DataBinding entre mon UserControlJoueur et une instance de la classe Joueur.

Dans ma fenetre AjouterJoueur, j'ai tenté un truc du genre :

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
 
public partial class FenetreAjoutJoueur : Window
{
	public Joueur joueur_a_Ajouter { get; set; }
 
	public FenetreAjoutJoueur ()
	{
		this.ShowActivated = true;
 
		joueur_a_Ajouter = new Joueur();
		UserControlJoueur .DataContext = joueur_a_Ajouter;
 
		InitializeComponent();
	}
}

Mais ça ne fonctionne pas ...
J'ai bien cherché sur le net, mais je ne sais pas comment faire comprendre à mon UserControlJoueur :

• qu'il doit forcément être "bindé" avec une instance de la classe Joueur,
• que UserControlJoueur.textBoxNom.Text doit etre bindé avec l'attribut Joueur.Nom (et respectivement textBoxPrenom.Text avec Joueur.Prenom).

Ma seule piste potable est le lien suivant :
http://msdn.microsoft.com/fr-fr/library/5554bf3a.aspx
Mais il faut gérer ça, que je ne comprends pas bien :

DefaultBindingPropertyAttribute

Implémentez cet attribut sur des contrôles simple qui affichent une colonne (ou propriété) unique de données, tels que TextBox.

ComplexBindingPropertiesAttribute

Implémentez cet attribut sur des contrôles qui affichent des listes (ou des tables) de données, tels que DataGridView.

LookupBindingPropertiesAttribute

Implémentez cet attribut sur des contrôles qui affichent des listes (ou des tables) de données, mais doivent également présenter une colonne ou une propriété unique, tels que ComboBox.

Au pire, vais essayer d'utiliser mes classes(entités) comme source de données.
Avec cette possibilité, on peut glisser directement une classe-entité sur le designer WPF selon certains templates prédéfinis. Je ne sais pas encore comment le faire avec un UserControl personnalisé.
Par ailleurs, l'utilisation de source de données à partir de mes classes est énervant, car lorsqu'on glisse une entité sur le designer, les champs sont désordonnés :'( (Champ prénom tout en haut, puis champ sexe, puis champ adresse, puis champ Nom etc... :/)

Quelqu'un a-t-il déjà été confronté à ce type de considérations, et quelle solution est la plus viable ?
Mon but est non seulement de pouvoir avoir une implémentation qui marche, mais de comprendre comment elle marche et pourquoi ^^ cerise sur le gateau, ce serait de savoir la différence avec d'autres méthodes.


Quelques liens que j'ai consultés :

• http://www.tech-archive.net/Archive/.../msg02767.html (databinding mais en WindowsForms, je ne comprends pas vraiment l'intéret de redéclarer les champs de la classe a binder et de lier les getters/setters avec les textbox ....)
• http://msdn.microsoft.com/en-us/libr...v=VS.100).aspx Crosoft propose un truc genre :
  

  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
  [System.ComponentModel.DefaultBindingProperty("PhoneNumber")]
   public partial class PhoneNumberBox : UserControl
  {
          public string PhoneNumber
          {
              get{ return maskedTextBox1.Text; }
              set{ maskedTextBox1.Text = value; }
          }
   
          public PhoneNumberBox()
          {
              InitializeComponent();
          }
  }

  mais ça explique la façon de lier un UserControl à un champ de DataSource ...
  (je ne saisis pas comment lier plusieurs champs entre eux et forcer la cascade joueur <-> usercontroljoueur et usercontrol.textboxNom <-> joueur.Nom)
• J'ai vu des tutos indiquant qu'il fallait probablement implémenter l'interface

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  INotifyPropertyChanged

  dans la classe Joueur, mais je ne vois pas comment m'en servir dans le UserControlJoueur, et ne suis pas sur de comprendre l'implémentation de l'interface.

PS :

Le contexte général est que je fais une application qui "grosso merdo" permet de consulter une base de données en local (un genre de console admin) et de faire des manips dessus.
J'ai voulu utiliser l'ADO.NET entity generator, mais me suis cassé les dents car je n'ai pas réussi à implémenter des fonctions de filtrage sur mes datagrids /viewsource représentant mes tables. POurtant j'arrive à mettre à jour et ajouter des éléments et impacter ces changements dans ma BDD MySQL ^^

[Truelle]

Salut,

ton code est juste concernant le binding de ton objet "Joueur" en initialisant le DataContext de ton UC.
Ensuite pour tes deux textbox, en XAML suffit de faire ceci pour binder la propriété Text avec une source de données, normalement respectivement le DataContext de l'objet lui même, mais si celui-ci est null, il va en chercher un de son parent jusqu'a trouver quelque chose.

C'est du XAML:

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<Textbox Name="textBoxNom" Text="{Binding Nom}" />
<Textbox Name="textBoxPrenom" Text="{Binding Prenom}" />

[Marcopilon]

Bonsoir Truelle,

Merci de ta réponse. J'ai pour l'instant mis de coté la question des UserControl dans mon travail. Je vais y revenir un peu plus loin dans ce post.

En fait, pour le DataBinding statique (façon "classique") j'ai a peu près compris, et j'ai réussi à faire un "formulaire" autogénéré à partir de mes classes utilisées comme datasource. Jusqu'à présent, les choses étaient assez obscures ^^
[EDIT] Laius sur la databinding simple en statique effacé [/EDIT]

Je reformule le problème plus clairement.

J'ai mes deux classes Joueur et Coordonnees.
Les coordonnées du joueur sont optionnelles.
Je souhaite faire une fenetre qui servirai de formulaire pour définir Nom, Prenom et éventuellement Coordonnees. L'objet Coordonnees n'existe pas de base pour Joueur.

Comme je sais que je vais voir besoin de ces éléments dans des tas d'autres endroit de mon soft, je me suis dit

"plutot que de tout refaire à la mano, soit finaud et factorise ton code !"

. D'où la question des UserControl et du Databinding.

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
 
// mes classes
public class Joueur 
{
private String _nom;
private String _prenom;
 
public String Nom{
	get { return _nom; }
	set {	_nom = value;}
}
public String Prenom{
	get { return _nom; }
	set {	_prenom = value;}
}
 
public Coordonnees Coordonnees { get;set;}
public Joueur (){}
}
//---------------------------
public class Coordonnees{
	public String Ville { get; set;}
	public Coordonnees(){}
}

UCCoord : ce control contient une textbox qu'on associe à la proprieté Ville.
Ce UserControl doit donc etre lié à un ojet Coordonnes. Comment ? StaticResource n'est pas une bonne idée d'après mes tests (voir c-dessous).

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<UserControl x:Class="MonProjet.Classes.Vue.UserControlCoord"
			xmlns:MesDonnees="clr-namespace:MonProjet.Classes.Donnees">
	<UserControl.Resources>
		<MesDonnees:Coordonnees x:Key="des_coordonnees" />
	</UserControl.Resources>
	<Grid  DataContext="{StaticResource des_coordonnees}">
		<TextBox  Name="textBoxVille"
				Text="{Binding Path=Ville}"/>
	</Grid>
</UserControl>

Dans une fenetre Window1, je place une TextBox et un UserControlCoord.
Window1 a pour ressource un Joueur. La textBox est liée au Nom du joueur, et le UserControl a ses Coordonnees.

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<Window x:Class="MonProjet.Classes.Vue.Window1"
		xmlns:MesDonnees="clr-namespace:MonProjet.Classes.Donnees"
		xmlns:MesVues="clr-namespace:MonProjet.Classes.Vue">
	<Window.Resources>
		<Donnees:Joueur x:Key="unJoueur" />
	</Window.Resources>
	<Grid DataContext="{StaticResource unJoueur}">
		<TextBox x:Name="nomTextBox"
				Text="{Binding Nom}"/> 
		<MesVues:UCCoord 
				x:Name="unUCCoord"
				DataContext="unJoueur.Coordonnees"/>
	</Grid>
</Window>

Enfin pour tester tout ça, dans le code de Window1 :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
private void Window_Loaded ( object sender , RoutedEventArgs e )
{
	// récupérer la ressource Joueur associée à Window1
	Joueur j = ( ( Joueur ) ( this.FindResource( "unJoueur" ) ) );
 
	// trafiquer les données pour voir si ça s'affiche
	j.Nom = "De Kervern";
	j.Coordonnees.Ville = "Grosville";
}

Lorsque je fais afficher Window1, j'ai une belle fenêtre blanche.

Je pense que j'ai du m'emmeller les pinceaux à un moment donné. Ou que je ne teste pas correctement.

Où est-ce que j'ai perdu le fil ?
Par ailleurs, il faudrait que les Coordonnees ne soient crées et remplies que si on touche au UserControl, mais que ces-dites Coordonnees soient refilées à mon Joueur.

Sources :
Je suis tombé sur ce "tuto" qui date de l'âge de pierre => WPF: création de UserControl typé que j'ai testé (copier/coller) dans un projet en .NET4 C# WPF et ça marche pas du tout :/

Merci de vos réponses.

PS : merci à l'admin qui a déplacé mon post initial dans la bonne section.

[Marcopilon]

Alors, en guise de réponse, on a trouvé avec Truelle cette alternative-ci :

1. dans le code UserControl
   
   1. XAML : ne mettre aucun DataContext, binder les textbox etc... en supposant que le contexte est celui de votre classe. Dans mon cas faire donc :
      

      Code XML :

      Sélectionner tout - Visualiser dans une fenêtre à part

      1
      2
      3
      4
      5
       
      <UserControl x:Class="MonProjet.Classes.Vue.UserControlCoord" ... >
      ...
      <TextBox Name="matextbox" Text="{Binding Ville}" ...>
      ...

   2. C# : rien.
   3. Evolution possible de la solution : définir une Propriete "Coordonnees" dans le UC de coordonnees et y accéder depuis l'extérieur.
2. Dans le code de la fenetre qui appelle le UserControl
   
   1. XAML : ne rien mettre dans la déclaration du UserControl. Ex avec mes données :
      

      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
       
      <Window xmlns:Donnees="clr-MonProjet.Classes.Donnees.Entites"
      	xmlns:local="clr-namespace:Admin.Vue"
      	x:Class="MonProjet.FenetreAjoutJoueur"
      	Title="Ajouter un Joueur" .../>
      <Window.Resources>
      		<Donnees:Joueur x:Key="joueur_a_Ajouter" />
      </Window.Resources>
      <grid ...>
      <TextBox Name="textBoxNom" Text="{Binding Nom}"/>
      ...
      <local:UC_Coordonnees x:Name="the_UC_Coordonnees"/>
      ...
      </grid></Window>

   2. C# :
      C'est la que se joue le binding entre le the_UC_Coordonnees et un objet Coordonnees.
      J'ai choisi ici le constructeur de la fenetre qui contient mon UC (fichier *.xaml.cs):
      

      Code C# :

      Sélectionner tout - Visualiser dans une fenêtre à part

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
       
      public FenetreAjoutJoueur ( ){
      	this.ShowActivated = true;
       
      	InitializeComponent();
       
      	Coordonnees c = new Coordonnees();
      	the_UC_Coordonnees.DataContext = c;
      	( ( Joueur ) ( this.FindResource( "joueur_a_Ajouter" ) ) ).Coordonnees = c;
      }

Ca fonctionne, et jpeux faire un formulaire pour Joueur qui prend en compte ses coordonnées si elles sont remplies.

Seul hic, si le joueur ne rempli aucun champ de coordonnées disponibles ... on aura créé un Coordonnees associé au UserControl et au joueur, mais dont tous les champs seront null.

----------
On doit peut être pouvoir faire l'association à la validation, avec le bouton Ok d'un formulaire par exmple :

1. on laisse l'affection d'un coordonnees au datacontexte du UserControl dans le constructeur de notre fenetre principale
2. lorsqu'on quitte la fenetre principale (bouton Ok), on check si le Coordonnées du datacontexte du UserControl est null/vide. Si oui, on ne l'associe pas à notre joueur, si non on l'associe à ce moment là uniquement.

----------
Autre option (Je viens de le tester, et cela fonctionne !)

On ajoute un attribut Coordonnees au UserControlCoordonnes, sans déclarer aucune ressource dans le XAML correspondant.

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
public partial class UC_Coordonnees : UserControl
{
	public Coordonnees coord { get; set; }
 
	public UC_Coordonnees ( ){
		this.InitializeComponent();
// on cree l'objet direct !
		coord = new Coordonnees();
// et on en fait notre propre datacontext
		this.DataContext = coord;
	}
}

Pour affecter les coordonnées du UserControl, il n'y a plus qu'à faire, dans le code de l'objet contenant UC_Coordonnees (par exemple une Window, et pour peu que mon_jouer_de_ma_window et monUC_Coordonnees soient défini dans le XAML ou quelque part dans le C#) :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
public Window1 : Window {
...
// on affecte l'attribut du UserControl
mon_jouer_de_ma_window.Coordonnees = monUC_Coordonnees.coord;
...
}

Ca doit surement être améliorable Si vous avez des remarques, n'hésitez pas !

[Nathanael Marchand]

Et utiliser un pattern genre MVVM et Prism?

[Marcopilon]

Bonjour,

Et utiliser un pattern genre MVVM et Prism?

Effectivement, dans le code que je présente, le pattern M-V-VM n'apparait pas. Pour Prism, je n'ai pas encore pris le temps de chercher des infos dessus.

Parcque j'ai un bagage plutôt Java (refactor d'une appli sous-traitée dans un pays pas cher), et que j'ai très peu de bouteille dans le dev logiciel ... J'suis parti un peu à la "warrior" si je puis dire.

Toujours est-il que j'ai fait le test avec le pattern MVVM (Model-View-ViewModel, pour ceux qui connaitraient pas, il est important de le préciser), ou de moins ce que je pense etre un pattern MVVM /D

Ca marche pas trop mal. Je me suis basé sur des trucs vus sur le net (tutos etc...)

J'ai un truc comme ça désormais (diagramme UML de Visual Studio 2010) :


Avec dans ma fenetre d'ajout de joueur deux user control maison(XAML)

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<Window 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:UserControls="clr-namespace:MonProjet.UC"
		x:Class="MonProjet.FenetreAjoutJoueur"
		Title="Ajouter un Joueur">
	<Grid x:Name="gridFenetreAjouterJoueur" Height="Auto"  Width="Auto"  Margin="5">
 
		<UserControls:UC_Joueur x:Name="the_UC_Joueur" Margin="5" Width="Auto" Height="Auto"/>
		<UserControls:UC_Coordonnees x:Name="the_UC_Coordonnees"  Margin="5"  Width="Auto"  Height="Auto" />
...
	</Grid>
</Window>

Le code C# des UserControl est très simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
public partial class UC_Joueur: UserControl{
	public UC_Joueur( ){
		this.InitializeComponent();
	}
}

Et le XAML des UserControl, comme je l'ai précisé plus haut, ne fait que des binding vers une propriete (Nom, Prenom ...) (pas de StaticResource etc...)


Je gère les datacontext des UserControl en leur refilant uniquement des ViewModel qui implémentent l'interface INotifyPropertyChanged.

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
 
public partial class FenetreAjoutJoueur : Window{
	...
 
	private Joueur nouveauJoueur;
 
	public FenetreAjoutJoueur ( ){
		InitializeComponent();
		this.ShowActivated = true;
		initialisationDesUserControls();
	}
 
	private void initialisationDesUserControls ( ){
		// init du UC_Joueur
		nouveauJoueur = new Joueur();
		VMJoueur viewModelJoueur = new VMJoueur( nouveauJoueur );
		the_UC_Joueur.DataContext = viewModelJoueur;
 
		// initialisation du UC_Coordonnees
		nouveauJoueur.Coordonnees = new Coordonnees();
		VMCoordonnees viewModelCoord =  new VMCoordonnees( nouveauJoueur.Coordonnees );
		the_UC_Coordonnees.DataContext = viewModelCoord;
	}
}

Exemple d'implémentation des ViewModel :

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
 
public class VMJoueur : VMBase{
	private readonly Joueur joueur;
 
	public String Nom{
		get { return joueur.Nom; }
		set{
			this.joueur.Nom = value;
			OnPropertyChanged( "Nom" );
		}
	}
 
	public String Prenom{
		get { return joueur.Prenom; }
		set{
			joueur.Prenom = value;
			OnPropertyChanged( "Prenom" );
		}
	}
 
	public VMJoueur ( Joueur unJoueur ){
		if ( unJoueur == null )
			throw new NullReferenceException( "Argument du constructeur VMJoueur NULL !" );
 
		this.joueur = unJoueur;
	}
}

Avec la classe joueur derrière :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
public class Joueur : Participant {
	public String Nom{ get ; set;}
	public String Prenom { get; set;}
...
}

Dans tout ça, je ne suis pas vraiment satisfait de la création de ma fenetre joueur et de son initialisation. L'attribut joueur privé me parait pas très sexy. Mais je vois pas comment le récupérer ensuite, car les ViewModel ne me laissent pas y toucher depuis mes fenêtres, car ils sont

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

private readonly Joueur joueur;

Est-ce-que cela correspond à une implémentation potable du pattern M-V-VM ?
Model : la classe Joueur
ViewModel : la classe VMJoueur et interfaceNotifyPropertyChanged
Vue : les UC/la fenetre

Maintenant je voudrais passer à la suite : mettre des regles de validation "maison" ^^ et trouver le moyen de faire un LINQ<->MYSQL "kirroxx du poney" parceque écrire des requêtes SQL, c'est "has been"