WPF application with MVVM

Good evening everyone, I am looking to develop a simple application to understand MVVM architecture with WPF. I just want to insert a text entered in a text field entered on a listview when pressing the add button.

I create two folders that are Template and ViewModel and here is the source code insert for each file knowing that I use the MVVMLightToolkit extension.

for the template folder:

Article.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace GestionArticle.Model
{
public class Article
{
private string _nom;
public string Nom
{
get { return _nom; }
set { _nom = value; }
}
}
}

and for the ViewModel folder:

IMainViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Windows.Input;
using GestionArticle.Model;
namespace GestionArticle.ViewModel
{
public interface IMainViewModel
{
string Titre { get; set; }
ObservableCollection Articles { get; }
ICommand ChargerArticleCommand { get; }
}
}

MainViewModel.cs

using GalaSoft.MvvmLight;
using System.Collections.ObjectModel;
using GestionArticle.Model;
using GalaSoft.MvvmLight.Command;
using System.Windows.Input;
namespace GestionArticle.ViewModel
{
///
/// This class contains properties that a View can data bind to.
///
/// See http://www.galasoft.ch/mvvm
///
///
public class MainViewModel : ViewModelBase, IMainViewModel
{
///
/// Initializes a new instance of the MainViewModel class.
///
private readonly ObservableCollection article;
public MainViewModel()
{
article = new ObservableCollection();
article.Add(new Article { Nom = "article 1" });
ChargerArticleCommand = new RelayCommand(ChargerArticles);
}
private void ChargerArticles()
{
this.article.Add(new Article { Nom = "Article 2" });
}
private string _titre;
public string Titre
{
get { return _titre; }
set
{
_titre = value;
RaisePropertyChanged("Titre");
}
}
public ObservableCollection Articles
{
get { return this.article; }
}
public ICommand ChargerArticleCommand
{
get;
private set;
}
}
}

ViewModelLocator.cs

/*
In App.xaml:
x:Key="Locator" />
In the View:
DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"
*/
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;
namespace GestionArticle.ViewModel
{
///
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
///
/// See http://www.galasoft.ch/mvvm
///
///
public class ViewModelLocator
{
static ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
SimpleIoc.Default.Register();
}
public static IMainViewModel MainVM
{
get { return ServiceLocator.Current.GetInstance(); }
}
///
/// Gets the Main property.
///
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",
"CA1822:MarkMembersAsStatic",
Justification = "This non-static member is needed for data binding purposes.")]
/* public MainViewModel Main
{
get
{
return ServiceLocator.Current.GetInstance();
}
}*/
public static void CleanMain()
{
SimpleIoc.Default.Unregister();
SimpleIoc.Default.Register();
}
public static void Cleanup()
{
CleanMain();
}
}
}

App.xaml

<Application x:Class="GestionArticle.App"
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:viewModel="clr-namespace:GestionArticle.ViewModel"
StartupUri="MainWindow.xaml"
mc:Ignorable="d">
<Application.Resources>
<viewModel:ViewModelLocator x:Key="Locator"
d:IsDataSource="True" />
Application.Resources>
Application>

MainWindow.xaml

<Window x:Class="GestionArticle.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:ignore="http://www.ignore.com"
mc:Ignorable="d ignore"
Height="410"
Width="613"
Title="MVVM Light Application"
DataContext="{Binding MainVM, Source={StaticResource Locator}}">

ok this is exactly my problem. i create a simple project wich make a simple ListBox filled with a string.

<ListBox ItemsSource="{Binding Persons}" DisplayMemberPath="FirstName" Margin="10,10,374,25" />

then i write a class person

public class Person
{
public string LastName
{
get;
set;
}
public string FirstName
{
get;
set;
}
}

and then write a class ViewModel

public class ViewModel
{
private ObservableCollection m_Persons;
public ObservableCollection Persons
{
get
{
return m_Persons;
}
}
public ViewModel()
{
var albert = new Person() { FirstName = "Albert", LastName = "Einstein" };
var bruno = new Person() { FirstName = "Bruno", LastName = "Latour" };
var charles = new Person() { FirstName = "Charles", LastName = "Darwin" };
m_Persons = new ObservableCollection() { albert, bruno, charles };
}
}

and after running the application it show me this:

until now it works very well.

but when i take this same code and use that with an MVVMlightToolkit Project:

it show me this result:

my question is why in a simple wpf app it show me the listbox filled correctly and when i use the MVVMToolkit didn't show a correct filled listbox?

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

abdelwaheb ammar8y ago
ok this is exactly my problem. i create a simple project wich make a simple ListBox filled with a string.
<ListBox ItemsSource="{Binding Persons}" DisplayMemberPath="FirstName" Margin="10,10,374,25" />
then i write a class person
public class Person
   {
       public string LastName
       {
           get;
           set;
       }
       public string FirstName
       {
           get;
           set;
       }

   }
and then write a class ViewModel
public class ViewModel
    {
        private ObservableCollection m_Persons;
        public ObservableCollection Persons
        {
            get
            {
                return m_Persons;
            }
        }
        public ViewModel()
        {
            var albert = new Person() { FirstName = "Albert", LastName = "Einstein" };
            var bruno = new Person() { FirstName = "Bruno", LastName = "Latour" };
            var charles = new Person() { FirstName = "Charles", LastName = "Darwin" };
            m_Persons = new ObservableCollection() { albert, bruno, charles };
        }
    }
and after running the application it show me this:
until now it works very well.
but when i take this same code and use that with an MVVMlightToolkit Project:

it show me this result:

my question is why in a simple wpf app it show me the listbox filled correctly and when i use the MVVMToolkit didn't show a correct filled listbox?
+1
Nilesh Shah8y ago
You did not mention in your question what exactly is the problem you are facing.

You should have only posted whole source code as zip file - which you did but should not have posted all code in question, instead should have written few lines on your issue/problem
+1