Prism and MVVM Step-By-Step

Now a days, whenever we need to create a Desktop Application we usually use WPF Application due to its flexibility, CustomControl capability, great User Interface capability, clear separation of data, new technology and it is more consistent with current standards. Applications like Visual Studio are built using WPF and allow you to make a UI for Desktop as well as Web Applications. So, whenever we talk about WPF, we usually use the MVVM Pattern because of the clear separation of the UI and Code Behind. But it's always better to use the Prism Framework whenever you develop WPF Applications with the MVVM Pattern.

Prism: Prism is developed by Microsoft Patterns and Practices and provides guidance designed to help you to more easily design and build rich, flexible and easy-to-maintain Windows Presentation Foundation (WPF) desktop applications. (https://msdn.microsoft.com/en-us/library/ff921153(v=pandp.40).aspx)



We will start with one small application. First of all create a ShellProject (I created TeamRoleDemo) and installed UnityExtension and Prism from NugetPackage.

1. Create a shell for you application A shell is just a layout for defining a region and in the region we will load the view. Here I defined 3 regions in my shell. After this Remove StartupUri from the App.xaml.
   
   
   
   
2. Now create a BootStrapper for your project. In the Bootstrapper we are overriding CreateShell (to create the shell), InitializingShell (in this we are initializing the shell and showing the window), InitializeModule (It will initialize the modules we have or we will create in our application). We are creating UnityBootstrapper in this application.
   
   
   
   
3. We have added 3 Modules. In our application we have created four more projects, one is Infrastructure (that will contain only the common files) and all 3 modules we have created as different projects.
4. We want to load the 3 regions RoleSelection, CommonSelection and DetailSelection with the 3 views RoleSelectionView, CommonDetailView and ShowDetailsView respectively.
5. We have created the 3 views RoleSelectionView, CommonDetailView and ShowDetailsView in the 3 separate projects ModuleRoleSelection, ModuleCommonDetails and ModuleShowDetails respectively and bound with viewmodels.

RoleSelectionView



ShowDetailsView



CommonDetailView



FolderStructure



We have defined 3 roles in the view model, Student, Intern and Faculty so the combox will populate that List.

The Grid will show values based on a selection and the common details that have text showing a value. And which region and module we are defining in *Module.cs of each project.



So on building this solution we are getting the following output.



I hope this will help.