CODEWITHSUNDEEP
maui
greatgrayowl1
greatgrayowl1

Reputation: 51

MAUI AppShell Cannot Bind to FlyoutItemIsVisible

I need to dynamically show/hide shell content in the menu system. There is a bindable property called "FlyoutItemIsVisible" inherited from BaseShellItem.

Microsoft Learn

Binding to it results in this error: Error XFC0009 No property, BindableProperty, or event found for "FlyoutItemIsVisible", or mismatching type between value and property. It should be noted this property can be set to "True" or "False".

VS2022 Error Message

My binding context is set properly because I am setting the text value of the Shell Item from the same View Model.

The Shell content should bind and show/hide based on the value of the item it is bound to. I am not sure what is wrong, why it won't work.

I have tried it in VS2022 with dot net 7 and VS2022 Pre with the latest dot net 8 RC.

View

<Shell
    x:Class="AppShell.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppShell"
    Shell.FlyoutBehavior="Flyout"
    Title="AppShell">

    <ShellContent
        Title="{Binding HomeText}"
        FlyoutItemIsVisible="{Binding IsVisible}"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

Code Behind

public AppShell(AppShellViewModel vm)
{
    BindingContext = vm;
    InitializeComponent();
}

ViewModel

namespace AppShell
{
    public partial class AppShellViewModel : ObservableObject
    {
        public AppShellViewModel()
        {
            HomeText = "Home";
            IsVisible = true;
        }

        [ObservableProperty]
        bool isVisible;

        [ObservableProperty]
        string homeText;
    }
}

A small demo of the project can be found here: https://github.com/cmhofmeister/mauiappshell

Upvotes: 1

Views: 733

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10158

I think it is related with FlyoutItemIsVisible should accept a "BindableObject" (i.e. it should be data bound).

Error XFC0009 No property, BindableProperty, or event found for "FlyoutItemIsVisible", or mismatching type between value and property.

The above error indicates that FlyoutItemIsVisible is not a bindable property so you can't use data binding.

However, you can still enclose the ShellContent with Tab inside the FlyoutItem and then use IsVisible to show/hide based on the value of the item it is bound to like below:


<Shell
    x:Class="AppShell.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppShell"
    Shell.FlyoutBehavior="Flyout"
    Title="AppShell">

    <FlyoutItem   Title="{Binding HomeText}" IsVisible="{Binding IsVisible}"> 
        <Tab>
            <ShellContent
              ContentTemplate="{DataTemplate local:MainPage}"
              Route="MainPage" />
        </Tab>
    </FlyoutItem>

</Shell>

Upvotes: 1

Related Questions