MVVM in VB.Net - Lesson 6: The View

Overview

Now it is time for the view, or our presentation layer. This is what the user will interact with. We will be making a simple view.

  1. In the view folder, create a User Control named CustomerView.
  2. Place this code in the XAML portion of the user control.

CustomerView.xaml

<UserControl x:Class="CustomerView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- Labels -->
        <StackPanel>
            <Label>First Name:</Label>
            <Label>Last Name:</Label>
        </StackPanel>

        <!-- TextBoxes -->
        <StackPanel Grid.Column="1">
            <TextBox Text="{Binding Path=Customer.FirstName, ValidatesOnDataErrors=True}" Margin="4,0"/>
            <TextBox Text="{Binding Path=Customer.LastName, ValidatesOnDataErrors=True}" Margin="4,0"/>
            
            <!-- OK Button -->
            <Button Content="_OK" IsDefault="True" Command="{Binding Path=OKCommand}" Margin="10" HorizontalAlignment="Right" Width="60"/>
        </StackPanel>
    </Grid>
</UserControl>

The textbox's text property is bound to the Customer’s public property. The ValidatedOnDataErrors=True statement means that the TextBox will validate the data entered.

The button’s command is bound to the OKCommand property we’ve created in the CustomerViewModel.

After we complete this tutorial you will see the buttons' commands in action.

More by this Author


Comments

No comments yet.

    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