[CommandExtensions] What is the Default Property/Bound Action for the WebView2 with CommandExtensions?

[DevTKSS]

I would like to implement WebView2 from Uno specifics but I would not think its having a Click Event which is the normal default for CommandExtensions if I remember correctly🤔

What I could think of that would make sense for this, is that the Default could reasoned be the Source Property of it, because this could potentially simplify its implementation in Mvux Models maybe. And I think that the NavigationCompleted Event might be then a good choice for the trigger or the OnSourceChanged or similar?
But generally some information what I could expect as Property/Trigger would be a good start 👍

[Xiaoy312]

Generally, we put a single intuitive action linked to a control there. Usually, that would be click/selection/navigation, actions that are commonly used.

That said, not every click/selection/navigation handlers should be included here. But, you are free to create your own attached properties to associate a specific control events to an ICommand. Any event is fine, if you find the need for it in your project(s).

There is also https://github.com/microsoft/XamlBehaviors (uno fork) worth considering. It lets you bind pretty much to any event, albeit with a much more verbose syntax.

[DevTKSS]

this sample for wpf webView using commands looks really cool 🙃 but no clue where they did bound that Commands to the methods or where their command event args are defined. never understood bindings in wpf 😅
https://github.com/MicrosoftEdge/WebView2Samples/blob/main/SampleApps/WebView2WpfBrowser/MainWindow.xaml.cs
@Xiaoy312 maybe this could be something that could get implemented in the future, what do you think?

[Xiaoy312]

Here is how you would bind to NavigationCompleted: // you can find the full source here: toolkit1454.zip

internal static class WebView2Extensions
{
	#region DependencyProperty: NavigatedCommand

	public static DependencyProperty NavigatedCommandProperty { [DynamicDependency(nameof(GetNavigatedCommand))] get; } = DependencyProperty.RegisterAttached(
		"NavigatedCommand",
		typeof(ICommand),
		typeof(WebView2Extensions),
		new PropertyMetadata(default(ICommand), OnNavigatedCommandChanged));

	[DynamicDependency(nameof(SetNavigatedCommand))]
	public static ICommand GetNavigatedCommand(DependencyObject obj) => (ICommand)obj.GetValue(NavigatedCommandProperty);
	[DynamicDependency(nameof(GetNavigatedCommand))]
	public static void SetNavigatedCommand(DependencyObject obj, ICommand value) => obj.SetValue(NavigatedCommandProperty, value);

	#endregion


	private static void OnNavigatedCommandChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
	{
		if (sender is not WebView2 control) throw new InvalidOperationException("The attached property 'NavigatedCommand' can only be applied to a WebView2 control.");

		if (e.OldValue is { }) control.NavigationCompleted -= OnNavigationCompleted;
		if (e.NewValue is { }) control.NavigationCompleted += OnNavigationCompleted;
	}

	private static void OnNavigationCompleted(WebView2 sender, CoreWebView2NavigationCompletedEventArgs args)
	{
		var command = GetNavigatedCommand(sender);
		if (command?.CanExecute(args) == true)
		{
			command.Execute(args);
		}
	}
}

[DevTKSS]

@Xiaoy312 thanks!
so it would be needed to be a extension 🤔
I tryed to do it with UserControl that would be inheriting from WebView2, but it had the pitfall that I can of course not name it equal 😅
sampling from the Uno.Toolkit/Samples Project of CommandExtensionsPage and the ViewModelBase defined there I came up with this:

public sealed partial class WebView2C : WebView2
{
    public static readonly DependencyProperty IsNavigatingProperty =
        DependencyProperty.Register(
            nameof(IsNavigating),
            typeof(bool),
            typeof(WebView2C),
            new PropertyMetadata(false, (d, e) =>
            {
                if (d is WebView2C control && e.NewValue is bool newValue)
                {
                    control.IsNavigating = newValue;
                }
            })
        );
    public bool IsNavigating
    {
        get => (bool)GetValue(IsNavigatingProperty);
        set => SetValue(IsNavigatingProperty, value);
    }
    public ICommand GoForwardCommand { get; }
    public ICommand GoBackwardCommand { get; }
    public ICommand RefreshCommand { get; }
    public ICommand StopCommand { get; }
    public WebView2C()
    {
        DefaultStyleKey = typeof(WebView2C);
        
        GoForwardCommand = new Command(
            action: _ => GoForward(),
            canExecute: _ => CanGoForward && isWebView2Valid()
        );
        GoBackwardCommand = new Command(
            action: _ => GoBack(),
            canExecute: _ => CanGoBack && isWebView2Valid()
        );

        RefreshCommand = new Command(
            action: _ => Reload(),
            canExecute: _ => isWebView2Valid()
        );
        StopCommand = new Command(
            action: _ => this.CoreWebView2.Stop(),
            canExecute: _ => isWebView2Valid() && IsNavigating
        );

    }
    bool isWebView2Valid()
    {
        try
        {
            var test = this.CoreWebView2;
            return test is not null;
        }
        catch
        {
            return false;
        }
    }
}

[Microsoft.UI.Xaml.Data.Bindable]
public class Command : ICommand
{
    private readonly Action<object?>? _action;
    private readonly Func<object?, Task>? _actionTask;
    private readonly Func<object?, bool>? _canExecute;
    private bool _manualCanExecute = true;

    public bool ManualCanExecute
    {
        get => _manualCanExecute;
        set
        {
            _manualCanExecute = value;
            CanExecuteChanged?.Invoke(this, null);
        }
    }

    private object? _isExecuting = null;
    private static readonly object _isExecutingNull = new object();

    public Command(Action<object?> action, Func<object?, bool>? canExecute = null)
    {
        _action = action ?? throw new ArgumentNullException(nameof(action));
        _canExecute = canExecute;
    }

    public Command(Func<object?, Task> actionTask, Func<object?, bool>? canExecute = null)
    {
        _actionTask = actionTask ?? throw new ArgumentNullException(nameof(actionTask));
        _canExecute = canExecute;
    }

    public bool CanExecute(object? parameter)
    {
        var canExecuteParameter = parameter ?? _isExecutingNull;
        return (_isExecuting != canExecuteParameter)
            && (_canExecute?.Invoke(parameter) ?? true)
            && _manualCanExecute;
    }

    public async void Execute(object? parameter)
    {
        var isExecutingParameter = parameter ?? _isExecutingNull;
        if (_isExecuting == isExecutingParameter)
        {
            return;
        }
        try
        {
            _isExecuting = isExecutingParameter;
            CanExecuteChanged?.Invoke(this, null);
            if (_action != null)
            {
                _action(parameter);
            }
            else if (_actionTask != null)
            {
                await _actionTask(parameter);
            }
        }
        finally
        {
            _isExecuting = null;
            CanExecuteChanged?.Invoke(this, null);
        }
    }

    public event EventHandler? CanExecuteChanged;
}

but I thought already that it might not be the correct way if everybody would be required to define and copy the command definition. its not so new that there wouldnt have been somebody that had defined this already 🤔
your code doesnt use command instanciation at all then only use ICommand. is this somehow done already through the DependencyProperty Attribute? not sure if the e.g. Refresh, Stop or GoForward/Backward command does make sense as extension like that, but inheritance is no real option because of the naming 🤔

[Xiaoy312]

This is no the way.

An ICommand is what the View-Model exposes to the View, so that the View can signal the View-Model that some thing/event/action have been performed. You don't use the same pattern in reverse.
In order, to manipulate a view from the view-model, you typically have these options:

1. Use an attached property for the control, typically of bool type, where on property changed when true, you invoke some method on the control. And, then reset the value to false, so the view-model can invoke this again later, if needed.
2. For more complex setup, like yours here, define a proxy class for the control, which contains the relevant states(navigating, response-code, navigation-stack-history) and methods that can be invoked (refresh, go-back, go-forward...). Use attached property to bind this proxy to the control.
3. forget about mvvm best practice, and just pass the webview directly to the vm (practically the same as no2, but without the hassle)

[DevTKSS]

@Xiaoy312 hm okay 🤔 I tried yesterday to make two buttons bind with IsEnabled to a field in my Codebehind as simplest (so not even my vm or model) and also by making it a property, as you suggested of type bool.
That was meant to be updated on each event NavigationStarted and the opposite completed event. 🤔 Normally I would then assume thats totally fine to x:Bind to since thats essentially in the UI layer in the same class definition, isnt it?
My try has been to bind the "ReloadButton" with its Click Method to execute WebView.Reload() (since == is linted as not allowed in x:Bind xaml syntax) with this:
IsEnabled="{x:Bind isWebViewNavigating.Equals(x:False),Mode=OneWay}"
And one for the StopButton with exactly the same just with x:True meant to execute the Stop Action on the CoreWebView2.
Can you tell me if I maybe need just for this task such DependencyProperty? Normally that should not be required in my opinion 😅 but the IsEnabled state of the both buttons never changed 😳

I tryed then also to copy over my definition of the WebView2C of that DependencyProperty you seen for the IsNavigating just into my Page Codebehind and its a Partial sealed Class just like the control definition has been, which should be fine from that, but it was somehow linting that the bool Property to that dep property would not be found but as said exactly the same was fine in the userControl definition!

Could copy over the exact code later this day if I am back on my computer, but from the binding I would guess that would be absolutely fine without dependency properties at all🤔