MenuBar Command x:Bind / Binding does not work

[jarsulko]

Current behavior

Command bindings are not working properly in MenuBar>MenuBarItem>MenuFlyoutItem:

• (1) when using x:Bind the Commands are executed, but MenuFlyoutItem IsEnabled state is not updated according to CanExecute (or to be precise it is updated only once).
• (2) when using Binding the Commands are not working completely (nothing happends).

Command bindings are not working properly in Button>MenuFlyout>MenuFlyoutItem:

• (3) when using x:Bind the Commands are executed, but MenuFlyoutItem IsEnabled state is not updated according to CanExecute (or to be precise it is updated only once).
• (4) when using Binding everything works it should (including CanExecute).

The issue occurs in Skia.Wpf and Skia,Gtk (at least).
Tested also on Android: x:Bind works the same way, Binding is working correctly also in scenario (2).

Expected behavior

Command x:Bind and Binding works correctly in MenuBar>MenuBarItem>MenuFlyoutItem on Skia.Wpf and Skia.Gtk.

How to reproduce it (as minimally and precisely as possible)

MainPage.xaml (Page content):

<StackPanel>
    <TextBlock Text="MenuBar+MenuBarItem+MenuFlyoutItem" />
    <MenuBar>
        <MenuBarItem Title="x:Bind Commands">
            <MenuFlyoutItem Text="MenuItem1" Command="{x:Bind _viewModel.Item1Command, Mode=OneWay}" />
            <MenuFlyoutItem Text="MenuItem2" Command="{x:Bind _viewModel.Item2Command, Mode=OneWay}" />
        </MenuBarItem>
        <MenuBarItem Title="Binding Commands">
            <MenuFlyoutItem Text="MenuItem1" Command="{Binding Item1Command}" />
            <MenuFlyoutItem Text="MenuItem2" Command="{Binding Item2Command}" />
        </MenuBarItem>
    </MenuBar>
    <TextBlock Text="Button+MenuFlyout+MenuFlyoutItem:" />
    <StackPanel Orientation="Horizontal">
        <Button Content="x:Bind Commands">
            <Button.Flyout>
                <MenuFlyout Placement="Bottom">
                    <MenuFlyoutItem Text="MenuItem1" Command="{x:Bind _viewModel.Item1Command, Mode=OneWay}" />
                    <MenuFlyoutItem Text="MenuItem2" Command="{x:Bind _viewModel.Item2Command, Mode=OneWay}" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>
        <Button Content="Binding Commands">
            <Button.Flyout>
                <MenuFlyout Placement="Bottom">
                    <MenuFlyoutItem Text="MenuItem1" Command="{Binding Item1Command}" />
                    <MenuFlyoutItem Text="MenuItem2" Command="{Binding Item2Command}" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </StackPanel>
    <TextBlock Text="x:Bind:" />
    <TextBlock Text="{x:Bind _viewModel.State, Mode=OneWay}" />
    <TextBlock Text="Binding:" />
    <TextBlock Text="{Binding State}" />
</StackPanel>

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    MainPageViewModel _viewModel;
    public MainPage()
    {
        this.InitializeComponent();
        _viewModel = new MainPageViewModel();
        DataContext = _viewModel;
    }
}

MainPageViewModel.cs (using CommunityToolkit.Mvvm)

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

[INotifyPropertyChanged]
public partial class MainPageViewModel
{
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(Item1Command))]
    bool _canRunItem1 = true;

    [RelayCommand(CanExecute = nameof(CanRunItem1))]
    void Item1()
    {
        CanRunItem1 = false;
        CanRunItem2 = true;
        OnPropertyChanged(nameof(State));
    }

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(Item2Command))]
    bool _canRunItem2 = false;

    [RelayCommand(CanExecute = nameof(CanRunItem2))]
    void Item2()
    {
        CanRunItem2 = false;
        CanRunItem1 = true;
        OnPropertyChanged(nameof(State));
    }

    public string State => $"CanRunItem1:{CanRunItem1}\nCanRunItem2{CanRunItem2}";
}

Workaround

Can use scenario (4): Button>MenuFlyout>MenuFlyoutItem and Binding.

Works on UWP/WinUI

Yes

Environment

Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia

NuGet package version(s)

No response

Affected platforms

Android, Skia (WPF), Skia (GTK on Linux/macOS/Windows)

IDE

Visual Studio 2022

IDE version

17.4.1

Relevant plugins

No response

Anything else we need to know?

I would be happy also with any clue where can I look at to analyze the issue and probably help to fix that.
Additional topic that I have noticed is that MenuFlyouts (but also Flyouts) have vertical ScrollBars visible in Skia.

[jeromelaban]

Thanks for the report! This is indeed a curious behavior.

Could you attach all this in a sample repro app? Sometimes the behavior is related to the environment, and we want to get this part out of the way when reproducing what you're seeing.

[jarsulko]

VS solution attached.
MenuBarCommandBinding.zip

[jeromelaban]

Thanks, the repro helped!

Here's a wrap-up of three issues in the sample:

• The "CanExecute" state of commands are not updated properly on reload in MenuFlyoutItem (this issue)
• The DataContext is not propagated properly in flyouts (Recently raised in Flyout does not recieve DataContext correctly from attached element #10400)
• The popup's background is incorrectly rendered ([Skia.GTK] Controls are not rendered correctly if hardware acceleration is enabled #10484)