feat: add key handling.

demo/Ursa.Demo/Pages/ImageViewerDemo.axaml

@@ -8,6 +8,10 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <SolidColorBrush x:Key="MaskBackground" Opacity="0.2" Color="Red" />
+        <SolidColorBrush x:Key="MaskBorder" Color="Red" />
+    </UserControl.Resources>
     <StackPanel>
         <u:ImageViewer
             Name="viewer"
@@ -15,16 +19,38 @@
             Height="300"
             Source="../Assets/WORLD.png">
             <u:ImageViewer.Overlayer>
+                <Grid
+                    HorizontalAlignment="Stretch"
+                    ColumnDefinitions="*, Auto, *"
+                    IsVisible="{Binding #maskSwitch.IsChecked}">
+                    <Border
+                        Grid.Column="0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{StaticResource MaskBackground}"
+                        BorderBrush="{StaticResource MaskBorder}"
+                        BorderThickness="0,0,1,0"
+                        IsHitTestVisible="False" />
                     <Rectangle
+                        Grid.Column="1"
+                        Width="150"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Fill="Transparent"
-                    IsHitTestVisible="False"
+                        IsHitTestVisible="False" />
-                    Opacity="0.2" />
+                    <Border
+                        Grid.Column="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{StaticResource MaskBackground}"
+                        BorderBrush="{StaticResource MaskBorder}"
+                        BorderThickness="1,0,0,0"
+                        IsHitTestVisible="False" />
+                </Grid>
             </u:ImageViewer.Overlayer>
         </u:ImageViewer>
 
-        <Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, Auto">
+        <Grid ColumnDefinitions="Auto, Auto, *" RowDefinitions="Auto, Auto, Auto, Auto">
             <TextBlock
                 Grid.Row="0"
                 Grid.Column="0"
@@ -76,6 +102,16 @@
                 Grid.Row="2"
                 Grid.Column="2"
                 Text="{Binding #viewer.TranslateY, StringFormat=\{0:0.0\}}" />
+
+            <TextBlock
+                Grid.Row="3"
+                Grid.Column="0"
+                Text="Show Mask" />
+            <ToggleSwitch
+                Name="maskSwitch"
+                Grid.Row="3"
+                Grid.Column="1"
+                Theme="{DynamicResource SimpleToggleSwitch}" />
         </Grid>
     </StackPanel>
 </UserControl>

src/Ursa/Controls/ImageViewer/ImageViewer.cs

@@ -73,9 +73,28 @@ public class ImageViewer: TemplatedControl
         set => SetAndRaise(TranslateYProperty, ref _translateY, value);
     }
 
+    public static readonly StyledProperty<double> SmallChangeProperty = AvaloniaProperty.Register<ImageViewer, double>(
+        nameof(SmallChange), defaultValue: 1);
+
+    public double SmallChange
+    {
+        get => GetValue(SmallChangeProperty);
+        set => SetValue(SmallChangeProperty, value);
+    }
+
+    public static readonly StyledProperty<double> LargeChangeProperty = AvaloniaProperty.Register<ImageViewer, double>(
+        nameof(LargeChange), defaultValue: 10);
+
+    public double LargeChange
+    {
+        get => GetValue(LargeChangeProperty);
+        set => SetValue(LargeChangeProperty, value);
+    }
+    
 
     static ImageViewer()
     {
+        FocusableProperty.OverrideDefaultValue<ImageViewer>(true);
         OverlayerProperty.Changed.AddClassHandler<ImageViewer>((o, e) => o.OnOverlayerChanged(e));
         SourceProperty.Changed.AddClassHandler<ImageViewer>((o, e) => o.OnSourceChanged(e));
         TranslateXProperty.Changed.AddClassHandler<ImageViewer>((o,e)=>o.OnTranslateXChanged(e));
@@ -201,4 +220,25 @@ public class ImageViewer: TemplatedControl
         PseudoClasses.Set(PC_Moving, false);
         _moving = false;
     }
+
+    protected override void OnKeyDown(KeyEventArgs e)
+    {
+        double step = e.KeyModifiers.HasFlag(KeyModifiers.Control) ? LargeChange : SmallChange;
+        switch (e.Key)
+        {
+            case Key.Left:
+                TranslateX -= step;
+                break;
+            case Key.Right:
+                TranslateX += step;
+                break;
+            case Key.Up:
+                TranslateY -= step;
+                break;
+            case Key.Down:
+                TranslateY += step;
+                break;
+        }
+        base.OnKeyDown(e);
+    }
 }