Creating a WPF Application using Prism Library and MVVM Architectural Pattern (2024)

  • Rikam Palkar
  • Dec 12, 2019
  • 238.4k
  • 0
  • 4

My_First_WPF_App.zip

Introduction

This blog explains how to develop a WPF application using a Prism library and MVVM architectural pattern. No matter how big or complex your app is, this base foundation stays the same for all types of projects. That's why it's very crucial to understand its behavior. We will learn how to make use of UnityContainer and how to achieve modularity in WPF applications using Prism.

Why Prism? Prism is a framework for building loosely coupled, maintainable, and testable XAML applications in WPF.

Note: There is a project download attached for your reference. The source code is free to use and developed only for learning purposes.

Steps

  1. Start Visual Studio, Click on create WPF APP (.Net Framework) : give a name to your app as you desire. As this is a demo project, I have chosen My_First_WPF_App (Refer to the below image.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (3)

  2. Right-click on your project (not the solution) and add a new window into your My_First_WPF_App project. Name your window Shell.xaml. Shell is your Master layout: It's going to load regions for your WPF App. You can delete MainWindow.xaml or can rename as Shell.xaml
    (Refer to the below image.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (4)

  3. Let's begin with Prism's installation: Add Prism.Unity using the Nuget package manager into your shell project. Right-click on the project and click on the Nuget Package manager (Refer to the below image). Then hit install. This will install Prism libraries into your project.

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (5)

  4. After the successful installation of Prism.unity. Expand your project's references to check if prism libraries are added or not.
    (Refer below image.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (6)

  5. Now that we have an entrypoint - Shell.Xaml, from where we're going to start loading our modules, we need a class to load the shell. For that, we're going to add the class into My_First_WPF_App Project and name it BootStrapper.
  6. Note : Make the BootStrapper class Public and inherit from UnityBootStapper Class,
    UnityBootStapper class coming from namespace: using Prism.Unity;
  • Override Run() method,
  • Override CreateShell() method,
  • Override InitializeShell() method,
  • Override ConfigureModuleCatalog() method
  • (Refer below code snippet.)
    1. usingSystem;
    2. usingSystem.Windows;
    3. usingPrism.Unity;
    5. namespaceMy_First_WPF_App
    6. {
    7. ///<summary>
    8. ///BootStrapperisresponsibleforloadingprismandinitializingShell.
    9. ///</summary>
    10. [Obsolete]
    11. publicclassBootStrapper:UnityBootstrapper
    12. {
    13. #regionOverriddenMethods
    14. ///<summary>
    15. ///Entrypointtotheapplication
    16. ///</summary>
    17. ///<paramname="runWithDefaultConfiguration"></param>
    18. publicoverridevoidRun(boolrunWithDefaultConfiguration)
    19. {
    20. base.Run(runWithDefaultConfiguration);
    21. }
    23. ///<summary>
    24. ///Initializesshell.xaml
    25. ///</summary>
    26. ///<returns></returns>
    27. protectedoverrideDependencyObjectCreateShell()
    28. {
    29. returnContainer.TryResolve<Shell>();
    30. }
    32. ///<summary>
    33. ///loadstheShell.xaml
    34. ///</summary>
    35. protectedoverridevoidInitializeShell()
    36. {
    37. App.Current.MainWindow=(Window)Shell;
    38. App.Current.MainWindow.Show();
    39. }
    41. ///<summary>
    42. ///Addview(module)fromotherassembliesandbeginswithmodularity
    43. ///</summary>
    44. protectedoverridevoidConfigureModuleCatalog()
    45. {
    46. base.ConfigureModuleCatalog();
    47. }
    48. #endregion
    49. }
    50. }
  • Build your project once to make sure there are no errors so far.
  • Open App.xaml and delete, StartupUri="MainWindow.xaml" - As your project's default startup window is MainWindow but we've deleted or renamed it. Now we want our app's entry point to be Shell.xaml
    Open the code-behind of App.xaml which is App.xaml.cs and create an object of BootStrapper.
    (Refer bold part of below code snippet.)
    1. usingSystem.Windows;
    3. namespaceMy_First_WPF_App
    4. {
    5. ///<summary>
    6. ///InteractionlogicforApp.xaml
    7. ///</summary>
    8. publicpartialclassApp:Application
    9. {
    10. protectedoverridevoidOnStartup(StartupEventArgse)
    11. {
    12. base.OnStartup(e);
    13. BootStrapperbootStrapper=newBootStrapper();
    14. bootStrapper.Run();
    15. }
    16. }
    17. }
    Run your project and see the magic. Your project will load into the Shell window, now that we've got Shell as entry point.
  • Now that we have all the control towards Shell.xaml, it's time to add some Modularity to your project.
    1. Go to Shell.xaml
    2. First add the Prism Namespace : xmlns:prism="http://prismlibrary.com/"
    3. Create ItemsControl inside your grid : <ItemsControl prism:RegionManager.RegionName="Shell"/>

      (Refer bold part of below code snippet.)

      1. <Windowx:Class="My_First_WPF_App.Shell"
      2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      6. mc:Ignorable="d"
      7. xmlns:prism="http://prismlibrary.com/"
      8. Title="Shell"Height="450"Width="800">
      9. <Grid>
      10. <ItemsControlprism:RegionManager.RegionName="Shell"/>
      11. </Grid>
      12. </Window>
  • Now that we've set our main project, it's time to add some modules. As there are 3 basic modules of 3 -Tier Architecture. This is a demo project so we will create only one Presentation module which is Class Library (DLL). Right-click on Solution and add DLL to your Solution file. Name your DLL Presentation.
    (Refer below image.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (7)

  • Let's create View and ViewModels folders in this DLL. (It's the same way, right-click on presentation, Add new folder from submenu, rename as View. Follow same for ViewModel)
    • Add our first UserControl.xaml into View folder and name it WelcomePageView.Xaml(WPF).
    • In the same way, let's add C# class file into ViewModel folder and name it WelcomePageViewModel.cs
  • Add Prism into your newly created Presentation.dll, follow step 3.
  • Open WelcomePageView : Add namespaces, and set AutoWireViewModel to true inside UserControl tag
    (Refer bold part of below code snippet.)
    1. <UserControlx:Class="Presentation.View.WelcomePageView"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6. xmlns:prism="http://prismlibrary.com/"
    7. prism:ViewModelLocator.AutoWireViewModel="True"
    8. mc:Ignorable="d"
    9. d:DesignHeight="450"d:DesignWidth="800">
  • Now we need the Module Locator, so add a C# class and name it as ModuleLocators.cs inside Presentation.dll Project
    1. Inherit class from Imodule interface from using Prism.Modularity;
    2. Implement Interface
    3. Create Instance of IRegionManager
    4. Create Parameterized Constructor and assign to instance
    5. Override OnInitialized method , can leave the RegisterTypes empty for now.
      (Refer below code snippet.)
      1. usingPrism.Ioc;
      2. usingPrism.Modularity;
      3. usingPrism.Regions;
      5. namespacePresentation
      6. {
      7. ///<summary>
      8. ///Responsibleformappingmodules
      9. ///</summary>
      10. publicclassModuleLocators:IModule
      11. {
      12. #regionprivateproperties
      13. ///<summary>
      14. ///InstanceofIRegionManager
      15. ///</summary>
      16. privateIRegionManager_regionManager;
      18. #endregion
      20. #regionConstructor
      21. ///<summary>
      22. ///parameterizedconstructorinitializesIRegionManager
      23. ///</summary>
      24. ///<paramname="regionManager"></param>
      25. publicModuleLocators(IRegionManagerregionManager)
      26. {
      27. _regionManager=regionManager;
      28. }
      29. #endregion
      31. #regionInterfacemethods
      32. ///<summary>
      33. ///InitializesWelcomepageofyourapplication.
      34. ///</summary>
      35. ///<paramname="containerProvider"></param>
      36. publicvoidOnInitialized(IContainerProvidercontainerProvider)
      37. {
      38. _regionManager.RegisterViewWithRegion("Shell",typeof(ModuleLocators));//ModuleLocatorsisaddedfortestingpurpose,
      39. //laterwe'llreplaceitwithWelcomePageView
      40. }
      42. ///<summary>
      43. ///RegisterTypesusedtoregistermodules
      44. ///</summary>
      45. ///<paramname="containerRegistry"></param>
      46. publicvoidRegisterTypes(IContainerRegistrycontainerRegistry)
      47. {
      48. }
      49. #endregion
      50. }
      51. }
  • Let's add the presentation module's reference into (My_First_WPF_App) project. Right click on references of My_First_WPF_App and click on add references, then go to projects and select Presentation. Hit OK.
    (Refer to the image below.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (8)

  • Now its time to tell BootStrapper which module it should look for. Open BootStapper.cs, Inside ConfigureModuleCatalog.
    (Refer to the bold part of the below code snippet.)
    1. usingSystem;
    2. usingSystem.Windows;
    3. usingPrism.Unity;
    5. namespaceMy_First_WPF_App
    6. {
    7. ///<summary>
    8. ///BootStrapperisresponsibleforloadingprismandinitializingShell.
    9. ///</summary>
    10. [Obsolete]
    11. publicclassBootStrapper:UnityBootstrapper
    12. {
    13. #regionOverriddenMethods
    14. ///<summary>
    15. ///Entrypointtotheapplication
    16. ///</summary>
    17. ///<paramname="runWithDefaultConfiguration"></param>
    18. publicoverridevoidRun(boolrunWithDefaultConfiguration)
    19. {
    20. base.Run(runWithDefaultConfiguration);
    21. }
    23. ///<summary>
    24. ///Initializesshell.xaml
    25. ///</summary>
    26. ///<returns></returns>
    27. protectedoverrideDependencyObjectCreateShell()
    28. {
    29. returnContainer.TryResolve<Shell>();
    30. }
    32. ///<summary>
    33. ///loadstheShell.xaml
    34. ///</summary>
    35. protectedoverridevoidInitializeShell()
    36. {
    37. App.Current.MainWindow=(Window)Shell;
    38. App.Current.MainWindow.Show();
    39. }
    41. ///<summary>
    42. ///Addview(module)fromotherassembliesandbeginswithmodularity
    43. ///</summary>
    44. protectedoverridevoidConfigureModuleCatalog()
    45. {
    46. base.ConfigureModuleCatalog();
    47. TypeModuleLocatorType=typeof(Presentation.ModuleLocators);
    48. ModuleCatalog.AddModule(newPrism.Modularity.ModuleInfo
    49. {
    50. ModuleName=ModuleLocatorType.Name,
    51. ModuleType=ModuleLocatorType.AssemblyQualifiedName
    52. });
    53. }
    54. #endregion
    55. }
    56. }
  • Now go to your ModuleLocators class of Presentation module. On the inside method, OnInitialized(), change type from NewlyCreatedView to WelcomePageView.
    (Refer to the bold part of the below code snippet.)
    1. usingPrism.Ioc;
    2. usingPrism.Modularity;
    3. usingPrism.Regions;
    5. namespacePresentation
    6. {
    7. ///<summary>
    8. ///Responsibleformappingmodules
    9. ///</summary>
    10. publicclassModuleLocators:IModule
    11. {
    12. #regionproperties
    13. ///<summary>
    14. ///InstanceofIRegionManager
    15. ///</summary>
    16. privateIRegionManager_regionManager;
    18. #endregion
    20. #regionConstructor
    21. ///<summary>
    22. ///parameterizedconstructorinitializesIRegionManager
    23. ///</summary>
    24. ///<paramname="regionManager"></param>
    25. publicModuleLocators(IRegionManagerregionManager)
    26. {
    27. _regionManager=regionManager;
    28. }
    29. #endregion
    31. #regionInterfacemethods
    32. ///<summary>
    33. ///InitializesWelcomepageofyourapplication.
    34. ///</summary>
    35. ///<paramname="containerProvider"></param>
    36. publicvoidOnInitialized(IContainerProvidercontainerProvider)
    37. {
    38. _regionManager.RegisterViewWithRegion("Shell",typeof(View.WelcomePageView));
    39. }
    41. ///<summary>
    42. ///RegisterTypesusedtoregistermodules
    43. ///</summary>
    44. ///<paramname="containerRegistry"></param>
    45. publicvoidRegisterTypes(IContainerRegistrycontainerRegistry)
    46. {
    47. }
    48. #endregion
    49. }
    50. }
  • Add a Textblock inside WelcomePageView to see if it's working properly.
    (Refer to the bold part of the below code snippet.)
    1. <UserControlx:Class="Presentation.View.WelcomePageView"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:prism="http://prismlibrary.com/"
    4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    6. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7. mc:Ignorable="d"
    8. prism:ViewModelLocator.AutoWireViewModel="True"
    9. d:DesignHeight="450"d:DesignWidth="800">
    10. <Grid>
    11. <TextBlockText="YousuccessfullyhaveconfiguredPrismintoyourAPP"/>
    12. </Grid>
    13. </UserControl>
  • Build and run your project. You'll get following output screen:
    (Refer to the image below.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (9)

  • Until now, we've added Prism into our project and we've finally achieved modularity. One final step left is having view communicate with viewmodel using MVVM pattern. We will achieve that with DataContext.
  • Let's add one more textblock into our WelcomePageView and bind it using a string property from our WelcomePageViewModel.
    (Refer to the bold part of the below code snippet.)
    1. <UserControlx:Class="Presentation.View.WelcomePageView"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:prism="http://prismlibrary.com/"
    4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    6. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7. mc:Ignorable="d"
    8. prism:ViewModelLocator.AutoWireViewModel="True"
    9. d:DesignHeight="450"d:DesignWidth="800">
    10. <Grid>
    11. <Grid.RowDefinitions>
    12. <RowDefinition/>
    13. <RowDefinition/>
    14. </Grid.RowDefinitions>
    15. <TextBlockText="YousuccessfullyhaveconfiguredPrismintoyourAPP"/>
    16. <TextBlockText="{BindingImGoodByeText}"Grid.Row="1"/>
    17. </Grid>
    18. </UserControl>
    1. usingSystem;
    3. namespacePresentation.ViewModel
    4. {
    5. ///<summary>
    6. ///ViewModelofWelcomePage,responsibleforlogicforrespectedview.
    7. ///</summary>
    8. publicclassWelcomePageViewModel
    9. {
    10. #regionProperties
    11. ///<summary>
    12. ///Thisstringpropertywillhavedefaulttextfordemopurpose.
    13. ///</summary>
    14. privatestring_imGoodByeText="ThisisbindedfromWelcomePageViewModel,ThankyouforbeingpartofthisBlog!";
    15. ///<summary>
    16. ///ThisstringpropertywillbebindedwithTextblockonview
    17. ///</summary>
    18. publicstringImGoodByeText
    19. {
    20. get{return_imGoodByeText;}
    21. set{_imGoodByeText=value;}
    22. }
    23. #endregion
    25. }
    26. }
  • And now open code behind WelcomePageView, so that we can set datacontext property from constructor.
    1. usingPresentation.ViewModel;
    2. usingSystem.Windows.Controls;
    4. namespacePresentation.View
    5. {
    6. ///<summary>
    7. ///InteractionlogicforWelcomePageView.xaml
    8. ///</summary>
    9. publicpartialclassWelcomePageView:UserControl
    10. {
    11. publicWelcomePageView()
    12. {
    13. InitializeComponent();
    14. this.DataContext=newWelcomePageViewModel();
    15. }
    16. }
    17. }
  • Now build and run your project, you'll get final output as below image.
    (Refer to the image below.)

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (10)

    • Thank you so much for visiting this blog, I hope you were helped by this. If you have any queries, please connect with me.

    Have a good day :)

    See Also
    Getting Started | PrismModular Application Development Using Prism Library | PrismPrism for WPF: A Basic Primer

    Creating a WPF Application using Prism Library and MVVM Architectural Pattern (2024)
    Top Articles
    Republic Day 2024: What’s special this year, top attractions expected | Today News
    Bharat Parv 2024 Red Fort: Ticket, Foods, Activities for Republic Day Celebrations
    Kunoichi Raid Build
    Www.nld.org
    Crazy In Love Blueface And Chrisean 123Movies
    Leslie Knipfing Wikipedia
    10 BEST Zevenbergschen Hoek Dri Hotels - Updated 2024 | Trip.com
    Bart van Oosterhout on LinkedIn: Exciting news! 🚀 We&#39;re launching THEOads today! If you&#39;re at IBC2024 and…
    House Party 2023 Showtimes Near Epic Theatres Of Clermont
    Craigslist Mohave County Az Personals
    Healthstream Piedmont
    Wis International Intranet
    Latest Posts
    Republic Day Parade 2024 Highlights: Grateful for French participation in celebrations, says PM Modi
    India Republic Day 2024: Parade, Flag hoisting time, celebration, and all you need to know - Times of India
    Article information

    Author: Van Hayes

    Last Updated:

    Views: 6339

    Rating: 4.6 / 5 (66 voted)

    Reviews: 89% of readers found this page helpful

    Author information

    Name: Van Hayes

    Birthday: 1994-06-07

    Address: 2004 Kling Rapid, New Destiny, MT 64658-2367

    Phone: +512425013758

    Job: National Farming Director

    Hobby: Reading, Polo, Genealogy, amateur radio, Scouting, Stand-up comedy, Cryptography

    Introduction: My name is Van Hayes, I am a thankful, friendly, smiling, calm, powerful, fine, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.