Architecture in designing Login Page and the other screens using prism ,mvvm,wpf ,untity 3.0

Topics: Prism v2 - Silverlight 4, Prism v2 - WPF 3.5, Prism v2 - WPF 4, Prism v4 - Silverlight 4, Prism v4 - WPF 4
May 16, 2013 at 8:05 AM
we have a requirement to create a WPF prism MVVM app using unity 3.0 .

User will be presented a 'Login Screen' , where he enters username and password , after which click on 'OK" will check for permissions or security if user has access or not ,if no access , it will give a error message.
click on 'Cancel' will close the window itself.
If he has access, a window gets opened with different views .
In the login page, there is a button on click will pass data to other pages.

please need your suggesstions in designing this using prism wpf unity mvvm.

Kind Regards
May 16, 2013 at 5:19 PM

Based on my understanding of your scenario, I believe that your application could be designed using the following approach. Take into account that I won't give details on how to initialize your application Bootstrapper, since I assume you know how to do it.

  • Define a region in your Shell (MainWindow in this case) using Region Manager, so you could manage which views will be shown.
  • Your Login Screen could be a Module from your application. In this module, you will use the MVVM approach by defining a View in XAML, which will be your Login Screen UI, and a ViewModel, which will be in charge of managing the changes on your View through bindings, events and commands. Your View should be registered in your Shell region.
  • Users information could be managed by defining a Shared Service following the Model approach from MVVM. Also, you could store which users can log in using another Shared Service and implement an Interface to communicate with it.
  • The "OK" button could bind to a Command in your ViewModel from the Login Screen Module. Then, the ViewModel could do the authentication of the user through the interface you defined before, so you could know if the user is authorized or not and fire an event if necessary to update the UI and Views. The "Cancel" button could bind to a Command too.
  • When the user has access, to show a different view, you could use Service Locator and Region Manager to get an instance of the view and activate it (so it will be shown in your MainWindow).
  • If I am correct, when you say "pass data to other pages", I believe you are referring to pass user data to the views when the user has access. If this is the case, then you could just pass that data when you click the "OK" button and the authentication was successful, by just publishing an event through EventAggregator and pass the data.
Nevertheless, this is just a general idea on how to implement all of this, which you can modify based on your needs. For more information about how to implement this approach, you could read the following chapters of the Prism documentation:

Note: Take into account that there is a known issue in Prism when trying to use the last release of Unity 3.0. More information here.

Hope this helps,

Federico Martinez
May 20, 2013 at 7:50 AM
Thanks a lot Martinez .

Can we follow this approach ?

The LoginView.xaml will not be a part of 'Shell.Xaml ',instead we created another view in the same project as 'shell.xaml'.whenever shell initializes we show the login dialog, once user eneters details and click on 'ok' based on dialog result we show the Mainwindow.showor attach mainwindow to shell. is this approach correct or do you see any issues.
Apart from this I also need your help in validating the attached flow. or suggest how many regions we require , first scrren has 3 regions and clicking on the button present on the first screen loads second screen which has different regions again , the same applies for third as well as foutrth.Need you suggestions in designing tha app,what all things should we consider and how should my shell.xaml look like, how many regions should i divide it into etc.

I was unable to attach the sample screen here.let me know your email so that i can frwd it.but in general,

Screen 1 : has
3 regions
  1. StatusRegion
    2.Userregion (which has tabcontrols with different views)
    3.Todo region ,which has 2 regions.
Screen 2: clcik on button present in view presnt in useregion, this gets load ,it also has
  1. Userdetailregion ,which has views contains userpic,details
  2. It has userdataregion which has tabitems which has different grids contains data.
    userdataregion also has a comments region at the end where user can add comments.
Same applies like screen 3 , where lciking on button on view in screen 2 ,
different views or regions get loaded.

How many regions in total my shell should be divided into, how can i ft in these many should i navigate between them,
need suggestions for this type of applications.
Thanks in advance.let em know if you need more detail!

May 21, 2013 at 8:17 PM
Hi Krishna

Regarding the first part, the are several approaches that can be used to present a login screen. The one you are describing seems to be a valid one. Either you could show the Shell window only after the user is authenticated in the login screen or show the Shell from the beginning but only load the content after the authentication is completed.

Regarding the second part of the views and the regions, there is no specific rule about how to structure your views or how many regions you should use. Those parameters will change depending of each scenario and what you are trying to achieve. Hence, it would be helpful if you could explain for what each view and region is used for, the navigation flow of your application, etc.

If you want to post a sample in this thread, you could upload it to a file hosting service of your preference (e.g. SkyDrive) and post the link here.


Damian Cherubini
May 29, 2013 at 11:14 AM

I was able to design the page into 3 regions , the middle region is dynamically loaded with different views.
The first region has a view , on click of a button I want to show a modal dialog , Currently I am facing an issue in showing that.
Can you please share if you have any links or code so that I can refer and work upon.

I have a View,ViewModel, Model,DAL

The button command is present in the viewmodel. On click of it , I am first getting the regionname and then I am struck when I want to retrieve the View (GetView (typeof(viewname) ,, the reason being ViewModel doesn't have reference of view . Already i created a reference of viewmodel in view and if i try to dao it viceversa circulardependncy occurs. I need to get the viewname .\
Should I change any architecture here. (view,viewmodel,model,DAL)

Need urgent help in this regard.

May 29, 2013 at 6:57 PM
This discussion is being continued in the following thread: