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

How to Create TabControl using Prism Region


MainWindow

<metro:MetroWindow x:Class="PrismDemo.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:PrismDemo.Views"
        mc:Ignorable="d" xmlns:prism="http://prismlibrary.com/"
        Title="MetroPrismDemo"
        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls">

    <Grid>
        <TabControl Margin="5" prism:RegionManager.RegionName="TabRegion"
                  VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="0">
        </TabControl>
    </Grid>
</metro:MetroWindow>

TabControlAdapter  [Custom Adapter ]

 class TabControlAdapter : RegionAdapterBase<TabControl>
    {
        public TabControlAdapter(IRegionBehaviorFactory regionBehaviorFactory) : base(regionBehaviorFactory)
        {
        }

        protected override void Adapt(IRegion region, TabControl regionTarget)
        {
            region.Views.CollectionChanged += (s, e) =>
            {
                if (e.Action == NotifyCollectionChangedAction.Add)
                    foreach (UserControl item in e.NewItems)
                    {
                        regionTarget.Items.Add(new TabItem { Header = item.Name, Content = item });
                    }
                else if (e.Action == NotifyCollectionChangedAction.Remove)
                    foreach (UserControl item in e.OldItems)
                    {
                        var tabTodelete = regionTarget.Items.OfType<TabItem>().FirstOrDefault(n => n.Content == item);
                        regionTarget.Items.Remove(tabTodelete);
                    }

            };
        }


        protected override IRegion CreateRegion()
        {
            return new SingleActiveRegion();
        }
    }

MainModule 

 public class MainModule : IModule
    {
        public void RegisterTypes(IContainerRegistry containerRegistry)
        {
         
        }

        public void OnInitialized(IContainerProvider containerProvider)
        {
            var regionManager = containerProvider.Resolve<IRegionManager>();
            regionManager.RegisterViewWithRegion("TabRegion", typeof(Info));
            regionManager.RegisterViewWithRegion("TabRegion", typeof(Warning));
            regionManager.RegisterViewWithRegion("TabRegion", typeof(Error));
        }
    }
App.xaml.cs

 public partial class App
    {
     
        protected override Window CreateShell()
        {
            var shell = Container.Resolve<MainWindow>();
            return shell;
        }
        protected override void ConfigureRegionAdapterMappings(RegionAdapterMappings regionAdapterMappings)
        {
            base.ConfigureRegionAdapterMappings(regionAdapterMappings);
            regionAdapterMappings.RegisterMapping(typeof(TabControl), Container.Resolve<TabControlAdapter>());
        }
        protected override IModuleCatalog CreateModuleCatalog()
        {
            var module = base.CreateModuleCatalog();
            module.AddModule<MainModule>();
            return module;
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
         
        }
    }

Comments

  1. hi,
    great solution. if i understood you, the 3 tabs are added on initialization.
    Is there a way to add them dynamically?

    ReplyDelete
    Replies
    1. Thanks
      Yes there is way to add tabitem dynamically

      Delete
    2. how can i add them dynamically?

      Delete
    3. you can follow this video https://youtu.be/JvJweEdjZ5g?si=HGmcw71562Z8BivA

      Delete

Post a Comment

Popular posts from this blog

Filter DataGrid and ListView in wpf using ICollectionView

Pagination of DataGrid in WPF using MVVM