WPF XAML Grid- KeyBinding doesn't seem to work

Question

I am trying to add the functionality to allow the user to 'zoom in' on a web page displayed in a ChromiumWebBrowser on the GUI of my WPF application, by using the keyboard.

I have the following function in the code-behind for my XAML:

private void zoomInExecuted(object sender, ExecutedRoutedEventArgs e)
    {
        Console.WriteLine("'zoomInExecuted() called. ");
        browser.ZoomLevel++;
    } 

To enable this function to be called, I have added the following <Grid.InputBindings> tags to the <Grid> that I'm using to display the ChromiumWebBrowser :

 <Grid x:Name="grdBrowserHost" MinHeight="900" Height="Auto" MinWidth="1205" Width="Auto" Margin="5,0,0,0" DockPanel.Dock="Bottom" Grid.ColumnSpan="1" >
    <Grid.InputBindings>
        <KeyBinding Key="Add" Command="{Binding Path=zoomInExecuted}"></KeyBinding>
     </Grid.InputBindings>
    ...
</Grid>

As I understand, this should mean that the zoomInExecuted(...) function should be called when the + button is pressed on the keyboard, when the Grid displaying the browser has focus.

But, when I run my application, and click inside the browser to ensure it has focus, if I then press '+' on the keyboard, nothing happens, and I'm not even seeing the debug from my zoomInExecuted() function in the console, so it seems that pressing the '+' key is not actually calling that function. Have I done the KeyBinding correctly? Is there something I'm missing from my code here?

Edit

I have tried using an ICommand , as suggested in the answers:

public ICommand zoomInCommand
    {
        get
        {
            _zoomIn = new DelegateCommand(zoomInExecuted()); //CallZoomIn());
            return zoomIn;
        }
    }

and calling this in the KeyBinding in the XAML:

<KeyBinding Key="Add" Command="{Binding Path=zoomInCommand}"></KeyBinding>

but I'm getting a compile error in the C# which says:

The type or namespace name 'DelegateCommand' could not be found (are you missing a using directive or an assembly reference?)

Do I need to add a particular reference or using statement in order to be able to use this?

Edit

I have also tried adding the <KeyBinding ...> tags to both the <Grid> that's holding the browser object, and the browser itself in the XAML, ie

<Grid x:Name="grdBrowserHost" MinHeight="900" Height="Auto" MinWidth="1205" Width="Auto" Margin="5,0,0,0" DockPanel.Dock="Bottom" Grid.ColumnSpan="1" >
    <Grid.InputBindings>
        <KeyBinding Modifiers="Ctrl" Key="Add" Command="{Binding zoomInExecuted}"></KeyBinding>
    </Grid.InputBindings>
    ...
    <cefSharp:ChromiumWebBrowser Name="browser" Height="Auto" Width="Auto" Grid.Row="0" Address="https://web.riviam.com" Margin="25,35,-0.2,0" >
        <cefSharp:ChromiumWebBrowser.InputBindings>
            <KeyBinding Modifiers="Ctrl" Key="Add" Command="{Binding zoomInExecuted}"></KeyBinding>
        </cefSharp:ChromiumWebBrowser.InputBindings>
    </cefSharp:ChromiumWebBrowser>

But the zoomInExecuted(...) function never appears to be called (I never see the debug from this function displayed in the console)- it seems that pressing CTRL+ on the keyboard is never registered by the application...

Is there an EventHandler / KeyboardListener or something similar that I need to add to the application?

Answer 1

You cannot bind to a function, you must use a Command :

<KeyBinding Key="Add" Command="{Binding ZoomInCommand}"></KeyBinding>

public ICommand ZoomInCommand
{
    get
    {
        _zoomIn = new DelegateCommand(CallZoomIn());
        return zoomIn;
    }
}

DelegateCommand is part of Microsoft.Practices.Prism . You can download it here

Most MVVM frameworks include it also.

Answer 2

Missing the Icommand to method linking part. Else all is correct. To execute method you need to have property of type ICommand. And then use that property to invoke the method you want. Please see the link. There is relay command created which can be used as generic command in which you can pass your method which you want to execute

Binding Button click to a method

Answer 3

You cant bind a function. You need to create an ICommand for the purpose of Binding.

Assuming that you have Implemented MVVM Pattern across the app , a RelayCommand needs to be implemented.