Friday 12 December 2014


Share/Bookmark

Introduction

     In this article I am presenting a custom wizard control which supports MVVM approach. Here we will see how to use this control also we will see the features this control exposes. You can download this control from Github page. Contribution to this control will be appreciated. Also you can download the complete solution which makes use of this control from here. Once the wizard control is implemented, it will look like as shown below.


How to use this wizard control?

    This control comes in three files.

  1. Wizard.cs 
  2. WizardItemHeader.cs 
  3. IWizardItem.cs 

Wizard.cs is the main file which contains the implementation of this custom control. This file is dependent on WizardItemHeader.cs which is a structure that the control uses internally. If you are not following MVVM approach, then what you need is just these two files. If you are following MVVM then you will require IWizardItem.cs
IWizardItem.cs
This is an interface which when implemented in your ViewModel, will expose more features of this control. You have to optionally implement this interface in your ViewModel of the view(s) which you are going to display in wizard. The interface members are as shown below.
public interface IWizardItem
    {
        /// <summary>
        /// This method should return the header for wizard item to display
        /// </summary>
        /// <returns> A string value.</returns>
        string GetHeader();

        /// <summary>
        /// This method will be invoked to check whether this item can be displayed or not.
        /// </summary>
        /// <returns>A boolean value indicating true or false status</returns>
        bool CanDisplay();

        /// <summary>
        /// This method will get invoked when the wizard item becomes the active item.
        /// </summary>
        void OnWizardItemNavigatedTo();

        /// <summary>
        /// This method will get invoked on the current wizard item when the control is moved to next wizard item.
        /// </summary>
        void OnWizardItemNavigatedFrom();
    }

Now we will see how to use this wizard control in XAML. You can use this control just like any other control. The xaml declaration of this wizard control is as shown below.
<wizard:Wizard CancelCommand="{Binding CancelCommand}"

      OkCommand="{Binding OkCommand}"

      Orientation="Top"

      FinalButtonText="Done"

      WizardItems="{Binding WizardItems}" />

Here CancelCommand will be executed when user clicks on the cancel button. OkCommand is the command which will be executed when the user is in the final step and user clicks on the next button. Orientation is the way the wizard displays the items. Say for instance, if we assign the orientation as “Left” then the control will be displayed as shown below.


FinalButtonText is where we can assign the text to display on the next button when we are at the final stage of the wizard. Now finally WizardItems is where you have to assign the list of view objects. The control will take the view in its order as it is assigned in the list. Below is a sample initialization of the WizardItems.
public MainWindowViewModel()
 {
   WizardItems = new List<object> { new View1(), new View2(), new View3() };
 }

public IList<object> WizardItems { get; set; }

This control also has shortcuts the shortcut associated with the back button is LEFT Arrow key and the shortcut associated with next button is RIGHT arrow key.or Enter key



Some of the concerns are addressed in the continuation post of this and you can find it at http://gonetdotnet.blogspot.in/2015/09/article-continuation-of-wpf-wizard_30.html
This includes how to share object and how to control navigation and how to validate before navigation.

Categories:

7 comments:

  1. Everything was looking good until last piece of code. ViewModels shouldn't know Views.

    ReplyDelete
    Replies
    1. By a simple tweak, you could get it in proper way, Bring Dependency Injection container in. :)

      Delete
  2. In this article, Intentionally I didn't drag dependency injection in just to keep the idea simple.

    When you implement this, you could register your views with ViewNames, and can use the view names in ViewModel instead of view itself like,

    WizardItems = new List<'object'> { ViewNames.View1, ViewNames.View2, ViewNames.View3 };


    and can resolve this view in Wizard.cs class and can show this. May be, in another article I can publish the Entire code which does the same.

    ReplyDelete
  3. How can i keep track of what was selected in each page when reaching the end page?

    ReplyDelete
    Replies
    1. You can refer to the continuation of this article http://gonetdotnet.blogspot.in/2015/09/article-continuation-of-wpf-wizard_30.html

      Delete
  4. What's the best way to keep track of the data been selected in page?

    ReplyDelete
  5. To address more scenarios i have made a continuation post for the same, Here is the link to that post. http://gonetdotnet.blogspot.in/2015/09/article-continuation-of-wpf-wizard_30.html

    ReplyDelete

Dear reader, Your comment is always appreciated. I will reply to your queries as soon as possible.

1. Make sure to click on the Subscribe By Email link to be notified of follow up comments and replies. Or you can use Subscribe to: Post Comments (Atom) link.
2. Only English comments shall be approved.
3. Please make your comments self-explanatory. Comment in such a way that it explains the comment so that a counter question can be avoided and can be replied with proper answer on the first go.