Affichage d'un calendrier - DataBinding et ItemsControl
Bonjour à tous,
Je fais appel à votre aide pour m'aider sur un "problème" que je rencontre actuellement dans le cadre d'un développement.
Pour situer le contexte, je reçois une liste d'objet (via un service WCF) qui me permet d'alimenter un planning.
Je précise tout de suite que j'ai la main sur les deux parties (interface graphique et service WCF), j'ai donc la possibilité de modifier le format
des éléments de la liste qui permet d'afficher le planning.
Actuellement, chaque élément de la liste contient 3 propriétés :
Date
DispoMatin
DispoApresMidi
DispoMatin et DispoApresMidi sont de type Booleen et j'ai donc un "enregistrement" par jour. Ce qui fait que la liste contient 6 éléments de type Planning au final (du lundi au samedi).
Lors de mes premiers tests, j'ai créé une interface graphique trés rapidement et de manière assez simpliste :
Code:
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
| <Button x:Name="LuMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="1" Grid.Column="0" Foreground="Red" FontWeight="Bold" />
<Button x:Name="LuAM" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="2" Grid.Column="0" Foreground="Red" FontWeight="Bold" />
<Button x:Name="MaMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="1" Grid.Column="1" Foreground="Red" FontWeight="Bold" />
<Button x:Name="MaAM" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="2" Grid.Column="1" Foreground="Red" FontWeight="Bold" />
<Button x:Name="MeMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="1" Grid.Column="2" Foreground="Red" FontWeight="Bold" />
<Button x:Name="MeAM" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="2" Grid.Column="2" Foreground="Red" FontWeight="Bold" />
<Button x:Name="JeMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="1" Grid.Column="3" Foreground="Red" FontWeight="Bold" />
<Button x:Name="JeAM" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="2" Grid.Column="3" Foreground="Red" FontWeight="Bold" />
<Button x:Name="VeMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="1" Grid.Column="4" Foreground="Red" FontWeight="Bold" />
<Button x:Name="VeAM" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="2" Grid.Column="4" Foreground="Red" FontWeight="Bold" />
<Button x:Name="SaMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="1" Grid.Column="5" Foreground="Red" FontWeight="Bold" />
<Button x:Name="SaAM" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
Grid.Row="2" Grid.Column="5" Foreground="Red" FontWeight="Bold" /> |
En gros, on a un bouton par demi-journée.
Pour alimenter ces boutons, je faisais ceci :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| void client_GetPlanningCompleted(object sender, Client.ServiceReference.GetPlanningCompletedEventArgs e)
{
try
{
UpdateTextPlanning(LuMAT, e.Result[0].DispoMatin);
UpdateTextPlanning(LuAM, e.Result[0].DispoApresMidi);
UpdateTextPlanning(MaMAT, e.Result[1].DispoMatin);
UpdateTextPlanning(MaAM, e.Result[1].DispoApresMidi);
UpdateTextPlanning(MeMAT, e.Result[2].DispoMatin);
UpdateTextPlanning(MeAM, e.Result[2].DispoApresMidi);
UpdateTextPlanning(JeMAT, e.Result[3].DispoMatin);
UpdateTextPlanning(JeAM, e.Result[3].DispoApresMidi);
UpdateTextPlanning(VeMAT, e.Result[4].DispoMatin);
UpdateTextPlanning(VeAM, e.Result[4].DispoApresMidi);
UpdateTextPlanning(SaMAT, e.Result[5].DispoMatin);
UpdateTextPlanning(SaAM, e.Result[5].DispoApresMidi);
}
catch (Exception ex)
{
MessageBox.Show(ex.InnerException.Message);
}
} |
La méthode UpdateTextPlanning se chargeant de rendre actif ou non le bouton et d'afficher "COMPLET" si non..
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| private void UpdateTextPlanning(Button boutonEnCours, Boolean dispo)
{
if (dispo)
{
boutonEnCours.IsEnabled = true;
boutonEnCours.Content = "";
}
else
{
boutonEnCours.IsEnabled = false;
boutonEnCours.Content = "COMPLET";
}
} |
A noter que la couleur change également, mais ça c'est géré directement dans le style (Vert si IsEnabled est à true, Gris si c'est à false).
Ce test rapide m'a permis de voir que tout fonctionné parfaitement.
J'ai donc entrepris d'améliorer un peu les choses :
SOLUTION 1 : Dans cette première solution, j'ai ajouté un peu de binding.
Ainsi, le code pour chaque de mes boutons devient :
Code:
1
2
| <Button x:Name="SaMAT" Width="80" Height="70" Style="{StaticResource styleBoutonPlanning}"
IsEnabled="{Binding DispoMatin}" Grid.Row="1" Grid.Column="5" Foreground="Red" FontWeight="Bold" /> |
Il me suffit ensuite faire
Code:
SaMAT.DataContext = e.Result[5];
Et c'est bon. Le bouton devient bien actif ou non selon la valeur de la propriété.
Cependant, deux problèmes se posent :
1 - Comment gérer l'apparition ou non du mot COMPLET quand DispoMatin (ou DispoApresMidi) est à false ?
J'ai pensé à un Converter qui changerait le booleen en un string "COMPLET" ou vide, et ensuite j'ajoute un binding sur la propriété Content du bouton.
Je pourrais également modifié mon service WCF pour envoyer directement cette info. Mais ça me plait pas trop comme solution.
Ou je pourrais utiliser une solution à laquelle j'ai pas pensé :D
J'aimerais faire les choses de la meilleure façon possible.
2- L'autre problème vient du fait que je trouve ça rébarbatif de faire :
Code:
leNomDuBoutton.DataContext = e.Result[5];
pour chaque bouton. Ca en fait 12 (6 jours * 2 demi journée).
Pour pallier à ce problème, j'ai donc envisagé la Solution 2.
SOLUTION 2 : Utilisation du DataBinding et d'un ItemsControl.
Pour cette solution, je me suis inspiré de cet excellent tuto (http://broux.developpez.com/articles...g-silverlight/).
Le code XAML pour mon calendrier devient donc :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ItemsControl x:Name="Calendrier" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<Button x:Name="BtnDuMatin" Click="BtnDuMatin_Click" Width="80" Height="70" IsEnabled="{Binding DispoMatin}" />
<Button x:Name="BtnApresMidi" Width="80" Height="70" IsEnabled="{Binding DispoApresMidi}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl> |
Côté code behind, j'ai juste à faire :
Code:
Calendrier.ItemsSource = e.Result;
C'est sacrément plus court.
Par contre, cette solution me soulève un nouveau problème (en plus de celui du mot COMPLET qui est commun aux deux solutions) :
1- Dans la solution initiale (pour les tests de départ) et dans la solution 1, chaque bouton a un nom bien précis. C'était trés utile pour savoir sur quel bouton l'utilisateur a cliqué. Car c'est pas juste de l'affichage. En fait, je dois pouvoir savoir sur quelle demi-journée a cliqué l'utilisateur.
Avec un nom de bouton différent pour chaque demi-journée, je faisais simplement :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| private void CalendrierButton_Click(object sender, RoutedEventArgs e)
{
FrameworkElement fe = sender as FrameworkElement;
switch (fe.Name)
{
case "LuMAT":
// Je sais ou il a cliqué
break;
case "LuAM":
// Je sais ou il a cliqué
break;
case "MaMAT":
// Je sais ou il a cliqué
break;
// etc ....
}
} |
Pour cette solution 2, j'ai donné un nom à mes boutons : BtnDuMatin et BtnApresMidi. Mais comme l'ItemsControl agit comme un Repeater,
tous mes boutons du matin portent le même nom. Ma question est donc simple, comment savoir sur quelle demi-journée a cliqué l'utilisateur ?
Je sais que ça fait beaucoup de questions, mais j'aimerais vraiment faire les choses proprement. Merci de me donner vos conseils ou de m'indiquer une solution à laquelle je n'ai peut être pas pensé.
Merci d'avance pour votre aide.
