Build a Responsive Kanban Board Application in WPF using C# and MVVM 🚀

Are you looking for a practical WPF project to improve your C#, MVVM, and desktop application development skills? In this series, we will build a Responsive Kanban Board Application from scratch using WPF, C#, and MVVM architecture . This project is inspired by modern task management tools like Trello and helps you understand how real-world desktop applications are designed and developed. Why Build a Kanban Board in WPF? Many developers learn WPF concepts individually: Buttons TextBoxes Data Binding Commands Collections But when building a real application, you need to combine everything together. A Kanban Board project helps you learn: ✅ Real UI design ✅ MVVM architecture ✅ Dynamic data handling ✅ User interaction ✅ Drag & Drop functionality ✅ Command-based programming ✅ Reusable WPF components What You Will Build in This WPF Project We create a responsive Kanban Board where users can manage tasks visually. The application contains: 📌 Multiple ...

Step by step guide to implement the command in wpf

To create the custom command we need to implement ICommand interface which is having two method called CanExecute and Execute and one EventHandler called CanExecuteChanged.

  1. CanExecute method is responsible to tell if commend will execute or not.
  2. Execute method perform the action.
Step to create custom command:
  1. Implement the ICommand
  2. write a constructor which will take two parameters of type Action and Func respectively.
  3. if you want to trigger CanExecute on property change then add the method which should invoke CanExecuteChanged  EventHandler .
Why Action?

Action delegate is used for performing the action. As our actual implementation of  this Action will present in our ViewModel and we need to pass ViewModel method as a constructor parameter so that we can assign it in our CustomCommand and can invoke when require.

Why Func?

Func delegate is used when we want to pass some value and return some value. As our actual implementation of  this Func will present in our ViewModel and we need to pass ViewModel method as a constructor parameter so that we can assign it in our CustomCommand and can invoke when require.

public class CustomCommand : ICommand

    {

        public CustomCommand(Action<object> execute, Func<object, bool> canExecute)

        {

            this.execute = execute;

            this.canExecute = canExecute;

        }

        Action<object> execute;

        Func<object, bool> canExecute;

        public event EventHandler CanExecuteChanged;

        public void FireCanExecuteChanged()

        {

            CanExecuteChanged?.Invoke(this, EventArgs.Empty);

        }


        public bool CanExecute(object parameter)

        {

            return canExecute != null && canExecute(parameter);

        }


        public void Execute(object parameter)

        {

            execute?.Invoke(parameter);

        }

    }


How to use this Command in our ViewModel?

public CustomCommand ClickCommand { get; set; }

inside the ViewModel constructor we can instantiate the ClickCommand.


Lets take one example where we have one Textbox, one TextBlock and one Button control.

Now i want to Enable/Disable the button based on Textbox Property.


 <StackPanel>

        <TextBox Text="{Binding Message,UpdateSourceTrigger=PropertyChanged}"/>

        <Button Content="Click" Command="{Binding ClickCommand}"/>

        <TextBlock Text="{Binding MessageText}"/>

  </StackPanel>


ViewModel

public class MainWindowViewModel : INotifyPropertyChanged

    {

        public MainWindowViewModel()

        {

            ClickCommand = new CustomCommand(Execute,CanExecute);

        }


        private bool CanExecute(object arg)

        {

            return !string.IsNullOrEmpty(Message);

        }


        private void Execute(object obj)

        {

            MessageText = "Your text is : " + Message;

        }


        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChnaged(string propertyName)

        {

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        }

        private string _message;


        public string Message

        {

            get { return _message; }

            set

            {

                _message = value;

                OnPropertyChnaged(nameof(Message));

//we have to call this because if the property will change CanExecute will not execute and our Button

//Enable/Disable will not happen

                ClickCommand.FireCanExecuteChanged();

            }

        }

        private string _messageText;


        public string MessageText

        {

            get { return _messageText; }

            set

            {

                _messageText = value;

                OnPropertyChnaged(nameof(MessageText));

            }

        }

       public CustomCommand ClickCommand { get; set; }

    }


I hope this will help you.

                                                                                                            Happy Coding!!!

Comments

Popular posts from this blog

Filter DataGrid and ListView in wpf using ICollectionView

Pagination of DataGrid in WPF using MVVM

How to Create TabControl using Prism Region