WebView Navigated Event .NET MAUI using CommunityToolkit.MVVM and EventToCommand

Question

I am using [RelayCommand] for handling the navigated event of WebView in .NET MAUI.

async void Navigated(WebNavigatedEventArgs args)

I have bound it in my XAML, using

<toolkit:EventToCommandBehavior
                EventName="Navigated"
                Command="{Binding NavigatedCommand}" />

The command is firing, the arguments are null. Am I missing something?

Edit: I want to clarify this a bit.

The command is called correctly, when the event is raised. The arguments in that command (WebNavigatedEventArgs args) are null.

If this is used as event in the page, there isn't any problem. The arguments hold the response and it is correct.

I am using CommunityToolkit.Maui Version 1.2.0. And CommunityToolkit.MVVM Version 8.0.0.

Edit2: After testing on another machine, the same code runs correctly and the arguments are passed to the command. (Dependency 6.0.400)

After updating it to 6.0.486 as well, the command parameters became null.

Answer 1

For anyone who is still looking for an answer on this one, the Community Toolkit already has a generic implementation of how to pass the event args to a command. Look here.

Answer 2

the arguments are null

What does this mean? I have done a sample and it worked well.

The xaml:

<VerticalStackLayout>
    <WebView HeightRequest="700" Source="">
        <WebView.Behaviors>
            <toolkit:EventToCommandBehavior 
                EventName="Navigated" 
                Command="{Binding IncrementCounterCommand}"/>
        </WebView.Behaviors>
    </WebView>
    <Label Text="{Binding Counter}" HeightRequest="50" BackgroundColor="Red" TextColor="Green" FontSize="Large"/>
</VerticalStackLayout>

The viewmodel:

 public class MyViewModel : ObservableObject
{
    public MyViewModel()
    {
        IncrementCounterCommand = new RelayCommand(IncrementCounter);
    }

    private int counter;

    public int Counter
    {
        get => counter;
        private set => SetProperty(ref counter, value);
    }

    public ICommand IncrementCounterCommand { get; }

    private void IncrementCounter() => Counter++;
}

Or you want to add a navigated event in the page.cs, you can try:

In the xaml:

 <VerticalStackLayout>
    <WebView Navigated="WebView_Navigated" HeightRequest="700" Source=""/>  
    <Label Text="{Binding Counter}" HeightRequest="50" BackgroundColor="Red" TextColor="Green" FontSize="Large"/>
</VerticalStackLayout>

In the page.cs:

private void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    //do something
}

In addition, I also tried use them together and found that the navigeted event will execute at first, then the command will execute after it.

Update how to pass the WebNavigatedEventArgs into the view model

In the view model:

 public class MyViewModel : ObservableObject
{
    public WebNavigatedEventArgs webNavigatedEventArgs;
    public MyViewModel()
    {
        IncrementCounterCommand = new RelayCommand(IncrementCounter);
    }
    public ICommand IncrementCounterCommand { get; }
    private void IncrementCounter() => Navigated(webNavigatedEventArgs);
    private async void Navigated(WebNavigatedEventArgs arg)
    {

    }
}

In the page.cs:

private void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    var viewmodel = (MyViewModel)this.BindingContext;
    viewmodel.webNavigatedEventArgs = e;
}

In the xaml:

 <WebView Navigated="WebView_Navigated" HeightRequest="700" Source=">
        <WebView.Behaviors>
            <toolkit:EventToCommandBehavior 
                EventName="Navigated" 
                Command="{Binding IncrementCounterCommand}"/>
        </WebView.Behaviors>
    </WebView>

But I really don't suggest you do so.