[C#/WPF] Visibility d'un élément avec MVVM

Version imprimable

Bonjour, je suis nouveau sur le site donc je m'excuse si je n'ai pas poster ma question au bon endroit du site.

J'ai en ce moment un petit problème, je doit développer un Logiciel en WPF C# en utilisant la structure MVVM dont je vient de faire mes premier pas aujourd'hui.

Jusque la tout se passait bien, ouverture, fermeture fenêtre (mon logiciel gère de plus dynamiquement langue et skin 8-) ), et la c'est le drame, je doit pouvoir afficher/cacher un élément via un menu.

Avant de présenter le code je tient a dire que j'ai chercher mais n'arrive pas a utiliser les exemples trouver pour mon code :cry:

Mon item a cacher dans le XAML est celui-ci

Code:

<myMenu:MenuImage Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,20,0,0" Visibility="Hidden" />

Et mon menu est celui-ci enfin l'item de mon menu qui doit effectuer l'action

Code:

<MenuItem Header="{DynamicResource MWMenu52}" Name="MenuIconDisplay" IsCheckable="True" Foreground="Black" Command="{Binding CommandDisplayMenuIcon}" />

Pour ce bouton j'ai préparer ce code du Binding "CommandDisplayMenuIcon" dans mon ViewModel en C#
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 public class ViewModelMainWindow : ViewModelBase { /// <summary> /// The variable that is use to open relative new window. /// </summary> private RelayCommand m_CommandDisplayMenuIcon; /// <summary> /// Gets the display menu command. /// </summary> /// <value>The display menu command.</value> public ICommand CommandDisplayMenuIcon { get { if (m_CommandDisplayMenuIcon == null) { m_CommandDisplayMenuIcon = new RelayCommand(param => CanSeeMenuIcon(), param => SeeMenuIcon()); } return m_CommandDisplayMenuIcon; } } /// <summary> /// Determines if application hidde or not menu. /// </summary> /// <returns> /// <c>true</c> if it will hidde; otherwise, <c>false</c> to make visible. /// </returns> private static bool CanSeeMenuText() { return true; } /// <summary> /// Action to make visible or hidden. /// </summary> private static void SeeMenuText() { } }
ViewModelBase et RelayCommand sont des classes pour mon MVVM que j'ai trouver beaucoup de fois sur le net (avec le même code donc je pense que c'est un standard) et qui pour le moment marchent très bien.

Voila voila voila je ne sais pas si mon début de code est correct et si j'ai fourni assez d'infos.

Merci d'avance pour les réponses ;)

28/08/2010, 00h11
obito

salut,

Bienvenue sur le forum.

Si si c'est clair tu souhaite cacher un contrôle suivant si le MenuItem est Checked ? Si tu clique est que c'est coché ca cache le contrôle ?...

Donc plutôt simple, tu Bind en mode TwoWay le IsChecked du MenuItem à une propriété de ton ViewModel.

La propriété Visiblity du contrôle à cacher sera aussi bindé à ce paramètre avec comme Converter, une classe qui pourrait s'appeler BoolToVisiblityConverter. Un exemple ici :

http://www.wpftutorial.net/DataBindingOverview.html
28/08/2010, 16h39
tomlev

Citation:

Envoyé par obito

La propriété Visiblity du contrôle à cacher sera aussi bindé à ce paramètre avec comme Converter, une classe qui pourrait s'appeler BoolToVisiblityConverter.

Ce converter existe déjà dans le framework : BooleanToVisibilityConverter
28/08/2010, 17h10
obito

oui c'est vrai >_< en plus on me l'a déjà dit y a peu, je retiens rien décidément... :)
28/08/2010, 17h17
Monkey56
Citation:

Ce converter existe déjà dans le framework : BooleanToVisibilityConverter

Oui il le dit dans son ticket

Pour ma part j'ai réussit a faire fonctionner ce que je veut as un poil près :p
Cela fonctionne si mes menu ne sont pas des UserControl mais si tel est le cas il ne peut pas trouver l'ElementName.
Hors j'ai besoin que mes 2 menus, le premier en Texte et le second en Image soit des UserControl, car plus simple a réutiliser derrière (j'en aurais besoin pour d'autre projet) et plus simple a modifier aussi (bon je sais que dans une structure MVVM c'est pas très chrétien ce que je veut faire :lol: )

J'ai donc une second question :p oui je sais je suis chiant.

Si j'écris la propriété Visibility comme ceci

Code:

Visibility="{Binding Path=MenuImageDisplay, Converter={StaticResource boolToVis}}"

La proprièté Path=MenuImageDisplay (ou une autre si ce n'est pas ca qu'il faut utiliser) peut-elle attaquer un varibale de mon code C# par exemple
Code:

1 2 public bool MenuImageDisplay
Et si cela est possible ou je peut placer ma variable ??? dans MainWindow.waml.cs (c'est ma fenêtre ou j'utilise les menu) ou bien dans mon ViewModelMainWindow (de la structure MVVM) ???

Juste ce ty détail a régler et solution résolu ;)

Merci encore ;)

J'ai presque trouver solution a mon problème 8O les gens un ptit coup de pouce ;)

mes codes sont les suivants:
[XAML] celui-ci est mon UserControl a afficher ou pas (se trouve dans ma fenêtre)

Code:

<myMenu:MenuImage Visibility="{Binding MenuImageDisplay, Converter={StaticResource boolToVis}}" />

[XAML] celui-ci est mon bouton déclencheur

Code:

<MenuItem Header="{DynamicResource MWMenu52}" Name="MenuImageDisplay" Style="{StaticResource StyleMenuText}" Command="{Binding CommandMenuImageDisplay}" />

[C#] code de l'action pour afficher ou pas (dans mon ViewModel)

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
        /// <summary>
        /// The variable define visibility of the menu.
        /// </summary>
        private RelayCommand m_CommandMenuImageDisplay;
        private bool _MenuImageDisplay = false;
 
        /// <summary>
        /// Gets and set the visibility of menu.
        /// </summary>
        /// <value>The image menu.</value>
        public bool MenuImageDisplay
        {
            get { return _MenuImageDisplay; }
            set
            {
                _MenuImageDisplay = value;
            }
        }
 
        public ICommand CommandMenuImageDisplay
        {
            get
            {
                if (m_CommandMenuImageDisplay == null)
                {
                    m_CommandMenuImageDisplay = new RelayCommand(param => CanDisplay(), param => DisplayMenuImage());
                }
 
                return m_CommandMenuImageDisplay;
            }
        }
 
        /// <summary>
        /// Determines whether application can display the menu.
        /// </summary>
        /// <returns>
        /// 	<c>true</c> if application can display the menu; otherwise, <c>false</c>.
        /// </returns>
        private static bool CanDisplay()
        {
            return true;
        }
 
        /// <summary>
        /// Display the image menu.
        /// </summary>
        private void DisplayMenuImage()
        {
            if (MenuImageDisplay == true)
            {
                MenuImageDisplay = false;
            }
            else
            {
                MenuImageDisplay = true;
            }
        }

Petite indication, quand je fait passer ma valeur _MenuImageDisplay a True, ca affiche bien mon menu après recompilation du code et l'inverse marche aussi.
Autre indication, private void DisplayMenuImage() cette method en static me retourne une erreur pour MenuImageDisplay:

Citation:

Une référence d'objet est requise pour cette propriété, ...

blablabla

GRAND GRAND GRAND Merci a celui qui arrive a m'aider sur ma dernière ligne droite :ccool:

30/08/2010, 19h21
tomlev
Tu as juste oublié d'indiquer ce qui ne marchait pas... heureusement que je suis devin :aie:

Citation:

Envoyé par Monkey56

Petite indication, quand je fait passer ma valeur _MenuImageDisplay a True, ca affiche bien mon menu après recompilation du code et l'inverse marche aussi.

Ta propriété MenuImageDisplay ne déclenche pas de notification, donc le binding ne peut pas savoir que la valeur a changé. Il faut ajouter ça dans le setter :

Code:

OnPropertyChanged("MenuImageDisplay");

Citation:

Envoyé par Monkey56

Autre indication, private void DisplayMenuImage() cette method en static me retourne une erreur pour MenuImageDisplay:
Une référence d'objet est requise pour cette propriété, ... blablabla

Euh... pourquoi voudrais-tu la déclarer en statique ? :koi:
Elle travaille sur une propriété d'instance, elle n'a aucune raison d'être statique. D'ailleurs tu peux la simplifier :

- écrire "if (MenuDisplayImage == true)" est redondant, vu que MenuDisplayImage est déjà un bool. Il suffit d'écrire "if (MenuDisplayImage)"
- et de toutes façon l'opération que tu fais dans cette méthode correspond à un opérateur qui existe déjà : "!" (négation logique)

Donc la méthode DisplayMenuImage peut s'écrire ainsi :
Code:

1 2 3 4 private void DisplayMenuImage() { MenuImageDisplay = !MenuImageDisplay; }
Pour finir, je te conseille de modifier les noms de tes méthodes et propriétés... c'est vraiment pas très clair d'avoir une méthode et une propriété qui ont quasiment le même nom (DisplayMenuImage et MenuImageDisplay)

Ouhhh pinaise tu sait que je t'adore :p

CA MARCHE, maintenant reste plus qu'as cliquer sur Résolu ^^

Encore grand merci a vous :ccool:

Et pour ceux qui veulent un code complet similaire:
[XAML] le convertiseur <BooleanToVisibilityConverter> (très important) importation de mon UserControl (le menu a cacher) dans ma fenêtre (ps je travail dans un Grid d'où <Grid.Resources>):

Code:

1
2
3
4
5
<Grid.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVis" />
</Grid.Resources>
 
<myMenu:MenuImage Visibility="{Binding MenuImageDisplay, Converter={StaticResource boolToVis}}" />

[XAML] L'item d'un UserControl qui va cacher mon menu (ici un MenuItem mais un Button marche aussi ;)):

Code:

<MenuItem Header="{DynamicResource MWMenu52}" Name="MenuImageDisplay" Style="{StaticResource StyleMenuText}" Command="{Binding CommandMenuImageDisplay}" />

[C#] Dans le ViewModel de la fenêtre (je travail en structure MVVM):

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
        /// <summary>
        /// The variable define visibility of the menu.
        /// </summary>
        private RelayCommand m_CommandMenuImageDisplay;
        private bool _MenuImageDisplay = false;
 
        /// <summary>
        /// Gets and set the visibility of menu.
        /// </summary>
        /// <value>The image menu.</value>
        public bool MenuImageDisplay
        {
            get { return _MenuImageDisplay; }
            set
            {
                _MenuImageDisplay = value;
            }
        }
 
        public ICommand CommandMenuImageDisplay
        {
            get
            {
                if (m_CommandMenuImageDisplay == null)
                {
                    m_CommandMenuImageDisplay = new RelayCommand(param => CanDisplay(), param => DisplayMenuImageChange());
                }
 
                return m_CommandMenuImageDisplay;
            }
        }
 
        /// <summary>
        /// Determines whether application can display the menu.
        /// </summary>
        /// <returns>
        /// 	<c>true</c> if application can display the menu; otherwise, <c>false</c>.
        /// </returns>
        private static bool CanDisplay()
        {
            return true;
        }
 
        /// <summary>
        /// Display the image menu.
        /// </summary>
        private void DisplayMenuImageChange()
        {
            MenuImageDisplay = !MenuImageDisplay;
        }