Reusable ContentView in Xamarin forms

Question

I have created a contentview separately, so that I can reuse the same in different ContentPage.

Here is my ContentView.XAML

<?xml version="1.0" encoding="UTF-8"?> <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:custom="clr-namespace:MyMXLibrary.Helpers"
         x:Class="MyMXLibrary.Views.AlertView" 
         x:Name="this">
<ContentView.Content>
    <Frame VerticalOptions="Center" HorizontalOptions="Center">
        <StackLayout>
            <Label Text="{Binding Source={x:Reference this}, Path=Heading}"/>
            <Label Text="{Binding Source={x:Reference this}, Path=Message}"/><Label Text="Cancel">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding CancelCommand}" />
                </Label.GestureRecognizers>
            </Label>
            <Label Text="Ok">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding ProceedCommand}" />
                </Label.GestureRecognizers>
            </Label>
        </StackLayout>
    </Frame>
</ContentView.Content></ContentView>

Here is my ContentView.Xaml.cs

 public partial class AlertView : ContentView
{
    public static readonly BindableProperty HeadingTextProperty = BindableProperty.Create(nameof(Heading), typeof(string), typeof(Label));
     public static readonly BindableProperty MessageTextProperty = BindableProperty.Create(nameof(Message), typeof(string), typeof(Label));

    public string Heading { get { return (string)GetValue(HeadingTextProperty); } set { SetValue(HeadingTextProperty, value); } }
    public string Message { get { return (string)GetValue(MessageTextProperty); } set { SetValue(MessageTextProperty, value); } }

    public AlertView()
    {
        InitializeComponent();
    }      
}

Here is my sample ContentPage.Xaml where I'm planning to reuse the above created content view.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:alert="clr-namespace:MyMXLibrary.Views"
         x:Class="MyMXLibrary.Views.MyPage"
         Title="MyPage"><ContentPage.Content><ContentView >
      <alert:AlertView Heading="Test" Message="Sample" ></alert:AlertView></ContentView></ContentPage.Content></ContentPage>

it's working fine if I use a static value. But instead, if I bind the value

<alert:AlertView Heading="Test" Message="{Binding sample}" ></alert:AlertView>

I'm getting error

No property, bindable property, or event found for 'Message', or mismatching type between value and property

How can I do the Binding here. Since my value is unknown I cannot assign a stactic value in XAML, I have to go with Binding only. What Should I do here to bind the value, please help me.

what is the type of the "sample" property you're binding to? — Jason

jgoldberger - MSFT jgoldberger - MSFT · Accepted Answer · 2018-10-30T00:42:33

I think you have the BindableProperty creation code wrong. You have:

public static readonly BindableProperty HeadingTextProperty = 
    BindableProperty.Create(nameof(Heading), typeof(string), typeof(Label));
public static readonly BindableProperty MessageTextProperty = 
    BindableProperty.Create(nameof(Message), typeof(string), typeof(Label));

So the third parameter is typeof(Label) but it should be the type of the class that will have the property, in this case AlertView. Also by convention (not sure if required) the bindable property name will be the property name + "Property". You have property name + "TextProperty". So try:

public static readonly BindableProperty HeadingProperty = 
    BindableProperty.Create("Heading", typeof(string), typeof(AlertView));
public static readonly BindableProperty MessageProperty = 
    BindableProperty.Create("Message", typeof(string), typeof(AlertView));

See this for more info. You will see that the 3rd parameter of the BindableProperty.Create method is the declaringType which should be the type that is defining the bindable property.

sample project: https://www.dropbox.com/s/j7kpehpt8htrf8k/TestAlertView.zip?dl=0

Reusable ContentView in Xamarin forms

1 Answers