0

I've been researching MVVM and WPF for a few weeks now, as I'm putting together a UI for an Application that another developer is doing the backend for. I don't have tons of GUI experience, so I'm just trying to figure it out as I go along.

I'm starting to understand the concept of keeping the backend code separate from the UI, but I can only find simple, one Window examples of MVVM online.

The application I'm designing is a Kiosk that moves step-by-step through a series of screens based on user input and scans. What is a good way to separate and design these transitions?

For example, I have a welcome screen that waits for the user to scan their ID. Once it gets their ID, it shows a new Window, or View, or whatever you want to call it, asking the user to confirm the scanned information and push the continue button.

Then it moves to a new screen where the user makes selections and so on until, and after a couple more "screens", the result is printed and it resets for the next user.

Are there any good implementation examples of this on the web?

EDIT: The application is full screen. My first instinct was to just design each screen as a separate window and Show() them one after the other, but this seems sloppy and I'm guessing it's not the best way.

Another thing I tried was to make each individual view a UserControl and load them in one main panel, one after the other based on the step. Once again, not sure this is the best method.

aufty
  • 407
  • 2
  • 9
  • 26
  • 1
    individual view as a UserControl and load them in one main panel is the way you have to go. but let it load based on the ViewModel. – Abin Aug 20 '15 at 20:04
  • @AbinMathew Do you know of any good examples of this? I'm still trying to wrap my mind around how to implement this with the ViewModel – aufty Aug 20 '15 at 20:08
  • I dont have an online example, but i can give idea how to do it. – Abin Aug 20 '15 at 20:11

1 Answers1

2

Add a Content Control in your MainView like below,

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

Create DataTemplates for your different Views like below,

<DataTemplate x:Key="Viewer"  DataType="{x:Type VM:TiffImageViewerViewModel}">//ViewModel Name
        <view:TiffViewer/>//View Name
</DataTemplate>

MainViewModel

public object CurrentView { get; set; }

private TiffImageViewerViewModel _TiffImageViewerViewModel;
    public TiffImageViewerViewModel TiffImageViewerViewModel
    {
        get
        {
            return _TiffImageViewerViewModel;
        }
        set
        {
            _TiffImageViewerViewModel = value;
        }
    }

Create the object and assign it to CurrentView. This link gives more clarity

Community
  • 1
  • 1
Abin
  • 2,868
  • 1
  • 23
  • 59
  • So it looks like each view has its own ViewModel, right? And, TiffViewer is still a UserControl, but you're adding it to resources as a DataTemplate, correct? – aufty Aug 20 '15 at 20:26
  • `TiffViewer` is a View as you have different views. I am adding it to my `MainView` as `DataTemplate` – Abin Aug 20 '15 at 20:43
  • http://stackoverflow.com/questions/19654295/wpf-mvvm-navigate-views I also found this question/answers useful. – aufty Aug 20 '15 at 20:45
  • @aufty Yes i just explained in my way here. – Abin Aug 20 '15 at 20:48
  • Yep - it's the same thing as what you posted above - just thought I'd reference it for another example if anyone comes across this question. – aufty Aug 20 '15 at 20:54
  • @aufty Yes i have edited my answer to add that link. Thanks. – Abin Aug 20 '15 at 20:56