[MVVM WPF] Application Liste de course

**zeratec** · 07/03/2020, 18h05

Bonjour à tous,

Je développe, afin de mettre en pratique les formations suivies sur la programmation WPF en MVVM, un programme basique de gestion de liste de course.

Le principe est très simple.

L'utilisateur, lorsqu'il lance l'application, arrive sur une page "Home" (plus tard seront affiché des données).
A partir de cette page, l'utilisateur peut :
- Afficher la liste de course en cours grâce à l'appui sur un bouton "List"
- Ajouter un item sur la liste de course grâce à l'appui sur un bouton "New item"
- Retourner sur la "Home Page" grâce à l'appui sur un bouton "Home"

L'application se compose de la page "MainWindow" sur laquelle est bindée un UserControl appelé "NavigationBar".
La NavigationBar est appelé lors de l'initialisation de l'application.
Sur cette "NavigationBar" se trouve les 3 boutons "Home", "List", "New item"

Ma question est la suivante; en interagissant avec les boutons de la "NavigationBar" (se situant sur un UserControl), est-il possible d'afficher un nouveau "UserControl" (HomeView par exemple) sur la "MainWindow" ?

Je joins des images pour améliorer la compréhension ainsi que les codes XAML et C# des classes intéressantes au problème.

Je vous remercie d'avance,

Code MainWindow (XAML + Code-behind)

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
<Window x:Class="ListeDeCourse.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListeDeCourse"
        xmlns:viewmodels="clr-namespace:ListeDeCourse.ViewModels"
        xmlns:views="clr-namespace:ListeDeCourse.Views"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen">
 
    <Window.Resources>
        <DataTemplate x:Name="navBarDataTemplate" DataType="{x:Type viewmodels:NavigationBarViewModel}">
            <views:NavigationBar DataContext="{Binding}"/>
        </DataTemplate>
    </Window.Resources>
 
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
 
        <ContentControl Grid.Row="0" Grid.Column="0" Content="{Binding}"/>
    </Grid>
</Window>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
namespace ListeDeCourse.Views
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new NavigationBarViewModel();
        }
    }
}

Code NavigationBarView (XAML)

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
<UserControl x:Class="ListeDeCourse.Views.NavigationBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ListeDeCourse.Views"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="800">
    <Grid Height="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <Button Content="Home" Grid.Column="0"/>
        <Button Content="List" Grid.Column="1"/>   
 
        <Button Content="New Item" Grid.Column="5"/>
    </Grid>
</UserControl>

Arborescence :
Nom : Arborescence_ListeDeCourse.PNG
Affichages : 238
Taille : 11,1 Ko

MainWindow_ListeDeCourse
Nom : MainWindow_ListeDeCourse.PNG
Affichages : 224
Taille : 8,8 Ko

NavigationBar_ListeDeCourse
Nom : NavigationBar_ListeDeCourse.PNG
Affichages : 240
Taille : 13,9 Ko

App_ListeDeCourse
Nom : App_ListeDeCourse.PNG
Affichages : 263
Taille : 9,5 Ko

**MABROUKI** · 07/03/2020, 23h30

bonjour
Oui c'est possible .
Comme l'illustre l'exemple code ci-apres:
1/ code ViewModel + command(dossier viewmodel):

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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
namespace WpfNavBar.ViewModel
{
    class BaseVM:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
 
        }
    }
 
 
    class HomeViewModel:BaseVM 
    {
    }
 
    class EmployeViewModel:BaseVM 
    {
    }
 
 
    class DepartmentViewModel : BaseVM
    {
    }
class NavigationViewModel:BaseVM 
    { 
        public ICommand HomeCommand { get; set; }
        public ICommand EmpCommand { get; set; }
        public ICommand DepCommand { get; set; }
 
        private object selectedViewModel;
        public object SelectedViewModel
        {
            get { return selectedViewModel; }
            set 
            {
                selectedViewModel = value; 
                OnPropertyChanged("SelectedViewModel");
            }
        }
 
 
 
        public NavigationViewModel()
 
        {
            selectedViewModel =new  HomeViewModel();
            HomeCommand = new BaseCommand(OpenHome);
            EmpCommand = new BaseCommand(OpenEmp);
            DepCommand = new BaseCommand(OpenDep);
 
        }
        private void OpenHome(object obj)
        {
           SelectedViewModel = new HomeViewModel();
 
        }
        private void OpenEmp(object obj)
        {
           SelectedViewModel = new EmployeViewModel();
 
        }
 
        private void OpenDep(object obj)
        {
            SelectedViewModel = new DepartmentViewModel();
 
        }
 
    }
    //  class command .
 
 class BaseCommand : ICommand
    {
        private Predicate<object> _canExecute;
        private Action<object> _method;
        public event EventHandler CanExecuteChanged;
 
        public BaseCommand(Action<object> method)
            : this(method, null)
        {
            _method = method;
        }
 
        public BaseCommand(Action<object> method, Predicate<object> canExecute)
        {
            _method = method;
            _canExecute = canExecute;
        }
 
        public bool CanExecute(object parameter)
        {
            if (_canExecute == null)
            {
                return true;
            }
 
            return _canExecute(parameter);
        }
 
        public void Execute(object parameter)
        {
            _method.Invoke(parameter);
        }
    }
}

2/ code views (idem)

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
<UserControl x:Class="WpfNavBar.Views.HomeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock FontSize="24" Foreground="Red" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   Margin="10"
                   Text="Home"></TextBlock>
    </Grid>
</UserControl>
 
<UserControl x:Class="WpfNavBar.Views.EmployeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock Text="Employe"></TextBlock>
    </Grid>
</UserControl>
 
<UserControl x:Class="WpfNavBar.Views.DepartmentView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock Text="Departement"></TextBlock>
    </Grid>
</UserControl>
 
------------------le fameux NavigationBar -------------
<UserControl x:Class="WpfNavBar.Views.NavigationBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
 
            >
    <DockPanel LastChildFill="True">
        <StackPanel>
            <Button Content="Home"  Command="{Binding HomeCommand}"/>
            <Button Content="Employe"  Command="{Binding EmpCommand}"/>
            <Button Content="Departement" Command="{Binding DepCommand}"/>
 
            <Button Content="New Item" />
        </StackPanel>
        <Border  BorderBrush="Blue" BorderThickness="3">
            <ContentControl Background="Magenta"  Content="{Binding SelectedViewModel}"/>
 
        </Border>
    </DockPanel>
</UserControl>

3/ code xaml du Main Form:

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
<Window x:Class="WpfNavBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfNavBar"
        xmlns:views="clr-namespace:WpfNavBar.Views"
        xmlns:vm="clr-namespace:WpfNavBar.ViewModel"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Name="HomeTemplate" DataType="{x:Type vm:HomeViewModel}">
            <views:HomeView DataContext="{Binding}"/>
        </DataTemplate>
        <DataTemplate x:Name="EmpTemplate" DataType="{x:Type vm:EmployeViewModel}">
            <views:EmployeView DataContext="{Binding}"/>
        </DataTemplate>
        <DataTemplate x:Name="DepTemplate" DataType="{x:Type vm:DepartmentViewModel}">
            <views:DepartmentView DataContext="{Binding}"/>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <views:NavigationBar/>
 
    </Grid>
</Window>

& son simplistic code behind .cs

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
using WpfNavBar.ViewModel;
namespace WpfNavBar
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new NavigationViewModel();
        }
    }
}

bon code...

**zeratec** · 08/03/2020, 13h44

Bonjour,

Merci pour tes aides.
J'ai bien réussi à faire ce dont je pensais avec les infos que tu m'as donné.

Si j'ai bien compris ton raisonnement, l'emplacement des userControls à afficher est dans le UserControl de la NavBar (c'est comme ça que j'ai procéder).

[MVVM WPF] Application Liste de course

C#

Discussions similaires

Partager

Partager