none
Complex GUI Design using MVVM RRS feed

  • Question

  • Morning

    I'm slowly growing accustom to xaml and mvvm but there are still some things which I wouldn't know how to approach.  One of these is a gui design similar to Visual Studio 2015 lets say (since most of you will know how it looks).  In Visual Studio our screen is split into usually lets say 3 tiles: The "Main" Tile which contains a tabbed view with a tab for each of our open cs and xaml files, the "Solution Explorer" Tile which itself contains various Tabs and the "Output" Tile which again contains a tabbed view of Error List tab, Output tab, Command Window, etc. 

    I am assuming an mvvm structure, and in the development of such a piece of software... 

    1)is it fair to say that each tile will have its own ViewModel?  Better yet, I could imagine each "Tab" in all our tiles having its own ViewModel?

    2)In developing the design of each tab or tile (Recall that I split visual studio into three tiles each of which contained numerous tabs), would it be possible to design each tile (or even better, each tab) separately?  What I mean is, in my first wpf application I developed something akin to Multiple Document Interface using numerous Windows.  On this forum however I've noticed that most use one Window for one application.  If I wanted to do this myself and develop a gui akin to visual studios, I could not call each "tile" a window (I could not choose a "New Window" for a tile) as I could not place this window into my main window, would I use a Page for each tile?  And then each page would contain a tabbed view and I could place my three pages (each representing a tile) into the MainWindow? (Is this how I should develop a gui similar to visual studios?)

    I hope the above doesn't sound too confusing, I was interested in the proper, clean way to develop a gui similar to that of visual studio using mvvm and how to properly split the gui and viewmodels to make it easier to develop and maintain.

    Thanks to all


    MarcinMR

    Tuesday, December 8, 2015 5:01 PM

Answers

  • 1)is it fair to say that each tile will have its own ViewModel?  Better yet, I could imagine each "Tab" in all our tiles having its own ViewModel?

    Yes, probably.

    2)In developing the design of each tab or tile (Recall that I split visual studio into three tiles each of which contained numerous tabs), would it be possible to design each tile (or even better, each tab) separately?

    Yes, certainly. That's what Prism's composed user interface is all about. You have a shell (window) that provides a layout that is composed of loosely coupled visual elements (typically user controls) generated at run time. Please refer to the following pages for more information:
    https://msdn.microsoft.com/en-us/library/ff921098%28v=pandp.40%29.aspx
    https://msdn.microsoft.com/en-us/library/ff921174(v=pandp.40).aspx

    >>would I use a Page for each tile?

    A UserControl is typically what represents a loosely coupled view.

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:23 PM
    Tuesday, December 8, 2015 5:11 PM
  • I don't think MvvmLight has something like regions.

    >>I wanted to implement these without PRISM (I started using MVVMLight), would each region be a "User Control"?

    Yes. Or a ContentControl where you bind the Content property to some source property and provide DataTemplates to define the apperance of them: http://stackoverflow.com/questions/3284804/how-to-do-regions-in-wpf-without-prism

    Andy provided an example of such a ContentControl in the following thread that you may want to check out: https://social.msdn.microsoft.com/Forums/en-US/5d743f8b-1999-4feb-9ac9-0b3926d91e43/dockpanel-template-selection?forum=wpf

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:23 PM
    Tuesday, December 8, 2015 5:54 PM
  • Hi Marcin,

    Most of the stuff I do is nowhere near as complicated as visual studio has to be. That means you don't need draggable panels and all that stuff.

    This is definitely not a project you design as your first or even maybe third, fourth.

    1) Extend the concept presented in that sample of mine you looked at.

    I would have a viewmodel per panel and for each menu. The menu vms are likely to have collection of collections of viewmodels as well.

    2) Remember you can drag the windows out. Those are docked windows. Probably a base window with a contentcontrol that takes some self contained thing.

    That could be a page or usercontrol. They are effectively the same really. Usually usercontrols though, not many teams use pages ( that I've heard of ).

    I've worked on systems dynamically composed the view in several different ways.
    Using toolsets like MEF and Unity you can distribute dll which are dynamically composed via configuration. This is an approach which is used in software packages where you sell products in modules. The client buys a sales module and a reporting module, you deliver those as 2 dll. The one who just buys sales gets 1 dll.

    I've used both PRISM and code for composable UI.

    PRISM + MEF + Unity is good if you want a very particular sort of flexible composition.

    It is not necessary and IMO overcomplicates things for many sorts of flexible composition.

    For example, consider these:

    http://social.technet.microsoft.com/wiki/contents/articles/28797.wpf-dynamic-xaml.aspx#Flexible_Composition

    There are two solutions there which demonstrate the basics of a technique.

    In the first you can choose which views ( usercontrols ) go in a view.

    That produces an xml file which you use in the second.

    So you're building the xaml for your view which hosts usercontrols. 


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:23 PM
    Tuesday, December 8, 2015 5:59 PM
    Moderator
  • PRISM Regions offer a bunch of functionality but I find for most apps these are irrelevant and setting a contentcontrol's content effectively does what I really want to do.

    Since PRISM is pretty complicated stuff and I don't like it's dependence on bridging objects for stuff like eventtocommand I prefer mvvmlight.

    .

    The nested collection thing is because there are sub windows or you might prefer sub menus. A menuitem is a headereditemscontrol so it can do the hierarchicaldatatemplate trick of parent to child relationships.

    .

    You can do docking windows in several ways.

    I've user Telerik some time ago but there's also Avalondock https://avalondock.codeplex.com/

    I don't really like extra windows, whether they dock or not.

    A lot of users aren't very computer literate and they lose the things. You get weird edge cases. Like they're part way through a process on one window. They lose it. They start doing it again on another version of that window. Somehow go back to the first and complete the transaction. Then later on they see the second version and think "Oh, I didn't save that"... why is it erroring???

    You need to look for the lowest common denominator with a lot of users.


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:22 PM
    Wednesday, December 9, 2015 8:38 AM
    Moderator

All replies

  • 1)is it fair to say that each tile will have its own ViewModel?  Better yet, I could imagine each "Tab" in all our tiles having its own ViewModel?

    Yes, probably.

    2)In developing the design of each tab or tile (Recall that I split visual studio into three tiles each of which contained numerous tabs), would it be possible to design each tile (or even better, each tab) separately?

    Yes, certainly. That's what Prism's composed user interface is all about. You have a shell (window) that provides a layout that is composed of loosely coupled visual elements (typically user controls) generated at run time. Please refer to the following pages for more information:
    https://msdn.microsoft.com/en-us/library/ff921098%28v=pandp.40%29.aspx
    https://msdn.microsoft.com/en-us/library/ff921174(v=pandp.40).aspx

    >>would I use a Page for each tile?

    A UserControl is typically what represents a loosely coupled view.

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:23 PM
    Tuesday, December 8, 2015 5:11 PM
  • The links look interesting, what are the chances there's something like this for MVVMLight?  

    So in the link you provided there are "regions" in the main view: Action Region, Research Region and MainRegion.  If I wanted to implement these without PRISM (I started using MVVMLight), would each region be a "User Control"?


    MarcinMR

    Tuesday, December 8, 2015 5:50 PM
  • I don't think MvvmLight has something like regions.

    >>I wanted to implement these without PRISM (I started using MVVMLight), would each region be a "User Control"?

    Yes. Or a ContentControl where you bind the Content property to some source property and provide DataTemplates to define the apperance of them: http://stackoverflow.com/questions/3284804/how-to-do-regions-in-wpf-without-prism

    Andy provided an example of such a ContentControl in the following thread that you may want to check out: https://social.msdn.microsoft.com/Forums/en-US/5d743f8b-1999-4feb-9ac9-0b3926d91e43/dockpanel-template-selection?forum=wpf

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:23 PM
    Tuesday, December 8, 2015 5:54 PM
  • Hi Marcin,

    Most of the stuff I do is nowhere near as complicated as visual studio has to be. That means you don't need draggable panels and all that stuff.

    This is definitely not a project you design as your first or even maybe third, fourth.

    1) Extend the concept presented in that sample of mine you looked at.

    I would have a viewmodel per panel and for each menu. The menu vms are likely to have collection of collections of viewmodels as well.

    2) Remember you can drag the windows out. Those are docked windows. Probably a base window with a contentcontrol that takes some self contained thing.

    That could be a page or usercontrol. They are effectively the same really. Usually usercontrols though, not many teams use pages ( that I've heard of ).

    I've worked on systems dynamically composed the view in several different ways.
    Using toolsets like MEF and Unity you can distribute dll which are dynamically composed via configuration. This is an approach which is used in software packages where you sell products in modules. The client buys a sales module and a reporting module, you deliver those as 2 dll. The one who just buys sales gets 1 dll.

    I've used both PRISM and code for composable UI.

    PRISM + MEF + Unity is good if you want a very particular sort of flexible composition.

    It is not necessary and IMO overcomplicates things for many sorts of flexible composition.

    For example, consider these:

    http://social.technet.microsoft.com/wiki/contents/articles/28797.wpf-dynamic-xaml.aspx#Flexible_Composition

    There are two solutions there which demonstrate the basics of a technique.

    In the first you can choose which views ( usercontrols ) go in a view.

    That produces an xml file which you use in the second.

    So you're building the xaml for your view which hosts usercontrols. 


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:23 PM
    Tuesday, December 8, 2015 5:59 PM
    Moderator
  • Hi Andy

    Could you elaborate when it might be a good idea for a ViewModel to have a collection of other ViewModels as private members rather than use Messenger (or the like) to communicte between ViewModels?

    Also, yes I noticed that you can pull out the "tiles" in Visual Studio and they become "Internal Windows" (something akin to Multiple Document Interface - which WPF no longer supports and I'm quite disappointed by that), and I was going to ask, how one could implement functionality like that (docked it appears as a section of a larger whole, undocked, it becomes an "internal window").  So no simple way to do this in WPF? 


    MarcinMR

    Wednesday, December 9, 2015 3:03 AM
  • PRISM Regions offer a bunch of functionality but I find for most apps these are irrelevant and setting a contentcontrol's content effectively does what I really want to do.

    Since PRISM is pretty complicated stuff and I don't like it's dependence on bridging objects for stuff like eventtocommand I prefer mvvmlight.

    .

    The nested collection thing is because there are sub windows or you might prefer sub menus. A menuitem is a headereditemscontrol so it can do the hierarchicaldatatemplate trick of parent to child relationships.

    .

    You can do docking windows in several ways.

    I've user Telerik some time ago but there's also Avalondock https://avalondock.codeplex.com/

    I don't really like extra windows, whether they dock or not.

    A lot of users aren't very computer literate and they lose the things. You get weird edge cases. Like they're part way through a process on one window. They lose it. They start doing it again on another version of that window. Somehow go back to the first and complete the transaction. Then later on they see the second version and think "Oh, I didn't save that"... why is it erroring???

    You need to look for the lowest common denominator with a lot of users.


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    • Marked as answer by MarcinMR Wednesday, December 9, 2015 4:22 PM
    Wednesday, December 9, 2015 8:38 AM
    Moderator