Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can you provide examples of using Fluent Databinding in iOS and OSX platforms


Can you provide examples of using Fluent Databinding in iOS and OSX platforms


Fluent databinding in iOS and OSX platforms, particularly with MvvmCross, allows developers to create robust and maintainable applications by connecting view properties to view model properties using C# code. Here are some detailed examples and explanations of how to use fluent databinding in these platforms:

Basic Fluent Databinding

In iOS, fluent databinding is commonly used because the XIB format is not easily human-editable like XML in Android or XAML in Windows. Here's how you can bind a `UILabel` to a view model property:

csharp
public override void ViewDidLoad()
{
    base.ViewDidLoad();

    var set = CreateBindingSet();

    // Binding a Label's Text property to the ViewModel's Tip property
    set.Bind(TipLabel).To(vm => vm.Tip);

    // Binding a TextField's Text property to the ViewModel's SubTotal property
    set.Bind(SubTotalTextField).To(vm => vm.SubTotal);

    // Binding a Slider's Value property to the ViewModel's Generosity property
    set.Bind(GenerositySlider).To(vm => vm.Generosity);

    set.Apply();
}

In this example, `TipLabel`, `SubTotalTextField`, and `GenerositySlider` are UI components in your view, and `vm.Tip`, `vm.SubTotal`, and `vm.Generosity` are properties in your view model.

Specifying the View Property

If you want to specify a different property on the view (other than the default), you can use the `For` method:

csharp
// Binding a Label's Text property explicitly
set.Bind(TipLabel).For(v => v.Text).To(vm => vm.Tip);

Using Value Converters

Value converters are useful when you need to convert data between the view and the view model. For example, if your view model has an integer property but your view requires a float, you can use a converter:

csharp
// Example of a two-way converter
public class IntToFloatConverter : IMvxValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (float)(int)value / 100;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)((float)value * 100);
    }
}

Then, you can use this converter in your binding:

csharp
// Binding with a converter
set.Bind(GenerositySlider).To(vm => vm.Generosity).WithConversion(new IntToFloatConverter());

However, MvvmCross typically registers converters by convention or reflection, so you might need to register it manually or use a named converter if available.

Binding Modes

You can specify the binding mode (e.g., one-way or two-way) using methods like `OneWay()` or `TwoWay()`:

csharp
// One-way binding
set.Bind(TipLabel).To(vm => vm.Tip).OneWay();

// Two-way binding
set.Bind(SubTotalTextField).To(vm => vm.SubTotal).TwoWay();

Conclusion

Fluent databinding in iOS and OSX platforms with MvvmCross provides a flexible and powerful way to manage data synchronization between views and view models. It allows for easy setup of bindings, use of converters for data transformation, and specification of binding modes to control data flow direction.

Citations:
[1] https://yanxiaodi.gitbook.io/xamarin-mvvmcross-handbook/using-mvvmcross-to-create-your-first-xamarin-app/creating-the-ios-project/understanding-the-data-binding-syntax
[2] https://stackoverflow.com/questions/19712103/fluent-binding-and-conversions
[3] https://www.mvvmcross.com/documentation/tutorials/tipcalc/a-xamarinios-ui-project
[4] https://www.mvvmcross.com/documentation/fundamentals/data-binding
[5] https://crosscuttingconcerns.com/MvvmCross-Fluent-Databinding
[6] https://docs.unity3d.com/2023.2/Documentation/Manual/UIE-data-binding.html
[7] https://tvc-16.science/xamarin-binding.html
[8] https://github.com/microsoft/fluentui-blazor/issues/1094
[9] https://www.reddit.com/r/dotnetMAUI/comments/10jeuue/data_binding_not_working_correctly_for_fluent_ui/