MVVM in VB.Net - Lesson 7: Finishing Up

Now that we have the Model, ViewModel, and the View complete, let’s create our shell. In this case, the shell is a Window.

MainWindowViewModel

  1. Add a new class to the ViewModel folder named MainWindowViewModel.
  2. Place this code in the class.

MainWindowViewModel.vb

Public Class MainWindowViewModel
    Inherits ObservableObject

    Public Sub New()
        CurrentPage = New CustomerViewModel
    End Sub

    Private _CurrentPage As ObservableObject
    Public Property CurrentPage() As ObservableObject
        Get
            Return _CurrentPage
        End Get
        Set(ByVal value As ObservableObject)
            _CurrentPage = value
            OnPropertyChanged("CurrentPage")
        End Set
    End Property

End Class

The CurrentPage will be our display. In the constructor, we are placing the CustomerViewModel. The OnPropertyChanged states that CurrentPage has changed, and that the view must update its data bound property.

MainWindowView

  1. If you have a MainWindow window in your project, delete it. Create a new window in the View folder named MainWindowView.
  2. Place this code in the XAML.

MainWindowView.xaml

<Window x:Class="MainWindowView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MVVM_Sample"
    Title="MainWindow" Height="350" Width="525"
    Content="{Binding Path=CurrentPage}">
    
    <Window.Resources>
        <!-- Data Templates -->
        <DataTemplate DataType="{x:Type local:CustomerViewModel}">
            <local:CustomerView />
        </DataTemplate>
    </Window.Resources>
    
    
</Window>

The content is bound to the CurrentPage property. So when the CurrentPage property changes, the content will also change.

There is a data template in the Window.Resources. This data template states that if the CurrentPage has the type of CustomerViewModel, then show the CustomerView. The data context of the CustomerView will automatically be the type CustomerViewModel. When we finish this tutorial, you can remove this data template, and it will only show a label in the content stating the type shown.

Example: MVVM_Sample.CustomerView

Application

Lastly, we want to tell our application that the MainWindowView has a data context of MainWindowViewModel. This is done in our Application.vb.

  1. Open the Application.xaml file.
  2. Remove the line StartupUri="MainWindow.xaml"
  3. Open the Application.vb file (you can also right click on the Application.xaml file and choose Show Code).
  4. Place this code in the class.

Application.vb

Class Application

    ' Application-level events, such as Startup, Exit, and DispatcherUnhandledException
    ' can be handled in this file.

    Private Sub Application_Startup(ByVal sender As Object, ByVal e As System.Windows.StartupEventArgs) Handles Me.Startup
        Dim WindowView As New MainWindowView
        Dim WindowViewModel As New MainWindowViewModel

        WindowView.DataContext = WindowViewModel
        WindowView.Show()
    End Sub
End Class

Running the Application

If you have followed these steps, you will have a simple data validating MVVM application. You should see a red border around the LastName’s TextBox as well as a disabled OK button.

Here is a sample image:

If you type in something in the last name, then place focus on another control, the border will disappear, meaning that all data requirements have been met.

More by this Author


Comments 2 comments

Bankai 3 years ago

Ther a lot of errors in VS 2012...

Can't use yor tutorial :-(


dan 2 years ago

the other poster is right. tutorial is crap. lots of things missing. why not make the solution avalable for download

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working