[Article] WPF Wizard control with MVVM support

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.

Read More

[Solved] Grouping issue in WPF radgridview. How to block the automatic group expand collapse issue in a grouped radgridview.

Introduction

In telerik WPF radgridview, when we apply grouping, we can find that some groups will automatically expand even if there is no user interaction. This mostly happens in scenario when there is some value change in rows which are grouped. This will also happen in other scenarios as well. This is a known bug in telerik radgridview at the time when this post is posted.
In this post you will find out how to block this bug with the help of a custom behavior. Here we will make use of mouse click event and GroupRowIsExpandedChanging events. Here subscribing to mouse click events may look tricky; in order to understand this, you have to refer to this post.

Read More

[Solved] How to find if we clicked on the group row or How to find the group in which the row belongs to on a mouse click event in a radgridview?

Introduction

In this post, we will find out how to find the group, if grouping is applied on the radgridview, in which the event occurred. Or how to find if the row clicked is group row or not.

If you have subscribed to the mouse click event properly, you will get call to the delegate which is registered to the click event. You can refer to this post for proper subscription of mouse click event.

Now if you are getting calls to the delegate, then it is easy to find the row in which the event occurred, you can refer to this post to find out how you can achieve this.

Now to find out how to find the group in which this event occurred, you have to do something like this as shown below.

How to achieve this?

private void GridViewRowMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
   var senderElm = e.OriginalSource as FrameworkElement;
   var currentRow = senderElm.ParentOfType<GridViewRow>();
   var parentGroup = senderElm.ParentOfType<GridViewGroupRow>();

   if (currentRow == null && parentGroup != null)
    {
       // clicked on grouped row.
    }

   if (currentRow != null)
    {
      // clicked on a row.
    }
}

Read More

[Solved] How to find the row on which a mouse click event occurred in radgridview?

Introduction

If you are able to subscribe to a mouse click event on a radgridView, then your immediate requirement could be to find the row in which the mouse click event occurred. In this post we will see how to achieve this. If you are not subscribing to mouse click event properly, then you can refer to this post.

Read More

[Solved] How to subscribe to a mouse click event on a row in radgridview?

Introduction

Subscribing to a row click event is not straight forward in WPF Telerik RadGridView. In this post we will see how we can achieve this.

Subscribing to a mouse click event would have been straight forward if all the rows were available at the time of gridview loaded event. But as in most scenarios, not all rows are available at this time, so when you subscribe to a normal Mouse Click event, only a click on the Header row will trigger the events. As the GridView can be updated with values at a later stage, it is not easy to subscribe to those rows which are loaded at a later stage.

Read More