Custom Control: meilleures pratiques

Version imprimable

24/08/2010, 11h58
pmorestin

Custom Control: meilleures pratiques
J'ai besoin de créer (SL4) un composant du genre:
Un container:StackPanel qui contient
- Un TextBlock
- Un DatetimePicker
- Un TextBlock
- Un DatetimePicker
Ce composant doit etre réutilisable et doit exposer des propriétés qui définissent, par exemple, la Visibility des éléments, la WIDTH du container, etc.
Et bien sûr, Je dois pouvoir récupérer les valeurs saisies.

Ma question: Comment doit procéder:
- monComposant.cs (avec DP) -> generic.xaml
- usercontrol en xaml et DP dans fichier .cs ...

J'avoue qu'entre toutes les articles publiés, je m'y perd un peu, pour commencer. Et je confond Custom Control, template, etc.

Pouvez-vous me donner LA piste pour débuter ?

Merci d'avance
24/08/2010, 12h22
Samuel Blanchard

Bonjour,

Tout dépend du niveau de réutilisation que tu entends. Je suis en train d'ecrire un article la dessus car ce n'est effectivement pas toujours simple de savoir quant utiliser un UserControl ou TemplateControl.

Basiquement, Si ton contrôle ne possède pas de contenu tu peux utiliser un UserControl.
Le UserControl est spécialisé dans l'intégration de controles composites (C'est ce que tu veux faire) et surtout, supporte le design. Avec quelques DP tu pourras le réutiliser facilement.

Bon Courage !
24/08/2010, 13h13
pmorestin
Merci pour cette réponse rapide.

Donc si j'ai bien compris:
- MonUserControl.xaml -> mes élements (lable, datepicker....)
- MonUserControl.xaml.cs -> mes DP
Je veux utiliser MVVM (Light). Quelle est la pratique, dans ce cas...
- J'expose une DP ds mon UserControl
- Dans ma page qui héberge mon UserControl, je binde ma dp sur une prop. du viewmodel de la page
...?
24/08/2010, 13h40
Samuel Blanchard

Citation:

Donc si j'ai bien compris:
MonUserControl.xaml -> mes élements (lable, datepicker....)
MonUserControl.xaml.cs -> mes DP

oui c'est cela.

Citation:

Je veux utiliser MVVM (Light). Quelle est la pratique, dans ce cas...
J'expose une DP ds mon UserControl
Dans ma page qui héberge mon UserControl, je binde ma dp sur une prop. du viewmodel de la page

Oui ta DP de ton userControl peut être un ViewModel.

Si tu veux qu'il soit indépendant de ton ViewModel, crée les DP utiles aux controles internes du UserControles puis Binde les propriétés du ViewModel dessus.
26/08/2010, 16h37
pmorestin

Custom Control: meilleures pratiques: Le RETOUR
J'ai un UserControl constitué de:
- Xaml: 2 textBlock + 2 DatetimePicker.
- CS: mes DependencyProperty
Une page appelante de type 'Formulaire ' contenant:
- une instance de mon UserControl
- Un Bouton Ok
Le viewModel de ma page appelante 'formulaire', qui me permet dans un 1er temps, de renseigner les valeurs de mes DatePicker via les binding des DP

Mon Objectif: récupérer les données saisies dans les DateTimePicker

Ma question: j'ai une RelayCommand sur mon Bouton MAIS je ne vois vraiment pas comment passer les valeurs saisies dans mes DatePicker...?

Merci d'avance pour vos idées .
26/08/2010, 17h21
Skyounet

Ben si tu peux mettre des valeurs dans tes DatePicker via tes depencency properties, pourquoi tu ne pourras pas les récupérer après ça ?
26/08/2010, 19h24
Pragmateek

Il faut que ta RelayCommand référence les DPs d'une façon ou d'une autre.
Une closure via une lambda est un moyen simple de les référencer.

Pourrais tu indiquer comment est définie la RelayCommand ?

C"est justement mon Probleme...

Voici mon UserControl instancié dans un formulaire

Code:

1
2
 
<my:monDateTimePicker StartDateValue="{Binding StartDateDebut, Mode=TwoWay}" x:Name="hswPeriod" />

.... avec une DP: StartDateValue

extrait du ViewModel:
La Prop sur laquelle est bindée ma DP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
        private DateTime _startDateDebut;
        public DateTime StartDateDebut
        {
            get { return _startDateDebut; }
            set
            {
                if (value == StartDateDebut) return;
                _startDateDebut = value;
                RaisePropertyChanged("StartDateDebut");            
            }
        }

Et ma commande.....

Code:

1
2
 
_saveCommand = new RelayCommand(() => { setResults(); CheckCommandState(); });

AU chargement, je peux bien sur alimenter mon Datepicker via ma DP.
-Si je modifie la valeur, comment la récupérer ...?

26/08/2010, 22h58
Pragmateek

Ta RelayCommande étant dans ton VM elle peut accéder sans problème à celui-ci, de même que les méthodes invoquées dans la RelayCommand :

Code:

_saveCommand = new RelayCommand(() => { setResults(); CheckCommandState(); DoStuff(this.StartDateDebut);});
27/08/2010, 11h02
pmorestin

je me suis mal expliqué:
Comment, dans le Execute de ma RelayCommand (dans mon VM), puis-je savoir quelle sont les nouvelles saisies effectuées dans les DatePicker de mon Usercontrol. ....?
27/08/2010, 13h33
Pragmateek
Il faut que ton UC "monDateTimePicker" expose une propriété de dépendance, de type DateTime typiquement, qui indiquera la date et l'heure (ou tout autre info) actuellement sélectionnées par l'utilisateur :
Code:

1 2 public static readonly DependencyProperty SelectedDateTimeProperty = DependencyProperty.Register("SelectedDateTime", typeof(DateTime), typeof(monDateTimePicker), null);
Cette DP sera construite à partir des entrées des DatePicker de "monDateTimePicker".
28/08/2010, 19h22
pmorestin
J'ai trouvé ma solution avec le lien suivant:
http://stackoverflow.com/questions/1...operty-binding

Dans le code XAML de mon UserControl, j'ai enlevé le binding sur la DP.
Dans le .CS, j'ai remplacé par:
Code:

1 2 dtDD.SetBinding(DatePicker.SelectedValueProperty, new Binding() { Source = this, Path = new PropertyPath("StartDateValue"), Mode = BindingMode.TwoWay });
Ainsi, depuis une VIEW, les saisies effectuées dans mon userControl, sont bien prises en compte par les Propriétés sur lesquelles elles sont bindées.

Si qqu'un à une explication technique, je suis preneur....
28/08/2010, 21h11
Skyounet

L'explication est que tu n'avais surement pas bindé ton contrôlé à lui même.

Tu n'avais pas mis de ligne dans le genre

Code:

LayoutRoot.DataContext = this;