[MVVM WPF] Application Liste de course

Version imprimable

4 pièce(s) jointe(s)

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:

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:

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:

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 :
Pièce jointe 543903

MainWindow_ListeDeCourse
Pièce jointe 543905

NavigationBar_ListeDeCourse
Pièce jointe 543906

App_ListeDeCourse
Pièce jointe 543910

bonjour
Oui c'est possible .
Comme l'illustre l'exemple code ci-apres:
1/ code ViewModel + command(dossier 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
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:

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:

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:

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...

08/03/2020, 13h44
zeratec

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).