Bonjour,

J'apprends à créer des menus "hamburgers" et afficher des UserControls selon les actions faites sur le menu.

Le projet est en WPF .net5, et l'architecture MVVM est (tant bien que mal) suivie.
Il se compose des dossiers et classes suivantes :
Nom : Arborescence.PNG Affichages : 107 Taille : 10,3 Ko

L'application lancée ressemble à ceci :
Nom : App_1.PNG Affichages : 94 Taille : 10,5 Ko
Menu fermé
Nom : App_2.PNG Affichages : 94 Taille : 12,5 Ko
Menu ouvert
Lorsque l'on sélectionne une action (Home, Graphic, Setting), je n'arrive pas à faire afficher son UserControl dans la MainWindowView dont voici son code ainsi que sa Vue-modèle associée :

Code XAML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
<Grid Background="{StaticResource PrimaryBackgroundColor}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
 
        <ContentControl Grid.Column="0" Content="{Binding Menu}"/>
        <ContentControl Grid.Column="1" Content="{Binding SelectedViewModel}"/>
    </Grid>

Code : 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
28
29
30
31
32
33
34
35
36
#region Constructor
        public MainWindowViewModel()
        {
            Menu = new MenuViewModel();
        }
        #endregion Constructor
 
        #region Properties
        private object _menu;
        public object Menu
        {
            get
            {
                return _menu;
            }
            set
            {
                _menu = value;
                OnPropertyChanged(nameof(Menu));
            }
        }
 
        private object _selectedViewModel;
        public object SelectedViewModel
        {
            get
            {
                return _selectedViewModel;
            }
            set
            {
                _selectedViewModel = value;
                OnPropertyChanged(nameof(SelectedViewModel));
            }
        }
        #endregion Properties
Les actions sont faites à travers le "MenuView" qui est un UserControl se trouvant SUR la colonne "0" du MainWindow.

Voici le code MenuViewModel qui gère le choix du UserControl à afficher :
Code : 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#region Variable
        MainWindowViewModel mainWindowObj;
        #endregion Variable
 
        #region Constructor
        public MenuViewModel()
        {
            menuCommand = new RelayCommand(load_menuChoiced);
        }
        #endregion Constructor
 
        #region Properties
        public ICommand menuCommand { get; set; }
        #endregion Properties
 
        #region Public Methods
        #endregion Public Method
 
        #region Private Method
        public void load_menuChoiced(object obj)
        {
            switch (obj)
            {
                case "Home":
                    mainWindowObj = new MainWindowViewModel()
                    {
                        SelectedViewModel = new HomeViewModel()
                    };
                    break;
 
                case "Graphic":
 
                    break;
 
                case "Setting":
 
                    break;
 
                default:
                    break;
            }
        }
        #endregion Private Method
Sauriez-vous m'aider comment gérer l'affichage des UserControl "HomeView", "GraphicView" ... ?

D'avance Merci





PS : Je vous partage le code du "MenuView" à titre indicatif pour ceux qui souhaiterait savoir comment les animations sont réalisées :
Code XAML : 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
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<Grid x:Name="gridMenu" Background="{StaticResource SecundaryBackgroundColor}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
 
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="45"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <!--<Label Grid.Column="0" Grid.Row="0"
                   HorizontalAlignment="Left"
                   HorizontalContentAlignment="Center"
                   VerticalContentAlignment="Center"
                   Height="50" Width="12" Margin="19,5,5,5" 
                   Content="" FontFamily="Segoe MDL2 Assets"/>-->
            <ToggleButton x:Name="tgglBtnMenu"
                          Style="{StaticResource ToggleButtonMenuStyle}"
                          Grid.Column="0" Grid.Row="0"
                          HorizontalAlignment="Right"
                          VerticalAlignment="Top"
                          Height="50" Width="50" Margin="5"                       
                          IsChecked="False">
                <ToggleButton.Triggers>
                    <EventTrigger RoutedEvent="ToggleButton.Checked">
                        <BeginStoryboard>
                            <Storyboard x:Name="ShowMenu">
                                <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="60" To="200" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="stackPanelRadioBtn" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="60" To="200" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="stackPanelRadioBtnSetting" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="60" To="200" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="gridAvatar" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="60" To="200" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                        <BeginStoryboard>
                            <Storyboard x:Name="HideMenu">
                                <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="200" To="60" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="stackPanelRadioBtn" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="200" To="60" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="stackPanelRadioBtnSetting" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="200" To="60" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="gridAvatar" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="200" To="60" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ToggleButton.Triggers>
            </ToggleButton>
 
            <StackPanel x:Name="stackPanelRadioBtn" Grid.Row="1" Width="60">
                <RadioButton Style="{StaticResource RadioButtonMenuStyle}" GroupName="choice" Content="Home" Tag="" Visibility="Visible" Command="{Binding menuCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"/>
                <RadioButton Style="{StaticResource RadioButtonMenuStyle}" GroupName="choice" Content="Graphic" Tag="" Visibility="Visible" Command="{Binding menuCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"/>
            </StackPanel>
 
            <StackPanel x:Name="stackPanelRadioBtnSetting" Grid.Row="2" Width="60">
                <RadioButton Style="{StaticResource RadioButtonMenuStyle}" GroupName="choice" Content="Setting" Tag="" Visibility="Visible" Command="{Binding menuCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}"/>
            </StackPanel>
 
            <Grid x:Name="gridAvatar" Grid.Row="3" Width="60">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
 
                <Ellipse Grid.Column="0" Height="45" Width="45">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="{StaticResource ResourceKey=avatar}"/>
                    </Ellipse.Fill>
                </Ellipse>
 
                <StackPanel Grid.Column="1" Orientation="Horizontal">
                    <TextBlock Style="{StaticResource TextBlockAvatarMenuStyle}" Text="NAME" FontWeight="Bold" FontSize="16"/>
                    <TextBlock Style="{StaticResource TextBlockAvatarMenuStyle}" Text=" "/>
                    <TextBlock Style="{StaticResource TextBlockAvatarMenuStyle}" Text="Firstname" FontSize="14"/>
                </StackPanel>
            </Grid>
 
        </Grid>
    </Grid>