Lesson 2 - Bind Data Editors

Mar 29, 2023
4 minutes to read

The previous lesson describes how to create a basic layout for the registration form.

This lesson describes how to create a View Model for it.

Define the View Model

Open the previous project (if you skipped Lesson 1, open the RegistrationForm.Lesson1 project in the example below).

View Example: Create a Registration Form

Open the RegistrationViewModel.cs file and add the following properties to the RegistrationViewModel class.

C#
VB.NET

csharp

[POCOViewModel]
public class RegistrationViewModel {
    public static RegistrationViewModel Create() {
        return ViewModelSource.Create(() => new RegistrationViewModel());
    }
    protected RegistrationViewModel() {
        if(this.IsInDesignMode())
            InitializeInDesignMode();
        else InitializeInRuntime();
    }
    void InitializeInDesignMode() {
        FirstName = "John";
        LastName = "Smith";
        Email = "[email protected]";
        Password = "Password";
        ConfirmPassword = "Password";
        Birthday = new DateTime(1980, 1, 1);
    }
    void InitializeInRuntime() {
        Birthday = null;
    }

    public virtual string FirstName { get; set; }
    public virtual string LastName { get; set; }
    public virtual string Email { get; set; }
    public virtual string Password { get; set; }
    public virtual string ConfirmPassword { get; set; }
    public virtual DateTime? Birthday { get; set; }
}

<POCOViewModel>
Public Class RegistrationViewModel
    Public Shared Function Create() As RegistrationViewModel
        Return ViewModelSource.Create(Function() New RegistrationViewModel())
    End Function
    Protected Sub New()
        If Me.IsInDesignMode() Then
            InitializeInDesignMode()
        Else
            InitializeInRuntime()
        End If
    End Sub
    Private Sub InitializeInDesignMode()
        FirstName = "John"
        LastName = "Smith"
        Email = "[email protected]"
        Password = "Password"
        ConfirmPassword = "Password"
        Birthday = New Date(1980, 1, 1)
    End Sub
    Private Sub InitializeInRuntime()
        Birthday = Nothing
    End Sub

    Public Overridable Property FirstName() As String
    Public Overridable Property LastName() As String
    Public Overridable Property Email() As String
    Public Overridable Property Password() As String
    Public Overridable Property ConfirmPassword() As String
    Public Overridable Property Birthday() As Date?
End Class

Since the RegistrationViewModel is a POCO class, all defined properties are bindable.

The InitializeInRuntime method initializes the Birthday property. The DateTime struct is a value type, so the Birthday field makes use of a Nullable DateTime. With a non-nullable type, the Birthday field would be initialized into a specific value, which is not recommended.

Register Data

Add the AddEmployee method to the view model.

C#
VB.NET

csharp

[POCOViewModel]
public class RegistrationViewModel {
    ...
    public void AddEmployee() {
        EmployeesModelHelper.AddNewEmployee(FirstName, LastName, Email, Password, Birthday.Value);
    }
}

<POCOViewModel>
Public Class RegistrationViewModel
    '...
    Public Sub AddEmployee()
        EmployeesModelHelper.AddNewEmployee(FirstName, LastName, Email, Password, Birthday.Value)
    End Sub
End Class

The POCO mechanism automatically generates a command for this method. The generated command’s name follows the [MethodName]Command pattern. Set the Command property of the Register button:

XAML

xaml

<dxlc:LayoutControl Orientation="Vertical" ItemStyle="{StaticResource itemStyle}" ItemSpace="10">
    ...
    <Button Content="Register" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="80" 
            Command="{Binding AddEmployeeCommand}" />
</dxlc:LayoutControl>

Bind Editors

Rebuild the project.

Select the TextEdit element of the First Name layout item and invoke its Quick Actions. Click the rectangle button to the right of the EditValue property and select Create Data Binding.

In the invoked dialog window, enable the Custom option and type “FirstName”.

Once the binding is created, the FirstName editor displays test data in the Visual Studio Designer.

Bind the remaining editors to their corresponding properties and the Register button to the AddEmployee command. The XAML below shows the result.

XAML

xaml

<dxlc:LayoutControl Orientation="Vertical" ItemStyle="{StaticResource itemStyle}" ItemSpace="10">
    <dxlc:LayoutGroup ItemSpace="10">
        <dxlc:LayoutItem Label="Name">
            <dxe:TextEdit EditValue="{Binding FirstName}" />
        </dxlc:LayoutItem>
        <dxe:TextEdit VerticalAlignment="Bottom" EditValue="{Binding LastName}" />
    </dxlc:LayoutGroup>
    <dxlc:LayoutItem Label="Email">
        <dxe:TextEdit EditValue="{Binding Email}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Create a password">
        <dxe:PasswordBoxEdit EditValue="{Binding Password}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Confirm your password">
        <dxe:PasswordBoxEdit EditValue="{Binding ConfirmPassword}" />
    </dxlc:LayoutItem>
    <dxlc:LayoutItem Label="Birthday">
        <dxe:DateEdit EditValue="{Binding Birthday}" />
    </dxlc:LayoutItem>
    <Button Content="Register" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="80" 
            Command="{Binding AddEmployeeCommand}" />
</dxlc:LayoutControl>

The editors don’t show test data in runtime.