3

I made a WPF app that opens successive windows based on user interaction. For example, the first winodw asks what module the user wants to work on, when a selection is made and a button pushed, a new windows open showing some Vendors and summary counts. Selecting one of those vendors and pushing the Edit button opens another window that shows the details of that Vendor. Clicking a detail and then a button open yet another window where the user can change some numbers etc. Then the user closes that window, picks a different item and edits, or closes that window and picks a different vendor etc. Each window has its own view model currently. I want to get rid of all the layers of windows. Tab Control doesn't seem to be a good option, since the user will have to go through the correct sequences etc. What is the best way to change this to use only one window, and swap out what the user sees in the one window when he, for example, pushes a button to edit etc.?

Theodosius Von Richthofen
  • 2,441
  • 1
  • 21
  • 46
  • 1
    It's a good question for another StackExchange site: [User Experience](http://ux.stackexchange.com/users/13161/) – Adriano Repetti Mar 12 '13 at 14:24
  • Is it a good solution to make a main container and then navigate through your windows or not? If so, you can try to use `UserControl`, that allows you to navigate. – Sonhja Mar 12 '13 at 14:39
  • Can anyone show tell me if a Frame with pages or a userControl would be suitable. Possibly an example ? Thanks – Theodosius Von Richthofen Mar 12 '13 at 14:40

2 Answers2

4

Personally I prefer to use a <ContentControl /> for my content area, and to swap out the active content based on the user's current "window"

I have an example on my blog that you could look at, but the basic components look like this:

ViewModel:

ObservableCollection<IViewModel> AvailableScreens;
IViewModel ActiveScreen;

ICommand SetActiveScreenCommand;

With some XAML that looks like this:

<ContentControl Content="{Binding ActiveScreen}" />

And I usually use DataTemplates to tell WPF how to draw each ViewModel

<Window.Resources>
    <DataTemplate DataType="{x:Type local:ModulesViewModel}">
        <local:ModulesView />
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:VendorsViewModel}">
        <local:VendorView />
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:EditVendorViewModel}">
        <local:EditVendorView />
    </DataTemplate>
</Window.Resources>
Rachel
  • 130,264
  • 66
  • 304
  • 490
  • thanks Rachel i will try this, this seems to be basically what i am wanting to do – Theodosius Von Richthofen Mar 12 '13 at 16:03
  • Rachel- Do you have any tips on how I can make the ChangePageCommand available to buttons in each of my UserControls? My situation is that I cannot have the buttons in the DockPanel like your example on your blog, I need to have buttons in the UserCOntrols themselves to change the ContentControl's content. So instead of a button with binding to DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestoryType={x:Type Window}}} what could I do in each UserControl to call the ChangePageCommand? – Theodosius Von Richthofen Mar 13 '13 at 12:37
  • @user1029770 If you can't find a way to build your commands in your ViewModel layer (such as your `ParentViewModel` setting `ChildViewModel.ChangePageCommand`), then I usually use some kind of messaging system like PRISM's `EventAggregator` or MVVM Light's `Messenger`. I have a brief [overview of messaging systems](http://rachel53461.wordpress.com/2011/06/05/communication-between-viewmodels-with-mvvm/) on my blog if you're interested. Basically your main ViewModel would subscribe to receive `ChangePageEvents` and you could broadcast a `ChangePageEvent` from anywhere in your program – Rachel Mar 13 '13 at 12:40
0

You can use a docking framework such as AvalonDock, which mimics the behavior of Visual Studio.

Eli Arbel
  • 22,391
  • 3
  • 45
  • 71
  • It's off topic (the question) anyway the point is not about dockable windows, he can do it (just for example) with a splitter, a tree view and a contextual editor (like VS options window, for example). And nothing is dockable there... – Adriano Repetti Mar 12 '13 at 14:27
  • i asked the question in that User Experience stackechange site and it immediately got down voted so... – Theodosius Von Richthofen Mar 12 '13 at 14:42
  • It got downvoted on UX because it's a massive wall of text, and it's unclear what the UX problem it is that you're actually asking for. If you're going to post on multiple sites please at least read the FAQ for those sites before posting questions to make sure your question is on-topic there, and it's also advised to reformat your questions to cater to that particular site audience, not just copy and paste the answer so it is duplicated across multiple sites. – JonW Mar 12 '13 at 15:02