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 Bind methods are suffixed with v2, like Bindv2. Statically typed, hence better control as it allows to identify errors during compilation itself. Also, the default binding behavior of the View is retained, like Entry works on the two-way binding as it allows editing. This can be modified with the BindingMode parameter.

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

The package is on top of Xamarin.Forms v5.0.0.2612 and it is targeting .NET Standard 2.0, of course. Supported on all versions of .NET MAUI. Just refer to the corresponding NuGet package version.

dotnet add package VijayAnand.Toolkit.Markup --version 3.2.0

.NET 8 – v3.2.0
.NET 7 – v2.2.0
.NET 6 – v1.2.0

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 see a live sample, check out the C# Markup version of the eShop sample App that fully runs on this updated Shared Toolkit. Clone this GitHub repository and in the src\ClientAppCS folder.

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 “Bindings made easy with Shared Toolkit”