Xamarin Forms FlyoutPage wtih Binding Problems-CodePudding

I am making a Xamarin Forms app with FlyoutPage (https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage).

I made all the pages and menu buttons etc.

Now i wanted to use binding in the menu but can't find a way.

            <x:Array Type="{x:Type local:FlyoutPageItem}">
                <local:FlyoutPageItem Title="{Binding NewContacts}" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                <local:FlyoutPageItem Title="{Binding NewTodo}" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                <local:FlyoutPageItem Title="{Binding NewReminder}" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
            </x:Array>

But always get error: XamlC error XFC0009: No property, BindableProperty, or event found for "Title", or mismatching type between value and property.

Any help? Thanks in advance.

CodePudding user response：

The problem is happening because you're trying to bind a property with another property , this is incorrect.

Normally we create binding between Target and source .

The target is the object (and property, defined as BindableProperty) on which the data binding is set.

The source is the object (and property) referenced by the data binding.

However here you are trying to bind source to another source ,this breaks the principle of mvvm binding .

As a ugly workaround you can define FlyoutPageItem.Title as below

public static readonly BindableProperty TitleProperty = BindableProperty.Create("Title", typeof(string), typeof(FlyoutPageItem), "");
public string Title
{
    get { return (string)GetValue(TitleProperty); }
    set { SetValue(TitleProperty, value); }
}

And change the binding path inside xaml

 Title="Menu"
 x:Name="Self">

<x:Array Type="{x:Type res:FlyoutPageItem}">
    <res:FlyoutPageItem Title="{Binding Source={x:Reference Self.AnyString} ,Path=BindingContext}" IconSource="Icons/door_light.png" TargetType="{x:Type views:DoorPage}" />

But this is not recommended.

Refer to

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/basic-bindings.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/bindable-properties

CodePudding user response：

Solved. Please tell me if this is politicaly correct.

ViewModel:

 public string CompanyTitle => "CompanyTitleString";
 public string ContactsTitle => "ContactsTitleString";
 public string AboutTitle => "AboutTitleString";

    public List<FlyoutPageItem> flyoutPageItems
    {
        get
        {
            return new List<FlyoutPageItem>
                {
                    new FlyoutPageItem {
                        Title=CompanyTitle,
                        IconSource="company_light.png",
                        TargetType= typeof(CompanyPage)
                    },
                    new FlyoutPageItem {
                        Title=ContactsTitle,
                        IconSource="contacts_light.png",
                        TargetType= typeof(ContactsPage)
                    },
                    new FlyoutPageItem {
                        Title=AboutTitle,
                        IconSource="about_light.png",
                        TargetType= typeof(AboutPage)
                    }
                };
        }
    }

XAML:

        <ListView x:Name="listView" x:FieldModifier="public" SeparatorVisibility="None" ItemsSource="{Binding flyoutPageItems}">

EDIT: Updated the GitHub