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