Infinite canvas

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -286,7 +286,7 @@
       {
         "Name": "InfiniteCanvas",
         "Type": "InfiniteCanvasPage",
-        "About": "InfiniteCanvas is a canvas that supports Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data.",
+        "About": "InfiniteCanvas is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data.",
         "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas",
         "XamlCodeFile": "InfiniteCanvas.bind",
         "Icon": "/SamplePages/InfiniteCanvas/InfiniteCanvas.png",

Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.TextBox.cs

@@ -10,12 +10,13 @@
 // THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
 // ******************************************************************
 
+using System.Linq;
 using System.Text.RegularExpressions;
 using Windows.Foundation;
 using Windows.System;
-using Windows.UI;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
@@ -26,6 +27,18 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     public partial class InfiniteCanvas
     {
         private const int DefaultFontValue = 22;
+        private readonly string[] _allowedCommands =
+        {
+            "Shift",
+            "Escape",
+            "Delete",
+            "Back",
+            "Right",
+            "Up",
+            "Left",
+            "Down"
+        };
+
         private Point _lastInputPoint;
 
         private TextDrawable SelectedTextDrawable => _drawingSurfaceRenderer.GetSelectedTextDrawable();
@@ -47,7 +60,7 @@ private int TextFontSize
             }
         }
 
-        private void InkScrollViewer_PreviewKeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
+        private void InkScrollViewer_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
         {
             // fixing scroll viewer issue with text box when you hit UP/DOWN/Right/LEFT
             if (_canvasTextBox.Visibility != Visibility.Visible)
@@ -155,7 +168,7 @@ private void CanvasTextBox_TextChanged(object sender, string text)
             _drawingSurfaceRenderer.UpdateSelectedTextDrawable();
         }
 
-        private void InkScrollViewer_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
+        private void InkScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
         {
             if (_enableTextButton.IsChecked ?? false)
             {
@@ -201,5 +214,25 @@ private void ClearTextBoxValue()
             _drawingSurfaceRenderer.ResetSelectedTextDrawable();
             _canvasTextBox.Clear();
         }
+
+        private void CanvasTextBoxFontSizeTextBox_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
+        {
+            if (_allowedCommands.Contains(e.Key.ToString()))
+            {
+                e.Handled = false;
+                return;
+            }
+
+            for (int i = 0; i < 10; i++)
+            {
+                if (e.Key.ToString() == string.Format("Number{0}", i))
+                {
+                    e.Handled = false;
+                    return;
+                }
+            }
+
+            e.Handled = true;
+        }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.cs

@@ -206,6 +206,7 @@ private void UnRegisterEvents()
             Unloaded -= InfiniteCanvas_Unloaded;
             Application.Current.LeavingBackground -= Current_LeavingBackground;
             _drawingSurfaceRenderer.CommandExecuted -= DrawingSurfaceRenderer_CommandExecuted;
+            _canvasTextBoxFontSizeTextBox.PreviewKeyDown -= CanvasTextBoxFontSizeTextBox_PreviewKeyDown;
         }
 
         private void RegisterEvents()
@@ -228,6 +229,7 @@ private void RegisterEvents()
             Unloaded += InfiniteCanvas_Unloaded;
             Application.Current.LeavingBackground += Current_LeavingBackground;
             _drawingSurfaceRenderer.CommandExecuted += DrawingSurfaceRenderer_CommandExecuted;
+            _canvasTextBoxFontSizeTextBox.PreviewKeyDown += CanvasTextBoxFontSizeTextBox_PreviewKeyDown;
         }
 
         private void ConfigureControls()

docs/controls/InfiniteCanvas.md

@@ -0,0 +1,82 @@
+---
+title: InfiniteCanvas XAML Control
+author: IbraheemOsama
+description: InfiniteCanvas is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data.
+keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, InfiniteCanvas, XAML Control, xaml
+---
+
+# InfiniteCanvas XAML Control
+
+The [InfiniteCanvas Control](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.infinitecanvas) is a canvas that supports Infinite Scrolling, Ink, Text, Format Text, Zoom in/out, Redo, Undo, Export canvas data, Import canvas data.
+
+## Syntax
+
+```xaml
+<Page ...
+     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>
+
+<controls:InfiniteCanvas Name="canvas"/>
+```
+
+## Sample Output
+
+![InfiniteCanvas animation](../resources/images/Controls/InfiniteCanvas.gif)
+
+## Properties
+
+| Property | Type | Description |
+| -- | -- | -- |
+| CanvasWidth | double | Gets or sets the width of the canvas, default value is the max value 2097152. |
+| CanvasHeight | double | Gets or sets the height of the canvas, default value is the max value 2097152. |
+| IsToolbarVisible | bool | Gets or sets a value indicating whether the toolbar is visible or not. |
+| MaxZoomFactor | double | Gets or sets the MaxZoomFactor for the canvas, range between 1 to 10 and the default value is 4. |
+| MinZoomFactor | double | Gets or sets the MinZoomFactor for the canvas, range between .1 to 1 the default value is .25. |
+
+## Methods
+
+| Method | Return Type | Description |
+| -- | -- | -- |
+| Redo() | void | Redo the last action. |
+| Undo() | void | Undo the last action. |
+| ExportAsJson() | string | Export the InfinitCanvas as json string. |
+| ImportFromJson(string json) | void | Import InfiniteCanvas from json string and render the new canvas, this function will empty the Redo/Undo queue. |
+
+## Events
+
+### ReRenderCompleted
+
+This event triggered after each render happended because of any change in the canvas elements.
+This event could be used to do the Auto Save functionality.
+
+## Examples
+
+The following sample demonstrates how to add Grid Splitter Control
+
+```xaml
+<Page ....
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
+
+    <Grid>
+    <controls:InfiniteCanvas Name="canvas"/>
+  </Grid>
+</Page>
+```
+
+## Sample Code
+
+[InfiniteCanvas Sample Page Source](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InfiniteCanvas). You can see this in action in [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ).
+
+## Default Template
+
+[InfiniteCanvas XAML File](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.xaml) is the XAML template used in the toolkit for the default styling.
+
+## Requirements
+
+| Device family | Universal, 10.0.14393.0 or higher |
+| -- | -- |
+| Namespace | Microsoft.Toolkit.Uwp.UI.Controls |
+| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) |
+
+## API
+
+* [InfiniteCanvas source code](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas)