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, i.e.

<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?

`Command="{Binding Path=zoomInExecuted}"` means to bind the Command property to a property `zoomInExecuted` of type `ICommand`, not to a method as you are trying to do. Read up on command bindings. — Clemens, Jun 08 '16 at 11:22
You need code that attaches to an event and executes it, built as an ICommand, Take a look at the answers here: http://stackoverflow.com/questions/939388/binding-commands-to-events — Kamil Solecki, Jun 08 '16 at 11:28
DelegateCommand is one of the class in the prism MVVM Implementation. I don't know if there are others but I have been using Prism from Microsoft for MVVM implementation. Which tool are you using for MVVM. You can try using the prism avaliable from nuget package manager here: https://www.nuget.org/packages/Prism.Wpf/ — Surendra Shrestha, Jun 01 '18 at 16:48

Natxo · Answer 1 · 2016-06-08T14:43:39.793

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.

edited Jun 08 '16 at 14:43

answered Jun 08 '16 at 11:37

Natxo

2,917
1
24
36

Hi, thanks for your answer. I have added the `command` you suggested to my C#, but I get a compile error which says that `The type or namespace name 'DelegateCommand' could not be found (are you missing a using directive or assembly reference?)`. Is there something that I need to add a 'reference' to in order to be able to use it, or do I need a particular `using` statement? – Noble-Surfer Jun 08 '16 at 12:27
@someone2088, i added some explanation in the answer – Natxo Jun 08 '16 at 14:43

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

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

edited May 23 '17 at 12:00

Community

1
1

answered Jun 08 '16 at 11:27

Mahesh Malpani

1,782
16
27

score 0 · Answer 3 · answered Jun 08 '16 at 11:49

0

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.

answered Jun 08 '16 at 11:49

Apoorv

2,023
1
19
42

WPF XAML Grid- KeyBinding doesn't seem to work

3 Answers3