Infinite Canvas dropdown font selector 2 (#3914)

<!-- 🚨 Please Do Not skip any instructions and information mentioned below as they are all required and essential to evaluate and test the PR. By fulfilling all the required information you will be able to reduce the volume of questions and most likely help merge the PR faster 🚨 -->

<!-- 📝 It is preferred if you keep the "☑️ Allow edits by maintainers" checked in the Pull Request Template as it increases collaboration with the Toolkit maintainers by permitting commits to your PR branch (only) created from your fork.  This can let us quickly make fixes for minor typos or forgotten StyleCop issues during review without needing to wait on you doing extra work. Let us help you help us! 🎉 -->


## Continued off of #3211

<!-- Add the relevant issue number after the "#" mentioned above (for ex: Fixes #1234) which will automatically close the issue once the PR is merged. -->

<!-- Add a brief overview here of the feature/bug & fix. -->
User can now input a font size via typed text and not only selection from out provided sizes.

## PR Type
What kind of change does this PR introduce?
<!-- Please uncomment one or more that apply to this PR. -->

<!-- - Bugfix -->
- Feature
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
You have to enter a font size with text in the textbox, I used the standard font sizes that are given in Microsoft Office PowerPoint (increments from 8 to 96).

## What is the new behavior?
<!-- Describe how was this issue resolved or changed? -->
User can select the font size themselves now


## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: <!-- docs PR link -->
- [ ] Sample in sample app has been added / updated (for bug fixes / features)
    - [ ] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)
- [ ] New major technical changes in the toolkit have or will be added to the [Wiki](https://github.com/windows-toolkit/WindowsCommunityToolkit/wiki) e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...
- [ ] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [ ] Header has been added to all new source files (run *build/UpdateHeaders.bat*)
- [ ] Contains **NO** breaking changes

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. 
     Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. -->


## Other information

Microsoft.Toolkit.Uwp.UI.Controls.Media/InfiniteCanvas/Commands/InfiniteCanvasCreateTextBoxCommand.cs

@@ -12,7 +12,7 @@ internal class InfiniteCanvasCreateTextBoxCommand : IInfiniteCanvasCommand
         private readonly List<IDrawable> _drawableList;
         private readonly TextDrawable _drawable;
 
-        public InfiniteCanvasCreateTextBoxCommand(List<IDrawable> drawableList, double x, double y, double width, double height, int textFontSize, string text, Color color, bool isBold, bool isItalic)
+        public InfiniteCanvasCreateTextBoxCommand(List<IDrawable> drawableList, double x, double y, double width, double height, float textFontSize, string text, Color color, bool isBold, bool isItalic)
         {
             _drawable = new TextDrawable(
                 x,

Microsoft.Toolkit.Uwp.UI.Controls.Media/InfiniteCanvas/Controls/InfiniteCanvasVirtualDrawingSurface.Commands.cs

@@ -79,7 +79,7 @@ internal void ExecuteUpdateTextBoxFontSize(float newValue)
             ExecuteCommand(command);
         }
 
-        internal void ExecuteCreateTextBox(double x, double y, double width, double height, int textFontSize, string text, Color color, bool isBold, bool isItalic)
+        internal void ExecuteCreateTextBox(double x, double y, double width, double height, float textFontSize, string text, Color color, bool isBold, bool isItalic)
         {
             var command = new InfiniteCanvasCreateTextBoxCommand(_drawableList, x, y, width, height, textFontSize, text, color, isBold, isItalic);
             ExecuteCommand(command);

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

@@ -28,28 +28,20 @@ public partial class InfiniteCanvas
             "Right",
             "Up",
             "Left",
-            "Down"
+            "Down",
+            "Enter"
         };
 
         private Point _lastInputPoint;
 
         private TextDrawable SelectedTextDrawable => _drawingSurfaceRenderer.GetSelectedTextDrawable();
 
-        private int _lastValidTextFontSizeValue = DefaultFontValue;
+        private float _textFontSize = DefaultFontValue;
 
-        private int TextFontSize
+        private void SetFontSize(float newSize)
         {
-            get
-            {
-                if (!string.IsNullOrWhiteSpace(_canvasTextBoxFontSizeTextBox.Text) &&
-                    Regex.IsMatch(_canvasTextBoxFontSizeTextBox.Text, "^[0-9]*$"))
-                {
-                    var fontSize = int.Parse(_canvasTextBoxFontSizeTextBox.Text);
-                    _lastValidTextFontSizeValue = fontSize;
-                }
-
-                return _lastValidTextFontSizeValue;
-            }
+            _textFontSize = newSize;
+            _canvasTextBox.UpdateFontSize(newSize);
         }
 
         private void InkScrollViewer_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
@@ -93,13 +85,34 @@ private void CanvasTextBoxItalicButton_Clicked(object sender, RoutedEventArgs e)
             }
         }
 
-        private void CanvasTextBoxFontSizeTextBox_TextChanged(object sender, TextChangedEventArgs e)
+        private void CanvasComboBoxFontSizeTextBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
-            _canvasTextBox.UpdateFontSize(TextFontSize);
-            if (SelectedTextDrawable != null)
+            if (sender is ComboBox s
+                && s.SelectedItem is ComboBoxItem selectedItem
+                && selectedItem.Content is string selectedText
+                && float.TryParse(selectedText, out var sizeNumb))
             {
-                _drawingSurfaceRenderer.ExecuteUpdateTextBoxFontSize(TextFontSize);
-                ReDrawCanvas();
+                SetFontSize(sizeNumb);
+
+                if (SelectedTextDrawable != null)
+                {
+                    _drawingSurfaceRenderer.ExecuteUpdateTextBoxFontSize(sizeNumb);
+                    ReDrawCanvas();
+                }
+            }
+        }
+
+        private void CanvasComboBoxFontSizeTextBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs args)
+        {
+            if (float.TryParse(args.Text, out var size))
+            {
+                SetFontSize(size);
+
+                if (SelectedTextDrawable != null)
+                {
+                    _drawingSurfaceRenderer.ExecuteUpdateTextBoxFontSize(size);
+                    ReDrawCanvas();
+                }
             }
         }
 
@@ -147,20 +160,22 @@ private void CanvasTextBox_TextChanged(object sender, string text)
                 ReDrawCanvas();
                 return;
             }
+            else
+            {
+                _drawingSurfaceRenderer.ExecuteCreateTextBox(
+                    _lastInputPoint.X,
+                    _lastInputPoint.Y,
+                    _canvasTextBox.GetEditZoneWidth(),
+                    _canvasTextBox.GetEditZoneHeight(),
+                    _textFontSize,
+                    text,
+                    _canvasTextBoxColorPicker.Color,
+                    _canvasTextBoxBoldButton.IsChecked ?? false,
+                    _canvasTextBoxItalicButton.IsChecked ?? false);
 
-            _drawingSurfaceRenderer.ExecuteCreateTextBox(
-                _lastInputPoint.X,
-                _lastInputPoint.Y,
-                _canvasTextBox.GetEditZoneWidth(),
-                _canvasTextBox.GetEditZoneHeight(),
-                TextFontSize,
-                text,
-                _canvasTextBoxColorPicker.Color,
-                _canvasTextBoxBoldButton.IsChecked ?? false,
-                _canvasTextBoxItalicButton.IsChecked ?? false);
-
-            ReDrawCanvas();
-            _drawingSurfaceRenderer.UpdateSelectedTextDrawable();
+                ReDrawCanvas();
+                _drawingSurfaceRenderer.UpdateSelectedTextDrawable();
+            }
         }
 
         private void InkScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
@@ -179,20 +194,17 @@ private void InkScrollViewer_PointerPressed(object sender, PointerRoutedEventArg
 
                     Canvas.SetLeft(_canvasTextBox, SelectedTextDrawable.Bounds.X);
                     Canvas.SetTop(_canvasTextBox, SelectedTextDrawable.Bounds.Y);
-                    _canvasTextBox.UpdateFontSize(SelectedTextDrawable.FontSize);
                     _canvasTextBox.UpdateFontStyle(SelectedTextDrawable.IsItalic);
                     _canvasTextBox.UpdateFontWeight(SelectedTextDrawable.IsBold);
 
                     // Updating toolbar
                     _canvasTextBoxColorPicker.Color = SelectedTextDrawable.TextColor;
-                    _canvasTextBoxFontSizeTextBox.Text = SelectedTextDrawable.FontSize.ToString();
                     _canvasTextBoxBoldButton.IsChecked = SelectedTextDrawable.IsBold;
                     _canvasTextBoxItalicButton.IsChecked = SelectedTextDrawable.IsItalic;
 
                     return;
                 }
 
-                _canvasTextBox.UpdateFontSize(TextFontSize);
                 _canvasTextBox.UpdateFontStyle(_canvasTextBoxItalicButton.IsChecked ?? false);
                 _canvasTextBox.UpdateFontWeight(_canvasTextBoxBoldButton.IsChecked ?? false);
 
@@ -210,7 +222,7 @@ private void ClearTextBoxValue()
             _canvasTextBox.Clear();
         }
 
-        private void CanvasTextBoxFontSizeTextBox_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
+        private void CanvasComboBoxFontSizeTextBox_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
         {
             if (_allowedCommands.Contains(e.Key.ToString()))
             {

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

@@ -21,7 +21,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     /// </summary>
     [TemplatePart(Name = CanvasTextBoxToolsName, Type = typeof(StackPanel))]
     [TemplatePart(Name = CanvasTextBoxColorPickerName, Type = typeof(Windows.UI.Xaml.Controls.ColorPicker))]
-    [TemplatePart(Name = CanvasTextBoxFontSizeTextBoxName, Type = typeof(TextBox))]
+    [TemplatePart(Name = CanvasComboBoxFontSizeTextBoxName, Type = typeof(TextBox))]
     [TemplatePart(Name = CanvasTextBoxItalicButtonName, Type = typeof(ToggleButton))]
     [TemplatePart(Name = CanvasTextBoxBoldButtonName, Type = typeof(ToggleButton))]
     [TemplatePart(Name = DrawingSurfaceRendererName, Type = typeof(InfiniteCanvasVirtualDrawingSurface))]
@@ -45,7 +45,7 @@ public partial class InfiniteCanvas : Control
 
         private const string CanvasTextBoxToolsName = "CanvasTextBoxTools";
         private const string CanvasTextBoxColorPickerName = "CanvasTextBoxColorPicker";
-        private const string CanvasTextBoxFontSizeTextBoxName = "CanvasTextBoxFontSizeTextBox";
+        private const string CanvasComboBoxFontSizeTextBoxName = "CanvasComboBoxFontSizeTextBox";
         private const string CanvasTextBoxItalicButtonName = "CanvasTextBoxItalicButton";
         private const string CanvasTextBoxBoldButtonName = "CanvasTextBoxBoldButton";
         private const string DrawingSurfaceRendererName = "DrawingSurfaceRenderer";
@@ -71,7 +71,7 @@ public partial class InfiniteCanvas : Control
         private StackPanel _canvasTextBoxTools;
         private Windows.UI.Xaml.Controls.ColorPicker _canvasTextBoxColorPicker;
 
-        private TextBox _canvasTextBoxFontSizeTextBox;
+        private ComboBox _canvasComboBoxFontSizeTextBox;
         private ToggleButton _canvasTextBoxItalicButton;
         private ToggleButton _canvasTextBoxBoldButton;
         private Button _undoButton;
@@ -244,7 +244,7 @@ protected override void OnApplyTemplate()
         {
             _canvasTextBoxTools = (StackPanel)GetTemplateChild(CanvasTextBoxToolsName);
             this._canvasTextBoxColorPicker = (Windows.UI.Xaml.Controls.ColorPicker)GetTemplateChild(CanvasTextBoxColorPickerName);
-            _canvasTextBoxFontSizeTextBox = (TextBox)GetTemplateChild(CanvasTextBoxFontSizeTextBoxName);
+            _canvasComboBoxFontSizeTextBox = (ComboBox)GetTemplateChild(CanvasComboBoxFontSizeTextBoxName);
             _canvasTextBoxItalicButton = (ToggleButton)GetTemplateChild(CanvasTextBoxItalicButtonName);
             _canvasTextBoxBoldButton = (ToggleButton)GetTemplateChild(CanvasTextBoxBoldButtonName);
             _drawingSurfaceRenderer = (InfiniteCanvasVirtualDrawingSurface)GetTemplateChild(DrawingSurfaceRendererName);
@@ -296,7 +296,7 @@ protected override void OnApplyTemplate()
 
         private void UnRegisterEvents()
         {
-            _canvasTextBoxFontSizeTextBox.TextChanged -= CanvasTextBoxFontSizeTextBox_TextChanged;
+            _canvasComboBoxFontSizeTextBox.SelectionChanged -= CanvasComboBoxFontSizeTextBox_SelectionChanged;
             _canvasTextBoxItalicButton.Click -= CanvasTextBoxItalicButton_Clicked;
             _canvasTextBoxBoldButton.Click -= CanvasTextBoxBoldButton_Clicked;
             _canvasTextBoxColorPicker.ColorChanged -= CanvasTextBoxColorPicker_ColorChanged;
@@ -314,13 +314,14 @@ private void UnRegisterEvents()
             Unloaded -= InfiniteCanvas_Unloaded;
             Application.Current.LeavingBackground -= Current_LeavingBackground;
             _drawingSurfaceRenderer.CommandExecuted -= DrawingSurfaceRenderer_CommandExecuted;
-            _canvasTextBoxFontSizeTextBox.PreviewKeyDown -= CanvasTextBoxFontSizeTextBox_PreviewKeyDown;
+            _canvasComboBoxFontSizeTextBox.PreviewKeyDown -= CanvasComboBoxFontSizeTextBox_PreviewKeyDown;
+            _canvasComboBoxFontSizeTextBox.TextSubmitted -= CanvasComboBoxFontSizeTextBox_TextSubmitted;
             Loaded -= InfiniteCanvas_Loaded;
         }
 
         private void RegisterEvents()
         {
-            _canvasTextBoxFontSizeTextBox.TextChanged += CanvasTextBoxFontSizeTextBox_TextChanged;
+            _canvasComboBoxFontSizeTextBox.SelectionChanged += CanvasComboBoxFontSizeTextBox_SelectionChanged;
             _canvasTextBoxItalicButton.Click += CanvasTextBoxItalicButton_Clicked;
             _canvasTextBoxBoldButton.Click += CanvasTextBoxBoldButton_Clicked;
             _canvasTextBoxColorPicker.ColorChanged += CanvasTextBoxColorPicker_ColorChanged;
@@ -338,7 +339,8 @@ private void RegisterEvents()
             Unloaded += InfiniteCanvas_Unloaded;
             Application.Current.LeavingBackground += Current_LeavingBackground;
             _drawingSurfaceRenderer.CommandExecuted += DrawingSurfaceRenderer_CommandExecuted;
-            _canvasTextBoxFontSizeTextBox.PreviewKeyDown += CanvasTextBoxFontSizeTextBox_PreviewKeyDown;
+            _canvasComboBoxFontSizeTextBox.PreviewKeyDown += CanvasComboBoxFontSizeTextBox_PreviewKeyDown;
+            _canvasComboBoxFontSizeTextBox.TextSubmitted += CanvasComboBoxFontSizeTextBox_TextSubmitted;
             Loaded += InfiniteCanvas_Loaded;
         }
 
@@ -366,7 +368,7 @@ private void ConfigureControls()
 
             SetCanvasWidthHeight();
 
-            _canvasTextBox.UpdateFontSize(TextFontSize);
+            SetFontSize(_textFontSize);
         }
 
         private void SetZoomFactor()

Microsoft.Toolkit.Uwp.UI.Controls.Media/InfiniteCanvas/InfiniteCanvas.xaml

@@ -97,13 +97,32 @@
                                         </ToggleButton.Content>
                                     </ToggleButton>
 
-                                    <TextBox x:Name="CanvasTextBoxFontSizeTextBox"
-                                             Width="64"
-                                             Height="32"
-                                             InputScope="Number"
-                                             MaxLength="3"
-                                             Text="22"
-                                             ToolTipService.ToolTip="Font Size" />
+                                    <ComboBox x:Name="CanvasComboBoxFontSizeTextBox"
+                                              MinWidth="64"
+                                              Height="32"
+                                              SelectedIndex="9"
+                                              Margin="0,0,12,0"
+                                              VerticalAlignment="Center"
+                                              ToolTipService.ToolTip="Font Size"
+                                              IsEditable="True"
+                                              >
+                                        <ComboBoxItem Content="8" />
+                                        <ComboBoxItem Content="9" />
+                                        <ComboBoxItem Content="10" />
+                                        <ComboBoxItem Content="11" />
+                                        <ComboBoxItem Content="12" />
+                                        <ComboBoxItem Content="14" />
+                                        <ComboBoxItem Content="16" />
+                                        <ComboBoxItem Content="18" />
+                                        <ComboBoxItem Content="20" />
+                                        <ComboBoxItem Content="22" />
+                                        <ComboBoxItem Content="24" />
+                                        <ComboBoxItem Content="26" />
+                                        <ComboBoxItem Content="28" />
+                                        <ComboBoxItem Content="36" />
+                                        <ComboBoxItem Content="48" />
+                                        <ComboBoxItem Content="72" />
+                                    </ComboBox>
 
                                 </StackPanel>
                             </StackPanel>