Skip to content

Infinite Canvas dropdown font selector instead of textbox #3211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 14 commits into from
Closed

Infinite Canvas dropdown font selector instead of textbox #3211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9d05556
Update PropertyKind.cs
salmanmkc Oct 30, 2019
1e7c8c5
Update Microsoft.Toolkit.Uwp.Connectivity.csproj
salmanmkc Oct 30, 2019
216b3c5
Merge pull request #1 from windows-toolkit/master
salmanmkc Mar 25, 2020
cafb95e
Merge pull request #2 from windows-toolkit/master
salmanmkc Mar 31, 2020
848a5b6
undo change
salmanmkc Apr 1, 2020
6294966
Functionality done
salmanmkc Apr 1, 2020
aac18f9
capitalisation corrections
salmanmkc Apr 1, 2020
6c6c044
Update Microsoft.Toolkit.Uwp.Connectivity.csproj
salmanmkc Apr 1, 2020
d64c14a
Merge branch 'master' into dropdownFont
Kyaa-dost Apr 8, 2020
6a8630a
removed duplicate 48 size font
salmanmkc Apr 8, 2020
6909654
Merge branch 'master' into dropdownFont
Kyaa-dost Apr 9, 2020
7af53f4
Merge branch 'master' into dropdownFont
azchohfi Aug 13, 2020
096a49c
Update Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanva…
salmanmkc Sep 11, 2020
7c8a30b
Merge branch 'master' into dropdownFont
michael-hawker Oct 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.TextBox.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ private int TextFontSize
{
get
{
if (!string.IsNullOrWhiteSpace(_canvasTextBoxFontSizeTextBox.Text) &&
Regex.IsMatch(_canvasTextBoxFontSizeTextBox.Text, "^[0-9]*$"))
if (!string.IsNullOrWhiteSpace(_canvasComboBoxFontSizeTextBox.SelectedValue.ToString()) &&
Regex.IsMatch(_canvasComboBoxFontSizeTextBox.Text, "^[0-9]*$"))
{
var fontSize = int.Parse(_canvasTextBoxFontSizeTextBox.Text);
var fontSize = int.Parse((_canvasComboBoxFontSizeTextBox.SelectedItem as ComboBoxItem).Content.ToString());
_lastValidTextFontSizeValue = fontSize;
}

Expand Down Expand Up @@ -93,7 +93,7 @@ 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)
Expand Down Expand Up @@ -185,7 +185,7 @@ private void InkScrollViewer_PointerPressed(object sender, PointerRoutedEventArg

// Updating toolbar
_canvasTextBoxColorPicker.Color = SelectedTextDrawable.TextColor;
_canvasTextBoxFontSizeTextBox.Text = SelectedTextDrawable.FontSize.ToString();
_canvasComboBoxFontSizeTextBox.Text = SelectedTextDrawable.FontSize.ToString();
_canvasTextBoxBoldButton.IsChecked = SelectedTextDrawable.IsBold;
_canvasTextBoxItalicButton.IsChecked = SelectedTextDrawable.IsItalic;

Expand All @@ -210,7 +210,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()))
{
Expand Down
16 changes: 8 additions & 8 deletions Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
/// </summary>
[TemplatePart(Name = CanvasTextBoxToolsName, Type = typeof(StackPanel))]
[TemplatePart(Name = CanvasTextBoxColorPickerName, Type = typeof(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))]
Expand All @@ -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";
Expand All @@ -71,7 +71,7 @@ public partial class InfiniteCanvas : Control
private StackPanel _canvasTextBoxTools;
private ColorPicker _canvasTextBoxColorPicker;

private TextBox _canvasTextBoxFontSizeTextBox;
private ComboBox _canvasComboBoxFontSizeTextBox;
private ToggleButton _canvasTextBoxItalicButton;
private ToggleButton _canvasTextBoxBoldButton;
private Button _undoButton;
Expand Down Expand Up @@ -244,7 +244,7 @@ protected override void OnApplyTemplate()
{
_canvasTextBoxTools = (StackPanel)GetTemplateChild(CanvasTextBoxToolsName);
_canvasTextBoxColorPicker = (ColorPicker)GetTemplateChild(CanvasTextBoxColorPickerName);
_canvasTextBoxFontSizeTextBox = (TextBox)GetTemplateChild(CanvasTextBoxFontSizeTextBoxName);
_canvasComboBoxFontSizeTextBox = (ComboBox)GetTemplateChild(CanvasComboBoxFontSizeTextBoxName);
_canvasTextBoxItalicButton = (ToggleButton)GetTemplateChild(CanvasTextBoxItalicButtonName);
_canvasTextBoxBoldButton = (ToggleButton)GetTemplateChild(CanvasTextBoxBoldButtonName);
_drawingSurfaceRenderer = (InfiniteCanvasVirtualDrawingSurface)GetTemplateChild(DrawingSurfaceRendererName);
Expand Down Expand Up @@ -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;
Expand All @@ -314,13 +314,13 @@ private void UnRegisterEvents()
Unloaded -= InfiniteCanvas_Unloaded;
Application.Current.LeavingBackground -= Current_LeavingBackground;
_drawingSurfaceRenderer.CommandExecuted -= DrawingSurfaceRenderer_CommandExecuted;
_canvasTextBoxFontSizeTextBox.PreviewKeyDown -= CanvasTextBoxFontSizeTextBox_PreviewKeyDown;
_canvasComboBoxFontSizeTextBox.PreviewKeyDown -= CanvasComboBoxFontSizeTextBox_PreviewKeyDown;
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;
Expand All @@ -338,7 +338,7 @@ private void RegisterEvents()
Unloaded += InfiniteCanvas_Unloaded;
Application.Current.LeavingBackground += Current_LeavingBackground;
_drawingSurfaceRenderer.CommandExecuted += DrawingSurfaceRenderer_CommandExecuted;
_canvasTextBoxFontSizeTextBox.PreviewKeyDown += CanvasTextBoxFontSizeTextBox_PreviewKeyDown;
_canvasComboBoxFontSizeTextBox.PreviewKeyDown += CanvasComboBoxFontSizeTextBox_PreviewKeyDown;
Loaded += InfiniteCanvas_Loaded;
}

Expand Down
28 changes: 21 additions & 7 deletions Microsoft.Toolkit.Uwp.UI.Controls/InfiniteCanvas/InfiniteCanvas.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,27 @@
</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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make sure we keep the tooltip/automation property name for narrator. Though we should set through the resources file.

Also, I think from the UX perspective, we'd need this to be editable with the IsEditable flag, doesn't seem as straight-forward to just enable that though, testing this out quick on a branch.

That also leads us to the discussion in #3440 as IsEditable is a 1809 feature and conditional XAML seems wonky here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will add that back

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After #3214 you don't have to worry if IsEditable is avaible as we target 1809 and up now. You can just set it to true.

Width="64"
Height="32" SelectedIndex="9" Margin="0,0,12,0" VerticalAlignment="Center">
<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>
Expand Down