Binding a control in ContentView to properties in a ViewModel and reusing the ContentView for other pages

Question

How do I bind a property in ViewModel to a ContentView within a CollectionView in such way that I can reuse the ContentView for other pages as well?

Referencing the CollectionViews' binding context using its name works normally. When using a ContentView as a template for the items to display in it, I cannot reference its binding context so this doesn't work:

Works only for the specified ViewModel:

ContentPage

ContentView
How do I bind the text property of relatively, so I can re-use this ContentView on any other page with any other viewmodel as well?

ViewModel

using ...

namespace NewProject23.ViewModels;

public class ParentViewModel : BaseViewModel
{
    ...
    
    private string itemInParentViewModel = "Item in ParentViewModel";
    public string ItemInParentViewModel
    {
        get => itemInParentViewModel;
        set => SetProperty(ref itemInParentViewModel, value);
    }
    
    public ObservableRangeCollection Items { get; private set; } = new();
    
    ...
}

FreakyAli · Accepted Answer

I will try to add a basic example which you will obviously have to change based on your requirements but will help you do what you are looking for.

Let's create a TextViewCell and the XAML would look like this:

Notice how I am using Source with a reference for the current control that gives me access to some data I need and the data does not come from another Control or ViewModel but from itself.

public partial class TextViewCell : ContentView
{
    public TextViewCell()
    {
        InitializeComponent();
    }

    #region Trailing

    public static readonly BindableProperty TrailingTitleLabelTextProperty =
       BindableProperty.Create(
           nameof(TrailingTitleLabelText),
           typeof(string),
           typeof(TextViewCell),
           Label.TextProperty.DefaultValue
           );

    public string TrailingTitleLabelText
    {
        get => (string)GetValue(TrailingTitleLabelTextProperty);
        set => SetValue(TrailingTitleLabelTextProperty, value);
    }

    public static readonly BindableProperty TrailingTitleTextColorProperty =
        BindableProperty.Create(nameof(TrailingTitleTextColor), typeof(Color), typeof(TextViewCell), defaultValue: Colors.Black);

    public Color TrailingTitleTextColor
    {
        get => (Color)GetValue(TrailingTitleTextColorProperty);
        set => SetValue(TrailingTitleTextColorProperty, value);
    }

    public static readonly BindableProperty TrailingTitleLabelFontSizeProperty =
        BindableProperty.Create(
            nameof(TrailingTitleLabelFontSize),
            typeof(double),
            typeof(TextViewCell),
            Label.FontSizeProperty.DefaultValue);

    [TypeConverter(typeof(FontSizeConverter))]
    public double TrailingTitleLabelFontSize
    {
        get => (double)GetValue(TrailingTitleLabelFontSizeProperty);
        set => SetValue(TrailingTitleLabelFontSizeProperty, value);
    }

    public static readonly BindableProperty TrailingSubTitleLabelTextProperty =
        BindableProperty.Create(
            nameof(TrailingSubTitleLabelText),
            typeof(string),
            typeof(TextViewCell),
            Label.TextProperty.DefaultValue
        );

    public string TrailingSubTitleLabelText
    {
        get => (string)GetValue(TrailingSubTitleLabelTextProperty);
        set => SetValue(TrailingSubTitleLabelTextProperty, value);
    }

    public static readonly BindableProperty TrailingSubTitleLabelFontSizeProperty =
        BindableProperty.Create(
            nameof(TrailingSubTitleLabelFontSize),
            typeof(double),
            typeof(TextViewCell),
            Label.FontSizeProperty.DefaultValue);

    [TypeConverter(typeof(FontSizeConverter))]
    public double TrailingSubTitleLabelFontSize
    {
        get => (double)GetValue(TrailingSubTitleLabelFontSizeProperty);
        set => SetValue(TrailingSubTitleLabelFontSizeProperty, value);
    }

    public static readonly BindableProperty TrailingSubTitleTextColorProperty =
        BindableProperty.Create(nameof(TrailingSubTitleTextColor), typeof(Color), typeof(TextViewCell), defaultValue: Colors.Black);

    public Color TrailingSubTitleTextColor
    {
        get => (Color)GetValue(TrailingSubTitleTextColorProperty);
        set => SetValue(TrailingSubTitleTextColorProperty, value);
    }

    #endregion Trailing

    #region Leading

    public static readonly BindableProperty LeadingTitleLabelTextProperty =
       BindableProperty.Create(
           nameof(LeadingTitleLabelText),
           typeof(string),
           typeof(TextViewCell),
           Label.TextProperty.DefaultValue
           );

    public string LeadingTitleLabelText
    {
        get => (string)GetValue(LeadingTitleLabelTextProperty);
        set => SetValue(LeadingTitleLabelTextProperty, value);
    }

    public static readonly BindableProperty LeadingTitleTextColorProperty =
        BindableProperty.Create(nameof(LeadingTitleTextColor), typeof(Color), typeof(TextViewCell), defaultValue: Colors.Black);

    public Color LeadingTitleTextColor
    {
        get => (Color)GetValue(LeadingTitleTextColorProperty);
        set => SetValue(LeadingTitleTextColorProperty, value);
    }

    public static readonly BindableProperty LeadingTitleLabelFontSizeProperty =
        BindableProperty.Create(
            nameof(LeadingTitleLabelFontSize),
            typeof(double),
            typeof(TextViewCell),
            Label.FontSizeProperty.DefaultValue);

    [TypeConverter(typeof(FontSizeConverter))]
    public double LeadingTitleLabelFontSize
    {
        get => (double)GetValue(LeadingTitleLabelFontSizeProperty);
        set => SetValue(LeadingTitleLabelFontSizeProperty, value);
    }

    public static readonly BindableProperty LeadingSubTitleLabelTextProperty =
        BindableProperty.Create(
            nameof(LeadingSubTitleLabelText),
            typeof(string),
            typeof(TextViewCell),
            Label.TextProperty.DefaultValue
        );

    public string LeadingSubTitleLabelText
    {
        get => (string)GetValue(LeadingSubTitleLabelTextProperty);
        set => SetValue(LeadingSubTitleLabelTextProperty, value);
    }

    public static readonly BindableProperty LeadingSubTitleLabelFontSizeProperty =
        BindableProperty.Create(
            nameof(LeadingSubTitleLabelFontSize),
            typeof(double),
            typeof(TextViewCell),
            Label.FontSizeProperty.DefaultValue);

    [TypeConverter(typeof(FontSizeConverter))]
    public double LeadingSubTitleLabelFontSize
    {
        get => (double)GetValue(LeadingSubTitleLabelFontSizeProperty);
        set => SetValue(LeadingSubTitleLabelFontSizeProperty, value);
    }

    public static readonly BindableProperty LeadingSubTitleTextColorProperty =
        BindableProperty.Create(nameof(LeadingSubTitleTextColor), typeof(Color), typeof(TextViewCell), defaultValue: Colors.Black);

    public Color LeadingSubTitleTextColor
    {
        get => (Color)GetValue(LeadingSubTitleTextColorProperty);
        set => SetValue(LeadingSubTitleTextColorProperty, value);
    }

    #endregion Leading
}

And now all you need to do is whenever you need to use this you pass in the data that you expect and things and this will work as needed

Now you can use it either within a DataTemplate or on its own:

or

Binding a control in ContentView to properties in a ViewModel and reusing the ContentView for other pages

Answers (1)

Related Questions