Data and Command Bindings – Made Easy with Shared Toolkit

First things first, wishing you all a very happy, healthy, and prosperous new year 2024.

2023 wrapped with the release of a newer version of VijayAnand.Toolkit.Markup (aka SharedToolkit), which comes with the wrapper method that allows specifying the Binding as a LINQ expression without the need to specify an additional getter or setter.

These Binding method names are suffixed with v2, like Bindv2. They are Statically typed, hence better control, as it allows the identification of errors during compilation itself. Also, the default binding behavior of the View is retained, like Entry works on the two-way binding as it enables editing. This behavior can be modified with the BindingMode parameter.

Update: This is now extended to support Gestures as well, consult this article for further details.

Made available for both Xamarin.Forms and .NET MAUI.

This package is based on Xamarin.Forms v5.0.0.2612 and targets .NET Standard 2.0. It is compatible with all versions of .NET MAUI. For more details, please refer to the corresponding NuGet package version here.

Install:

dotnet add package VijayAnand.Toolkit.Markup

.NET 9 – v4.0.0 (New release)
.NET 8 – v3.5.0
.NET 7 – v2.2.0
.NET 6 – v1.2.0

Properties:

This works directly with Default properties:

// Text is the default property for Entry and Label
new Entry().Bindv2(static (UserViewModel vm) => vm.FirstName);

new Entry().Bindv2(static (UserViewModel vm) => vm.LastName);

new Label().Bindv2(static (UserViewModel vm) => vm.FullName);

// SelectedIndex is the default property for Picker
new Picker().Bindv2(static (UserViewModel vm) => vm.Country);

Commands:

new Button().BindCommandv2(static (UserViewModel vm) => vm.SaveCommand);

new ToolbarItem().BindCommandv2(static (UserViewModel vm) => vm.ShareCommand);

Named Properties: (other than the default ones)

new Picker().Bindv2(Picker.ItemsSourceProperty, static (UserViewModel vm) => vm.Countries);

Detailed Sample: (with model type)

// Model definition
namespace MyApp.Models;

public record State(string Name);

public record Country(string Name, IEnumerable<State> States);

// ViewModel definition
using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;

namespace MyApp.ViewModels;

public class UserViewModel : ObservableObject
{
  public UserViewModel()
  {
    Countries =
    [
      new("India", [new("Karnataka"), new("Tamil Nadu")]),
      new("USA", [new("Arizona"), new("Texas")])
    ];
  }

  public ObservableCollection<Country> Countries { get; }
}

// View definition
namespace MyApp.Views;

public class UserPage : ContentPage
{
  public UserPage()
  {
    ViewModel = new UserViewModel();
    BindingContext = ViewModel;
    Content = new Grid()
    {
      Children =
      {
        new StackLayout().Center()
         .ItemsSource(ViewModel.Countries)
         .ItemTemplate(new DataTemplate(() =>
         {
           return new StackLayout()
           {
             Children =
             {
               new Label().Bold()
               .CenterHorizontal()
               .Bindv2(static (Country c) => c.Name),
               new StackLayout().Bindv2(BindableLayout.ItemsSourceProperty, static (Country c) => c.States)
                .ItemTemplate(new DataTemplate(() =>
                {
                 return new Label().Bindv2(static (State s) => s.Name);
                })),
            },
          };
        })),
      }
    };
  }
}

To view a live demo, please visit the C# Markup version of the eShop sample app, which operates fully on the updated Shared Toolkit. It is recommended to clone this GitHub repository and navigate to the src\ClientAppCS directory.

If you have any issues or features to suggest, please raise an issue with appropriate details here. Ideas are most welcome.

Once again, New Year greetings.

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.

Share this:

Related

By Vijay Anand E G

2 replies on “Data and Command Bindings – Made Easy with Shared Toolkit”

Discover more from Developer Thoughts