3 pièce(s) jointe(s)
Menu Hamburger / gestions UserControl
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 :
L'application lancée ressemble à ceci :
Pièce jointe 603674
Pièce jointe 603675
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:
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:
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:
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 :D
PS : Je vous partage le code du "MenuView" à titre indicatif pour ceux qui souhaiterait savoir comment les animations sont réalisées :
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
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> |
