Smart hint and text box style refactor (#3486)

* Initial TextBox style changes added

* Temporarily fix AutoSuggestBox by bringing in old converters directly in style

* Add character counter toggle to demo app

(cherry picked from commit 555d6f9979cb32e004ceb02a716d8fe11ec3d601)
(cherry picked from commit 3b61edd)

* Basics of SmartHint refactor in place - edge cases need attention

* Fix "padding" issues for outlined style by letting the padding animate from 0 to desired size

* Fix AcceptsReturn=True scenario for TextBox use of SmartHint

* Smart hint page in demo app handles its own scrolling

* Improve handling of dynamic FontSize changes

* Add TextFieldAssist.IconVerticalAlignment AP to control icon placement in TextBox elements

* Add APs for controlling prefix/suffix visibility and floating hint alignment behavior

* DP cleanup

* Smart Hint demo app page cleanup

* Let hint span accross prefix/suffix texts

* Update demo app Smart Hint page with selectors for new APs

* Make prefix/suffix visibility converter respect new AP

* Decent working state; special cases where hint should also animate horizontally not covered yet

* Fix horizontal animation of hint cases

* Mark converters for obsoletion/deletion

* Remove no longer used converter

* Move SmartHint converters into their own files

* Temporarily change startup page to SmartHint

* Fix FloatingHintInitialHorizontalOffsetConverter logic

* Update MainDemo.Wpf/SmartHint.xaml

Co-authored-by: Kevin B <[email protected]>

* Update MainDemo.Wpf/SmartHint.xaml

Co-authored-by: Kevin B <[email protected]>

* Update MainDemo.Wpf/SmartHint.xaml

Co-authored-by: Kevin B <[email protected]>

* Update MainDemo.Wpf/SmartHint.xaml

Co-authored-by: Kevin B <[email protected]>

* Update MainDemo.Wpf/SmartHint.xaml

Co-authored-by: Kevin B <[email protected]>

* Update MaterialDesignThemes.Wpf/Converters/FloatingHintMarginConverter.cs

Co-authored-by: Kevin B <[email protected]>

* Renamed converter values

* Update MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.SmartHint.xaml

Co-authored-by: Kevin B <[email protected]>

* Implement BooleanToDashStyleConverter.ConvertBack()

* Remove dead code

* Handle HasErrors=True margin correction

* Fix support for TextFieldAssist.NewSpecHighlightingEnabled=True

* Add TextFieldAssist.NewSpecHighlightingEnabled support on demo app SmartHint page

* Add options to control scroll bar visibility on SmartHint demo page (for TextBox variants)

* Slightly nicer layout for scroll bar options on SmartHint demo page

* Fix "accepts return" check box to use VM binding

* Temporarily add defaults to showcase the horizontal scrollbar issue

* Include RD for missing static resource

* PoC fix for the VerticalContentAlignment=Stretch issue

* Fix demo app layout and defaults after rebase

* Leverage list pattern matching in relevant converters

* Cleanup constants and "hide" temporary constants in an internal class.

* Fix for TextBoxTests.FilledTextBox_ValidationErrorMargin_MatchesHelperTextMargin()

* Fix for TextBoxTests.HelperText_CanSetFontColorWithAttachedStyle()

* Fix for TextBoxTests.OnClearButtonShown_ControlHeightDoesNotChange()

* Deleted TextBoxTests.OnOutlinedTextBox_FloatingHintOffsetWithinRange() as it is no longer relevant

* Fix for TextBoxTests.OnTextBoxDisabled_FloatingHintBackgroundIsOpaque()

* Fix for TextBoxTests.OutlinedTextBox_ValidationErrorMargin_MatchesHelperTextMargin()

* Fix for TextBoxTests.TextBox_MultiLineAndFixedHeight_RespectsVerticalContentAlignment()

* Adjust default paddings to for better looks, and temporary make the UI tests comparing control heights pass.

* Merge duplicate triggers

* Add dedicated "MaterialDesign.Brush.TextBox.HoverBorder" brush

* Use new hover brush for the filled TextBox style

* Minor code cleanup

* New brush is now an alternate rather than an obsolete brush

* Fix issue with HintAssist.IsFloating wrongfully affecting the hint text placement

* Cherry-pick FloatingHintMarginConverter from ComboBox branch

* Add additional binding to use of FloatingHintMarginConverter

* Add IsEditable parameter to prefix/suffix converter (taken from ComboBox branch)

* Split failing default height tests into pre- and post-smarthint-refactor

* Fix jumpy UI when validation errors and color hint text red

* Set MinHeight=16 and separate all tests into pre-/post-refactor

* Remove MaxWidth from demo app page

---------

Co-authored-by: Kevin B <[email protected]>
Co-authored-by: Kevin Bost <[email protected]>

Author: nicolaihenriksen

MainDemo.Wpf/Domain/MainWindowViewModel.cs

@@ -454,7 +454,12 @@ private static IEnumerable<DemoItem> GenerateDemoItems(ISnackbarMessageQueue sna
             {
                 DocumentationLink.DemoPageLink<SmartHint>(),
                 DocumentationLink.StyleLink("SmartHint"),
-            });
+            })
+        {
+            //The smart hint view handles its own scrolling
+            HorizontalScrollBarVisibilityRequirement = ScrollBarVisibility.Disabled,
+            VerticalScrollBarVisibilityRequirement = ScrollBarVisibility.Disabled
+        };
 
         yield return new DemoItem(
             "PopupBox",

MainDemo.Wpf/Domain/SmartHintViewModel.cs

@@ -21,28 +21,39 @@ internal class SmartHintViewModel : ViewModelBase
     private bool _applyCustomPadding;
     private Thickness _selectedCustomPadding = new(5);
     private double _selectedCustomHeight = double.NaN;
-    private VerticalAlignment _selectedVerticalAlignment = VerticalAlignment.Center;
+    private VerticalAlignment _selectedVerticalAlignment = VerticalAlignment.Stretch;
     private double _selectedLeadingIconSize = 20;
     private double _selectedTrailingIconSize = 20;
-    private string? _prefixText;
-    private string? _suffixText;
+    private VerticalAlignment _selectedIconVerticalAlignment = VerticalAlignment.Center;
+    private string? _prefixText = "pre";
+    private string? _suffixText = "suf";
     private double _selectedFontSize = double.NaN;
     private FontFamily? _selectedFontFamily = DefaultFontFamily;
     private bool _controlsEnabled = true;
     private bool _rippleOnFocus = false;
     private bool _textBoxAcceptsReturn = false;
     private int _maxLength;
+    private PrefixSuffixVisibility _selectedPrefixVisibility = PrefixSuffixVisibility.WhenFocusedOrNonEmpty;
+    private PrefixSuffixHintBehavior _selectedPrefixHintBehavior = PrefixSuffixHintBehavior.AlignWithPrefixSuffix;
+    private PrefixSuffixVisibility _selectedSuffixVisibility = PrefixSuffixVisibility.WhenFocusedOrNonEmpty;
+    private PrefixSuffixHintBehavior _selectedSuffixHintBehavior = PrefixSuffixHintBehavior.AlignWithPrefixSuffix;
+    private bool _newSpecHighlightingEnabled;
+    private ScrollBarVisibility _selectedVerticalScrollBarVisibility = ScrollBarVisibility.Auto;
+    private ScrollBarVisibility _selectedHorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
 
     public IEnumerable<FloatingHintHorizontalAlignment> HorizontalAlignmentOptions { get; } = Enum.GetValues(typeof(FloatingHintHorizontalAlignment)).OfType<FloatingHintHorizontalAlignment>();
-    public IEnumerable<double> FloatingScaleOptions { get; } = new[] {0.25, 0.5, 0.75, 1.0};
-    public IEnumerable<Point> FloatingOffsetOptions { get; } = new[] { DefaultFloatingOffset, new Point(0, -25), new Point(16, -16), new Point(-16, -16), new Point(0, -50) };
-    public IEnumerable<string> ComboBoxOptions { get; } = new[] {"Option 1", "Option 2", "Option 3"};
-    public IEnumerable<Thickness> CustomPaddingOptions { get; } = new [] { new Thickness(0), new Thickness(5), new Thickness(10), new Thickness(15) };
-    public IEnumerable<double> CustomHeightOptions { get; } = new[] { double.NaN, 50, 75, 100 };
-    public IEnumerable<VerticalAlignment> VerticalAlignmentOptions { get; } = (VerticalAlignment[])Enum.GetValues(typeof(VerticalAlignment));
-    public IEnumerable<double> IconSizeOptions { get; } = new[] { 10.0, 15, 20, 30, 50, 75 };
-    public IEnumerable<double> FontSizeOptions { get; } = new[] { double.NaN, 8, 12, 16, 20, 24, 28 };
+    public IEnumerable<double> FloatingScaleOptions { get; } = [0.25, 0.5, 0.75, 1.0];
+    public IEnumerable<Point> FloatingOffsetOptions { get; } = [DefaultFloatingOffset, new Point(0, -25), new Point(16, -16), new Point(-16, -16), new Point(0, -50)];
+    public IEnumerable<string> ComboBoxOptions { get; } = ["Option 1", "Option 2", "Option 3"];
+    public IEnumerable<Thickness> CustomPaddingOptions { get; } = [new Thickness(0), new Thickness(5), new Thickness(10), new Thickness(15)];
+    public IEnumerable<double> CustomHeightOptions { get; } = [double.NaN, 50, 75, 100, 150];
+    public IEnumerable<VerticalAlignment> VerticalAlignmentOptions { get; } = Enum.GetValues(typeof(VerticalAlignment)).OfType<VerticalAlignment>();
+    public IEnumerable<double> IconSizeOptions { get; } = [10.0, 15, 20, 30, 50, 75];
+    public IEnumerable<double> FontSizeOptions { get; } = [double.NaN, 8, 12, 16, 20, 24, 28];
     public IEnumerable<FontFamily> FontFamilyOptions { get; } = new FontFamily[] { DefaultFontFamily }.Concat(Fonts.SystemFontFamilies.OrderBy(f => f.Source));
+    public IEnumerable<PrefixSuffixVisibility> PrefixSuffixVisibilityOptions { get; } = Enum.GetValues(typeof(PrefixSuffixVisibility)).OfType<PrefixSuffixVisibility>();
+    public IEnumerable<PrefixSuffixHintBehavior> PrefixSuffixHintBehaviorOptions { get; } = Enum.GetValues(typeof(PrefixSuffixHintBehavior)).OfType<PrefixSuffixHintBehavior>();
+    public IEnumerable<ScrollBarVisibility> ScrollBarVisibilityOptions { get; } = Enum.GetValues(typeof(ScrollBarVisibility)).OfType<ScrollBarVisibility>();
 
     public bool FloatHint
     {
@@ -140,6 +151,12 @@ public double SelectedTrailingIconSize
         set => SetProperty(ref _selectedTrailingIconSize, value);
     }
 
+    public VerticalAlignment SelectedIconVerticalAlignment
+    {
+        get => _selectedIconVerticalAlignment;
+        set => SetProperty(ref _selectedIconVerticalAlignment, value);
+    }
+
     public string? PrefixText
     {
         get => _prefixText;
@@ -199,4 +216,46 @@ public int MaxLength
             }
         }
     }
+
+    public PrefixSuffixVisibility SelectedPrefixVisibility
+    {
+        get => _selectedPrefixVisibility;
+        set => SetProperty(ref _selectedPrefixVisibility, value);
+    }
+
+    public PrefixSuffixHintBehavior SelectedPrefixHintBehavior
+    {
+        get => _selectedPrefixHintBehavior;
+        set => SetProperty(ref _selectedPrefixHintBehavior, value);
+    }
+
+    public PrefixSuffixVisibility SelectedSuffixVisibility
+    {
+        get => _selectedSuffixVisibility;
+        set => SetProperty(ref _selectedSuffixVisibility, value);
+    }
+
+    public PrefixSuffixHintBehavior SelectedSuffixHintBehavior
+    {
+        get => _selectedSuffixHintBehavior;
+        set => SetProperty(ref _selectedSuffixHintBehavior, value);
+    }
+
+    public bool NewSpecHighlightingEnabled
+    {
+        get => _newSpecHighlightingEnabled;
+        set => SetProperty(ref _newSpecHighlightingEnabled, value);
+    }
+
+    public ScrollBarVisibility SelectedVerticalScrollBarVisibility
+    {
+        get => _selectedVerticalScrollBarVisibility;
+        set => SetProperty(ref _selectedVerticalScrollBarVisibility, value);
+    }
+
+    public ScrollBarVisibility SelectedHorizontalScrollBarVisibility
+    {
+        get => _selectedHorizontalScrollBarVisibility;
+        set => SetProperty(ref _selectedHorizontalScrollBarVisibility, value);
+    }
 }

MainDemo.Wpf/Properties/launchSettings.json

@@ -2,7 +2,7 @@
     "profiles": {
         "Demo App": {
             "commandName": "Project",
-            "commandLineArgs": "-p Home -t Inherit -f LeftToRight"
+            "commandLineArgs": "-p \"Smart Hint\" -t Inherit -f LeftToRight"
         }
     }
 }