From a43a2abe3e8a8ef7abd164943bb3f0db847586a6 Mon Sep 17 00:00:00 2001 From: T Paine <30241445+teaP@users.noreply.github.com> Date: Thu, 20 May 2021 23:25:17 -0700 Subject: [PATCH] NumberBox: Visual updates (#5032) * Visual updates * Quick accessibility fix -- we need this to run AFTER m_textBox is set. * Adjusted the size of popup buttons, fixed keyboard focus issue. * Removed test -- now that corners are only applied to the TextBox, we don't need to worry about which elements have corners anymore. --- dev/NumberBox/APITests/NumberBoxTests.cs | 60 -------- dev/NumberBox/NumberBox.cpp | 34 ++--- dev/NumberBox/NumberBox.h | 3 - dev/NumberBox/NumberBox.xaml | 150 +++++++++++++++++--- dev/NumberBox/NumberBox_themeresources.xaml | 4 +- 5 files changed, 140 insertions(+), 111 deletions(-) diff --git a/dev/NumberBox/APITests/NumberBoxTests.cs b/dev/NumberBox/APITests/NumberBoxTests.cs index 95e6372b0d..08c2f72d15 100644 --- a/dev/NumberBox/APITests/NumberBoxTests.cs +++ b/dev/NumberBox/APITests/NumberBoxTests.cs @@ -49,66 +49,6 @@ public void VerifyTextAlignmentPropogates() }); } - [TestMethod] - public void VerifyNumberBoxCornerRadius() - { - if (Common.PlatformConfiguration.IsOSVersionLessThan(Common.OSVersion.Redstone5)) - { - Log.Warning("NumberBox CornerRadius property is not available pre-rs5"); - return; - } - - var numberBox = SetupNumberBox(); - - RepeatButton spinButtonDown = null; - TextBox textBox = null; - RunOnUIThread.Execute(() => - { - // first test: Uniform corner radius of '2' with no spin buttons shown - numberBox.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Hidden; - numberBox.CornerRadius = new CornerRadius(2); - - Content.UpdateLayout(); - - textBox = TestUtilities.FindDescendents(numberBox).Where(e => e.Name == "InputBox").Single(); - Verify.AreEqual(new CornerRadius(2, 2, 2, 2), textBox.CornerRadius); - - // second test: Uniform corner radius of '2' with spin buttons in inline mode (T-rule applies now) - numberBox.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Inline; - Content.UpdateLayout(); - - spinButtonDown = TestUtilities.FindDescendents(numberBox).Where(e => e.Name == "DownSpinButton").Single(); - - Verify.AreEqual(new CornerRadius(2, 0, 0, 2), textBox.CornerRadius); - Verify.AreEqual(new CornerRadius(0, 2, 2, 0), spinButtonDown.CornerRadius); - - // third test: Set uniform corner radius to '4' with spin buttons in inline mode - numberBox.CornerRadius = new CornerRadius(4); - }); - IdleSynchronizer.Wait(); - - RunOnUIThread.Execute(() => - { - // This check makes sure that updating the CornerRadius values of the numberbox in inline mode - // does not break the T-rule. - Verify.AreEqual(new CornerRadius(4, 0, 0, 4), textBox.CornerRadius); - Verify.AreEqual(new CornerRadius(0, 4, 4, 0), spinButtonDown.CornerRadius); - - // fourth test: Update the spin button placement mode to 'compact' and verify that all corners - // of the textbox are now rounded again - numberBox.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Compact; - Content.UpdateLayout(); - - Verify.AreEqual(new CornerRadius(4), textBox.CornerRadius); - - // fifth test: Check corner radius of 0 in compact mode. - numberBox.CornerRadius = new CornerRadius(0); - Content.UpdateLayout(); - - Verify.AreEqual(new CornerRadius(0), textBox.CornerRadius); - }); - } - [TestMethod] public void VerifyInputScopePropogates() { diff --git a/dev/NumberBox/NumberBox.cpp b/dev/NumberBox/NumberBox.cpp index 06904a1454..357e1352de 100644 --- a/dev/NumberBox/NumberBox.cpp +++ b/dev/NumberBox/NumberBox.cpp @@ -172,18 +172,6 @@ void NumberBox::OnApplyTemplate() } m_textBoxKeyUpRevoker = textBox.KeyUp(winrt::auto_revoke, { this, &NumberBox::OnNumberBoxKeyUp }); - - // Listen to NumberBox::CornerRadius changes so that we can enfore the T-rule for the textbox in SpinButtonPlacementMode::Inline. - // We need to explicitly go to the corresponding visual state each time the NumberBox' CornerRadius is changed in order for the new - // corner radius values to be filtered correctly. - // If we only go to the SpinButtonsVisible visual state whenever the SpinButtonPlacementMode is changed to Inline, all subsequent - // corner radius changes would apply to all four textbox corners (this can be easily seen in the CornerRadius test page of the MUXControlsTestApp). - // This will break the T-rule in the Inline SpinButtonPlacementMode. - if (SharedHelpers::IsControlCornerRadiusAvailable()) - { - m_cornerRadiusChangedRevoker = RegisterPropertyChanged(*this, - winrt::Control::CornerRadiusProperty(), { this, &NumberBox::OnCornerRadiusPropertyChanged }); - } } return textBox; }()); @@ -226,6 +214,8 @@ void NumberBox::OnApplyTemplate() UpdateVisualStateForIsEnabledChange(); + ReevaluateForwardedUIAName(); + if (ReadLocalValue(s_ValueProperty) == winrt::DependencyProperty::UnsetValue() && ReadLocalValue(s_TextProperty) != winrt::DependencyProperty::UnsetValue()) { @@ -238,15 +228,6 @@ void NumberBox::OnApplyTemplate() } } -void NumberBox::OnCornerRadiusPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&) -{ - if (this->SpinButtonPlacementMode() == winrt::NumberBoxSpinButtonPlacementMode::Inline) - { - // Enforce T-rule for the textbox in Inline SpinButtonPlacementMode. - winrt::VisualStateManager::GoToState(*this, L"SpinButtonsVisible", false); - } -} - void NumberBox::OnValuePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args) { // This handler may change Value; don't send extra events in that case. @@ -643,18 +624,21 @@ void NumberBox::UpdateTextToValue() void NumberBox::UpdateSpinButtonPlacement() { const auto spinButtonMode = SpinButtonPlacementMode(); + auto state = L"SpinButtonsCollapsed"; if (spinButtonMode == winrt::NumberBoxSpinButtonPlacementMode::Inline) { - winrt::VisualStateManager::GoToState(*this, L"SpinButtonsVisible", false); + state = L"SpinButtonsVisible"; } else if (spinButtonMode == winrt::NumberBoxSpinButtonPlacementMode::Compact) { - winrt::VisualStateManager::GoToState(*this, L"SpinButtonsPopup", false); + state = L"SpinButtonsPopup"; } - else + + winrt::VisualStateManager::GoToState(*this, state, false); + if (const auto textbox = m_textBox.get()) { - winrt::VisualStateManager::GoToState(*this, L"SpinButtonsCollapsed", false); + winrt::VisualStateManager::GoToState(textbox, state, false); } } diff --git a/dev/NumberBox/NumberBox.h b/dev/NumberBox/NumberBox.h index c8c48b8473..5ee3d67097 100644 --- a/dev/NumberBox/NumberBox.h +++ b/dev/NumberBox/NumberBox.h @@ -68,7 +68,6 @@ class NumberBox : void OnNumberBoxGotFocus(winrt::IInspectable const& sender, winrt::RoutedEventArgs const& args); void OnNumberBoxLostFocus(winrt::IInspectable const& sender, winrt::RoutedEventArgs const& args); void OnNumberBoxScroll(winrt::IInspectable const& sender, winrt::PointerRoutedEventArgs const& args); - void OnCornerRadiusPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&); void OnIsEnabledChanged(const winrt::IInspectable&, const winrt::DependencyPropertyChangedEventArgs&); void OnAutomationPropertiesNamePropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&); @@ -112,7 +111,5 @@ class NumberBox : winrt::RepeatButton::Click_revoker m_popupUpButtonClickRevoker{}; winrt::RepeatButton::Click_revoker m_popupDownButtonClickRevoker{}; - PropertyChanged_revoker m_cornerRadiusChangedRevoker{}; - winrt::Control::IsEnabledChanged_revoker m_isEnabledChangedRevoker{}; }; diff --git a/dev/NumberBox/NumberBox.xaml b/dev/NumberBox/NumberBox.xaml index fbfe40941d..7006a9ef52 100644 --- a/dev/NumberBox/NumberBox.xaml +++ b/dev/NumberBox/NumberBox.xaml @@ -38,7 +38,7 @@ - + @@ -74,18 +74,42 @@ - - + + + + + + + + + + - - + + + + + + + + + + - - + + + + + + + + + + @@ -119,6 +143,8 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Margin="4" + contract7Present:CornerRadius="{TemplateBinding CornerRadius}"/> + Margin="0,4,4,4" + contract7Present:CornerRadius="{TemplateBinding CornerRadius}" /> - + + - - + @@ -213,10 +303,13 @@ - - + + + + + @@ -231,11 +324,12 @@ + contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}"> @@ -362,8 +456,8 @@ - + @@ -378,7 +472,20 @@ + + + + + + + + + + + + + @@ -455,14 +562,14 @@ Grid.Column="1" Style="{StaticResource DeleteButtonStyle}" BorderThickness="{TemplateBinding BorderThickness}" - contract7Present:CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" + contract7Present:CornerRadius="{TemplateBinding CornerRadius}" Padding="{ThemeResource HelperButtonThemePadding}" IsTabStop="False" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Right" - MinWidth="34" + MinWidth="40" VerticalAlignment="Stretch" /> - 0,1,1,1 10,0,0,0 - -20 - -16 + -21 + -27 16 0,0,8,0