How to bind MVVMCross with Markup for C#

Question

I'm trying to use the C# markup extensions from the Xamarin Community Toolkit to create Xamarin.Forms views but would like to use MvvmCross to bind the views.

I have a working solution for a MvxContentPage but I'm not sure that calling Bind everytime the ViewModel is set is the correct approach. Is there a better place?

Here is my "working" ContentPage

[MvxTabbedPagePresentation(WrapInNavigationPage = true, Title = "Equipment")]
    public sealed class EquipmentPage : MvxContentPage<EquipmentViewModel>
    {
        private ListView _listView;

        public EquipmentPage()
        {
            Build();
        }
        
        protected override void OnViewModelSet()
        {
            base.OnViewModelSet();
            Bind();
        }

        private void Build()
        {
            //On<iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Always);  
            // Xamarin.Forms.DebugRainbows.DebugRainbow.SetShowColors(this, true);
            Visual = VisualMarker.Material;
            Content = EquipmentList.Assign(out _listView);
        }

        private void Bind()
        {
            var set = CreateBindingSet();
            set.Bind(_listView).For(v => v.IsRefreshing)
                .To(vm => vm.IsRefreshing);
            set.Bind(_listView).For(v => v.RefreshCommand)
                .To(nameof(ViewModel.LoadData));
            set.Bind(_listView).For(v => v.ItemsSource)
                .To(vm => vm.Equipment);
            set.Apply();
        }
        
        private ListView EquipmentList => new ListView(ListViewCachingStrategy.RecycleElement)
        {
            // RowHeight = 100,
            HasUnevenRows = true,
            IsPullToRefreshEnabled = true,
            ItemTemplate = new DataTemplate(() => new EquipmentViewCell())
        };
    }

The next step is to bind a ViewCell for the ListView. I have not figured out how to make this one work. Must the bindingContext be a IMvxViewModel?

Here is my current ViewCell

public class EquipmentViewCell : MvxViewCell
    {
        private Label _nameLabel, _modelLabel, _typeLabel;
        
        public EquipmentViewCell()
        {
            Build();
        }
        
        enum EquipmentRow
        {
            Top,
            Bottom
        }

        enum EquipmentColumn
        {
            Left,
            Right
        }
        
        private void Build()
        {
            View = new Grid
            {
                RowDefinitions = GridRowsColumns.Rows.Define(
                    (EquipmentRow.Top, GridLength.Auto),
                    (EquipmentRow.Bottom, GridLength.Auto)),

                ColumnDefinitions = GridRowsColumns.Columns.Define(
                    (EquipmentColumn.Left, GridLength.Star),
                    (EquipmentColumn.Right, GridLength.Auto)),

                Children =
                {
                    new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Children =
                        {
                            new Label
                                {
                                    LineBreakMode = LineBreakMode.TailTruncation
                                }
                                .FontSize(20).Bold()
                                .StartExpand()
                                .Bind(nameof(EquipmentDto.Name))
                                .Assign(out _nameLabel),

                            new PancakeView
                                {
                                    CornerRadius = new CornerRadius(8),
                                    Content = new Label
                                        {
                                            TextColor = Color.White,
                                            LineBreakMode = LineBreakMode.TailTruncation
                                        }.FontSize(16)
                                        .Bind(convert: (EquipmentDto x) =>
                                        {
                                            var converter = new EquipmentStatusValueConverter();
                                            return converter.Convert(x, typeof(string), null, null);
                                        })
                                }
                                .Padding(new Thickness(8, 2, 8, 2))
                                .End()
                                .Bind(VisualElement.BackgroundColorProperty, convert: (EquipmentDto x) =>
                                {
                                    var converter = new EquipmentStatusColorValueConverter();
                                    return converter.Convert(x, typeof(Color), null, null);
                                }),
                        }
                    }.Row(EquipmentRow.Top).ColumnSpan(GridRowsColumns.All<EquipmentColumn>()),

                    new Label
                        {
                            LineBreakMode = LineBreakMode.TailTruncation,
                            TextColor = ColorPalette.SecondaryText
                        }.FontSize(16)
                        .Row(EquipmentRow.Bottom).Column(EquipmentColumn.Left)
                        .Bind(nameof(EquipmentDto.Model))
                        .Assign(out _modelLabel),

                    new Label
                        {
                            LineBreakMode = LineBreakMode.TailTruncation,
                            HorizontalTextAlignment = TextAlignment.End,
                            TextColor = ColorPalette.SecondaryText
                        }.FontSize(16)
                        .Row(EquipmentRow.Bottom).Column(EquipmentColumn.Right)
                        .Bind(nameof(EquipmentDto.Type.Name))
                        .Assign(out _typeLabel),
                }
            }.Padding(new Thickness(16, 8, 16, 8));
        }

        private void Bind()
        {
            var set = this.CreateBindingSet<EquipmentViewCell, EquipmentDto>();
            set.Bind(_nameLabel).To(vm => vm.Name);
            set.Bind(_typeLabel).To(vm => vm.Type.Name);
            set.Bind(_modelLabel).To(vm => vm.Type);
            set.Apply();
        }
    }

Am I binding at the correct time? How do I bind the ViewCells?

Hackmodford Hackmodford · Accepted Answer · 2021-04-10T20:17:02

The current approach that is working.

MvxContentPage : Use OnViewModelChanged to trigger a Bind() function.

MvxViewCell : Use OnBindingContextChanged to trigger a Bind() function.

I'm also adding some logic to prevent binding if it has already been done.

private void Bind()
{
    if (_didBind) return;
    _didBind = true;

    var set = CreateBindingSet();
    ...
    set.Apply();
}

If this is incorrect please let me know.

Update: This is not working for the ViewCell. Items are now appearing in the wrong cells. :(

How to bind MVVMCross with Markup for C#

1 Answers