Skip to content

Commit

Permalink
[Autosuggestbox] Fix delete button margins (#4799)
Browse files Browse the repository at this point in the history 
* Fix bottom rounded corners for open popup

* Fix margin for delete button

* fix comment from PR

* Same visuals without defined height

* Fix margin for query margin

* Add extra column to avoid test errors

* Fix spacing without adding extra column

* Retry to not break visuals

* Update margins

* Fix expected results

* Try to fix one test case

* Update more expected test results
  • Loading branch information
@almedina-ms
almedina-ms authored Apr 27, 2021
1 parent 9a74d16 commit da6db71
Show file tree
Hide file tree
Showing 11 changed files with 39 additions and 37 deletions.
16 changes: 9 additions & 7 deletions dev/AutoSuggestBox/AutoSuggestBox_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@
</ResourceDictionary.ThemeDictionaries>

<Thickness x:Key="AutoSuggestBoxTopHeaderMargin">0,0,0,8</Thickness>
<Thickness x:Key="AutoSuggestBoxInnerButtonMargin">0,3</Thickness>
<Thickness x:Key="AutoSuggestBoxInnerButtonMargin">1,3</Thickness>
<Thickness x:Key="AutoSuggestBoxDeleteButtonMargin">0,4</Thickness>
<Thickness x:Key="AutoSuggestBoxQueryButtonPadding">3,2</Thickness>
<x:Double x:Key="AutoSuggestBoxLeftButtonMargin">3</x:Double>
<x:Double x:Key="AutoSuggestBoxRightButtonMargin">4</x:Double>

<Style TargetType="TextBox" x:Key="AutoSuggestBoxTextBoxStyle">
Expand Down Expand Up @@ -64,12 +66,12 @@
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="ButtonLayoutGrid"
Margin="{ThemeResource AutoSuggestBoxInnerButtonMargin}"
BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{ThemeResource TextControlButtonBackground}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
contract7NotPresent:CornerRadius="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}">
Margin="{StaticResource AutoSuggestBoxDeleteButtonMargin}"
contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}"
contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -147,7 +149,6 @@
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
local:AnimatedIcon.State="Normal">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -348,9 +349,9 @@
IsHitTestVisible="False" />
<Button x:Name="DeleteButton"
Grid.Row="1"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
Style="{StaticResource DeleteButtonStyle}"
BorderThickness="{TemplateBinding BorderThickness}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
Padding="{ThemeResource HelperButtonThemePadding}"
IsTabStop="False"
Grid.Column="1"
Expand All @@ -361,12 +362,13 @@
VerticalAlignment="Stretch" />
<Button x:Name="QueryButton"
Grid.Row="1"
Grid.Column="2"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
Style="{StaticResource QueryButtonStyle}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="2,0,0,0"
Padding="{ThemeResource HelperButtonThemePadding}"
IsTabStop="False"
Grid.Column="2"
FontSize="{TemplateBinding FontSize}"
Width="32"
Height="28"
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-4.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1044,7 +1044,7 @@
Background=#B3FFFFFF
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1060,13 +1060,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.Primitives.Popup]
Name=SuggestionsPopup
Margin=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-5.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1044,7 +1044,7 @@
Background=#B3FFFFFF
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1060,13 +1060,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.Primitives.Popup]
Name=SuggestionsPopup
Margin=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-6.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1044,7 +1044,7 @@
Background=#B3FFFFFF
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1060,13 +1060,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.Primitives.Popup]
Name=SuggestionsPopup
Margin=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-7.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1004,7 +1004,7 @@
CornerRadius=4,4,4,4
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1020,13 +1020,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.ContentPresenter]
Foreground=#99000000
Padding=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-8.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1004,7 +1004,7 @@
CornerRadius=4,4,4,4
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1020,13 +1020,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.ContentPresenter]
Foreground=#99000000
Padding=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewTopPaneContent-4.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1372,7 +1372,7 @@
Background=#B3FFFFFF
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1388,13 +1388,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.Primitives.Popup]
Name=SuggestionsPopup
Margin=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewTopPaneContent-5.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1372,7 +1372,7 @@
Background=#B3FFFFFF
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1388,13 +1388,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.Primitives.Popup]
Name=SuggestionsPopup
Margin=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewTopPaneContent-6.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1372,7 +1372,7 @@
Background=#B3FFFFFF
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1388,13 +1388,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.Primitives.Popup]
Name=SuggestionsPopup
Margin=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewTopPaneContent-7.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1366,7 +1366,7 @@
CornerRadius=4,4,4,4
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1382,13 +1382,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.ContentPresenter]
Foreground=#99000000
Padding=0,0,0,0
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewTopPaneContent-8.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1366,7 +1366,7 @@
CornerRadius=4,4,4,4
Width=32
Name=QueryButton
Margin=0,0,0,0
Margin=2,0,0,0
Height=28
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
Expand All @@ -1382,13 +1382,13 @@
BorderBrush=#00FFFFFF
Background=#00FFFFFF
Name=ContentPresenter
Margin=0,3,0,3
Margin=1,3,1,3
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#B3FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#E4000000
Visibility=Visible
RenderSize=32,22
RenderSize=30,22
[Windows.UI.Xaml.Controls.ContentPresenter]
Foreground=#99000000
Padding=0,0,0,0
Expand Down

0 comments on commit da6db71

Please sign in to comment.