Search This Blog

Tuesday, September 15, 2015

WPF MVVM Basic quick start tutorial in C#

WPF >MVVM Basic quick start tutorial C#

In MVVM (Model-View-ViewModel) 

  • model knows nothing
  • view model knows only about model
  • view knows only about view model

Project structure


Project.cs

using System.ComponentModel;
namespace MVVM
{
    public class Project : INotifyPropertyChanged
    {
        private string projectCode;
        private string projectDescription;

        public string ProjectCode
        {
            get
            {
                return projectCode;
            }
            set
            {
                projectCode = value;
                OnPropertyChanged("ProjectCode");
            }
        }

        public string ProjectDescription
        {
            get
            {
                return projectDescription;
            }
            set
            {
                projectDescription = value;
                OnPropertyChanged("ProjectDescription");
            }
        }

        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
}

Projects.xaml

<Window x:Name="ProjectsWindow" x:Class="MVVM.View.Projects"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Projects" Height="300" Width="300" Loaded="ProjectsWindow_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Button Content="Save" Grid.Row="0"  HorizontalAlignment="Left" Name="btnUpdate"
                VerticalAlignment="Top"
                Command="{Binding Path=SaveCommand}"  />
        <ListView Name="ProjectList" Grid.Row="1"  ItemsSource="{Binding Projects}"  >
            <ListView.View>
                <GridView x:Name="grdProject">
                    <GridViewColumn Header="Code" DisplayMemberBinding="{Binding ProjectCode}" Width="Auto" />
                    <GridViewColumn Header="Description" DisplayMemberBinding="{Binding ProjectDescription}" Width="Auto" />
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

Projects.xaml.cs

using System.Windows;
namespace MVVM.View
{
    /// <summary>
    /// Interaction logic for Projects.xaml
    /// </summary>
    public partial class Projects : Window
    {
        public Projects()
        {
            InitializeComponent();
        }

        private void ProjectsWindow_Loaded(object sender, RoutedEventArgs e)
        {
            ProjectViewModel projectViewModel = new ProjectViewModel();
            DataContext = projectViewModel;
        }
    }
}

ProjectViewModel.cs

using System;
using System.Collections.Generic;
using System.Windows.Input;
namespace MVVM
{
    public class ProjectViewModel
    {
        RelayCommand saveCommand;
        private IList<Project> projectList;
        public ProjectViewModel()
        {
            projectList = new List<Project>
            {
                new Project{ProjectCode="P1", ProjectDescription="Project1"},
                new Project{ProjectCode="P2", ProjectDescription="Project2"}
            };
         
        }
        public IList<Project> Projects
        {
            get { return projectList; }
            set { projectList = value; }
        }

        public ICommand SaveCommand
        {
            get
            {
                if (saveCommand == null)
                {
                    saveCommand = new RelayCommand(
                        param => this.Save(),
                        param => this.CanSave
                        );
                }
                return saveCommand;
            }
        }

        public void Save()
        {
           // implement your Save function
        }

        bool CanSave
        {
            get { return true; }
        }

    }
}

RelayCommand.cs

using System;
using System.Diagnostics;
using System.Windows.Input;

namespace MVVM
{
    /// <summary>
    /// A command whose sole purpose is to
    /// relay its functionality to other
    /// objects by invoking delegates. The
    /// default return value for the CanExecute
    /// method is 'true'.
    /// </summary>
    public class RelayCommand : ICommand
    {
        #region Fields

        readonly Action<object> _execute;
        readonly Predicate<object> _canExecute;       

        #endregion // Fields

        #region Constructors

        /// <summary>
        /// Creates a new command that can always execute.
        /// </summary>
        /// <param name="execute">The execution logic.</param>
        public RelayCommand(Action<object> execute)
            : this(execute, null)
        {
        }

        /// <summary>
        /// Creates a new command.
        /// </summary>
        /// <param name="execute">The execution logic.</param>
        /// <param name="canExecute">The execution status logic.</param>
        public RelayCommand(Action<object> execute, Predicate<object> canExecute)
        {
            if (execute == null)
                throw new ArgumentNullException("execute");

            _execute = execute;
            _canExecute = canExecute;          
        }

        #endregion // Constructors

        #region ICommand Members

        [DebuggerStepThrough]
        public bool CanExecute(object parameter)
        {
            return _canExecute == null ? true : _canExecute(parameter);
        }

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public void Execute(object parameter)
        {
            _execute(parameter);
        }

        #endregion // ICommand Members
    }
}

App.xaml

<Application x:Class="MVVM.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="View/Projects.xaml">
    <Application.Resources>
        
    </Application.Resources>
</Application>

Run the application