Creating Simple Xamarin Forms Crud App with RealmDB and MVVM Part 2

In this post, we will create basic design of our pages and navigate them properly.

If you haven’t read the first part, you can find it here:

Creating Simple Xamarin Forms Crud App with RealmDB and MVVM Part 1

8.0 Creating Pages for List of Customer Details, Create Page, Edit & Delete Page

8.1 Right click the “Views” folder -> “Add” -> “New Item…” and go to “Visual C#” -> “Cross Platform” then choose “Forms Blank Content Page Xaml.” Name this page as, for example, “CreateCustomer.xaml”

8.2 Do the same and create pages for “UpdateOrDeleteCustomer.xaml”, “ListOfCustomers”

8.3 Since we want to use the “ViewModel” where our Commands are located, we need reference it inside our xaml page then bind the whole page with it.

You can achieve it by adding this code snippet after the x:Class=”…” above

8.4 For “CreateCustomer.xaml” Page Add this code inside your ContentPage

1
2
3
4
5
6
7
8
9
10
<StackLayout Padding="20">
  <Label Text="Enter Customer Name"/>
  <Entry Text="{Binding CustomerDetails.CustomerName, Mode=TwoWay}"/>

  <Label Text="Enter Customer Age"/>
  <Entry Text="{Binding CustomerDetails.CustomerAge, Mode=TwoWay}"/>

  <Button Text="Create"
          Command="{Binding CreateCommand}"/>
</StackLayout>

We use the Mode=TwoWay to use the property from source to target or target to source. For Basic Understanding of DataBinding and MVVM you can back to this post Basic Understanding How Data Binding and MVVM works in Xamarin Forms

You also notice the “CreateCommand” is bindable inside our Button. So when the user click the button, the command will execute inside our ViewModel.

8.5 For “UpdateOrDeleteCustomer.xaml” Page Add this code inside your ContentPage

Note: But before that, you need to reference our ViewModel again. Go back to step 8.3 and do the same thing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<StackLayout Padding="20">
  <Label Text="Enter Customer Id for Update/Delete"/>
  <Entry Text="{Binding CustomerDetails.CustomerId, Mode=TwoWay}"/>

  <Label Text="Enter Customer Name"/>
  <Entry Text="{Binding CustomerDetails.CustomerName, Mode=TwoWay}"/>

  <Label Text="Enter Customer Age"/>
  <Entry Text="{Binding CustomerDetails.CustomerAge, Mode=TwoWay}"/>

  <Button Text="Update"
          Command="{Binding UpdateCommand}"/>

  <Button Text="Delete"
          Command="{Binding RemoveCommand}"/>
</StackLayout>

8.6 For “ListOfCustomers.xaml” Page, add this code snippet inside your content page.

Note: But before that, you need to reference our ViewModel again. Go back to step 8.3 and do the same thing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ListView ItemSource="{Binding ListOfCustomerDetails}"
          HasUnevenRows="True">
          <ListView.ItemTemplate>
            <DataTemplate>
              <ViewCell>
                <StackLayout Padding="10">
                  <Label Text="{Binding CustomerId}"/>
                  <Label Text="{Binding CustomerName}"/>
                  <Label Text="{Binding CustomerAge}"/>
                </StackLayout>
              </ViewCell>
            </DataTemplate>
          </ListView.ItemTemplate>
</ListView>

8.7 Lastly, our “MainPage.xaml” page. Just simply add this code snippet

Note: But before that, you need to reference our ViewModel again. Go back to step 8.3 and do the same thing.

1
2
3
4
5
6
7
8
<StackLayout Padding="20">
  <Button Text="List Of Customers"
          Command="{Binding NavToListCommand}"/>
  <Button Text="Create Customer Details"
          Command="{Binding NavToCreateCommand}"/>
  <Button Text="Update or Delete Customer by Id"
          Command="{Binding NavToUpdateDeleteCommand}"/>
</StackLayout>

I guess you are wondering now, where these commands are located? Proceed to step 9 instead.

9.1 Inside our CustomerViewModel, Add this following commands

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// For Navigation Page
  public Command NavToListCommand
  {
    get
    {
      return new Command(async () =>
      {
        await App.Current.MainPage.Navigation.PushAsync(new ListOfCustomers());
      });
    }
  }

  public Command NavToCreateCommand
  {
    get
    {
      return new Command(async () =>
      {
        await App.Current.MainPage.Navigation.PushAsync(new CreateCustomer());
      });
    }
  }

  public Command NavToUpdateDeleteCommand
  {
    get
    {
      return new Command(async () =>
      {
        await App.Current.MainPage.Navigation.PushAsync(new UpdateOrDeleteCustomer());
      });
    }
  }