Adding KeyBinding and MouseBinding

docs/concepts/input/binding-key-and-mouse.md

@@ -0,0 +1,104 @@
+---
+description: CONCEPTS - Input
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import KeyMouseScreenshot from '/img/reference/controls/input/binding-key-mouse-test.gif';
+
+# KeyBinding and MouseBinding 
+- This section explains how to place shortcut keys that often appear in business tools in various controls.
+- As an example, binding with double-click or the Enter key on a simple list box.
+- It also works for DataGrid.
+
+<Tabs
+  defaultValue="xaml"
+  values={[
+      { label: 'XAML', value: 'xaml', },
+      { label: 'CodeBehind', value: 'code-behind', },
+      { label: 'ViewModel', value: 'ViewModel', },
+  ]}
+>
+<TabItem value="xaml">
+
+```xml
+<UserControl ..>
+    <StackPanel>
+        <ListBox
+            DoubleTapped="ListBox_DoubleTapped"
+            ItemsSource="{Binding OperatingSystems}"
+            SelectedItem="{Binding OS}">
+            <ListBox.KeyBindings>
+                <!--  Enter  -->
+                <KeyBinding Command="{Binding PrintItem}" Gesture="Enter" />
+                <!--
+                    MouseBindings are not supported.
+                    Instead, handle it in the view's code-behind. (DoubleTapped event)
+                -->
+            </ListBox.KeyBindings>
+        </ListBox>
+        <TextBlock Text="{Binding Result}">
+            <TextBlock.ContextMenu>
+                <ContextMenu>
+                    <!--  Right Click  -->
+                    <MenuItem Command="{Binding Clear}" Header="Clear" />
+                </ContextMenu>
+            </TextBlock.ContextMenu>
+        </TextBlock>
+    </StackPanel>
+</UserControl>
+```
+
+</TabItem>
+<TabItem value="code-behind">
+
+```cs
+public partial class MainView : UserControl
+{
+    public MainView()
+    {
+        InitializeComponent();
+    }
+
+    private void ListBox_DoubleTapped(object? sender, Avalonia.Input.TappedEventArgs e)
+    {
+        if (DataContext is MainViewModel vm)
+        {
+            vm.PrintItem.Execute(null);
+        }
+    }
+}
+```
+</TabItem>  
+
+<TabItem value="ViewModel">
+
+```cs
+public class MainViewModel : ViewModelBase
+{
+    public List<string> OperatingSystems =>
+    [
+        "Windows",
+        "Linux",
+        "Mac",
+    ];
+    public string OS { get; set; } = string.Empty;
+
+    [Reactive]
+    public string Result { get; set; } = string.Empty;
+
+    public ICommand PrintItem { get; }
+    public ICommand Clear { get; }
+
+    public MainViewModel()
+    {
+        PrintItem = ReactiveCommand.Create(() => Result = OS);
+        Clear = ReactiveCommand.Create(() => Result = string.Empty);
+    }
+}
+```
+</TabItem>  
+</Tabs>
+
+<img src={KeyMouseScreenshot} alt="" />

docs/concepts/input/hotkeys.md

@@ -44,12 +44,6 @@ A Hotkey must have one [Key](http://reference.avaloniaui.net/api/Avalonia.Input/
     IsVisible="False" />
 
 <!--  These didn't work  -->
-<!--  Button.KeyBindings  -->
-<Button Command="{Binding CommandX}" Content="X">
-    <Button.KeyBindings>
-        <KeyBinding Gesture="Ctrl+1" />
-    </Button.KeyBindings>
-</Button>
 <!--  Alt+Number  -->
 <Button Command="{Binding CommandX}" Content="_1" />
 ```

sidebars.js

@@ -467,6 +467,7 @@ const sidebars = {
             'concepts/input/focus',
             'concepts/input/gestures',
             'concepts/input/hotkeys',
+            'concepts/input/binding-key-and-mouse',
           ],
         },
         'concepts/the-main-window',