Skip to content

Commit

Permalink
[Scrollbar] Fix carat spacing to edges (#4889)
Browse files Browse the repository at this point in the history 
* Update spacing on edges

* Clean code to remove changes

* Small change reverted

* Udpate expected result

* Force failure for expected results

* Fix carat to edge spacing with no test error

* Revert tree view tests failures

* Update verification files
  • Loading branch information
@almedina-ms
almedina-ms authored Apr 29, 2021
1 parent 7bde310 commit 89bc99d
Show file tree
Hide file tree
Showing 26 changed files with 183 additions and 178 deletions.
21 changes: 13 additions & 8 deletions dev/CommonStyles/ScrollBar_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
<primitives:CornerRadiusFilterConverter x:Key="TopLeftCornerRadiusDoubleValueConverter2x" Filter="TopLeftValue" Scale="2"/>
<primitives:CornerRadiusFilterConverter x:Key="BottomRightCornerRadiusDoubleValueConverter2x" Filter="BottomRightValue" Scale="2"/>

<Thickness x:Key="ScrollBarHorizontalDecreaseMargin">4,0,0,0</Thickness>
<Thickness x:Key="ScrollBarHorizontalIncreaseMargin">0,0,4,0</Thickness>
<Thickness x:Key="ScrollBarVerticalDecreaseMargin">0,4,0,0</Thickness>
<Thickness x:Key="ScrollBarVerticalIncreaseMargin">0,0,0,4</Thickness>

<Style TargetType="ScrollBar" BasedOn="{StaticResource DefaultScrollBarStyle}" />

<Style x:Key="DefaultScrollBarStyle" TargetType="ScrollBar">
Expand All @@ -232,7 +237,7 @@
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}" Padding="{ThemeResource ScrollBarHorizontalIncreaseMargin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -263,7 +268,7 @@
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HorizontalDecrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}" Padding="{ThemeResource ScrollBarHorizontalDecreaseMargin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -294,7 +299,7 @@
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="VerticalIncrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}" Padding="{ThemeResource ScrollBarVerticalIncreaseMargin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -325,7 +330,7 @@
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="VerticalDecrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
<Grid x:Name="Root" Background="{ThemeResource ScrollBarButtonBackground}" BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}" Padding="{ThemeResource ScrollBarVerticalDecreaseMargin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -681,7 +686,7 @@
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
Opacity="0" Grid.ColumnSpan="5" Margin="0" StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}" Fill="{ThemeResource ScrollBarTrackFill}" Stroke="{ThemeResource ScrollBarTrackStroke}" />
<RepeatButton x:Name="HorizontalSmallDecrease" Opacity="0" Grid.Column="0" MinHeight="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Margin="0" Template="{StaticResource HorizontalDecrementTemplate}" Width="{StaticResource ScrollBarSize}" AllowFocusOnInteraction="False" VerticalAlignment="Center" />
<RepeatButton x:Name="HorizontalSmallDecrease" Grid.Column="0" Opacity="0" MinHeight="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Padding="{ThemeResource ScrollBarHorizontalDecreaseMargin}" Template="{StaticResource HorizontalDecrementTemplate}" Width="{StaticResource ScrollBarSize}" AllowFocusOnInteraction="False" VerticalAlignment="Center" />
<RepeatButton x:Name="HorizontalLargeDecrease" Opacity="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" Interval="50" Template="{StaticResource RepeatButtonTemplate}" Width="0" AllowFocusOnInteraction="False" />
<Thumb x:Name="HorizontalThumb"
Opacity="0"
Expand All @@ -700,7 +705,7 @@
</Thumb>

<RepeatButton x:Name="HorizontalLargeIncrease" Opacity="0" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" Interval="50" AllowFocusOnInteraction="False" Template="{StaticResource RepeatButtonTemplate}" />
<RepeatButton x:Name="HorizontalSmallIncrease" Opacity="0" Grid.Column="4" MinHeight="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Margin="0" Template="{StaticResource HorizontalIncrementTemplate}" Width="{StaticResource ScrollBarSize}" AllowFocusOnInteraction="False" VerticalAlignment="Center" />
<RepeatButton x:Name="HorizontalSmallIncrease" Grid.Column="4" Opacity="0" MinHeight="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Padding="{ThemeResource ScrollBarHorizontalIncreaseMargin}" Template="{StaticResource HorizontalIncrementTemplate}" Width="{StaticResource ScrollBarSize}" AllowFocusOnInteraction="False" VerticalAlignment="Center" />
</Grid>
<Grid x:Name="HorizontalPanningRoot" MinWidth="24" Visibility="Collapsed" Opacity="0" contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
<Border x:Name="HorizontalPanningThumb" VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="{ThemeResource ScrollBarPanningThumbBackground}" BorderThickness="0" Height="2" MinWidth="32" Margin="0,2,0,2"/>
Expand All @@ -720,7 +725,7 @@
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
Opacity="0" Grid.RowSpan="5" Margin="0" StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}" Fill="{ThemeResource ScrollBarTrackFill}" Stroke="{ThemeResource ScrollBarTrackStroke}" />
<RepeatButton x:Name="VerticalSmallDecrease" Opacity="0" Height="{StaticResource ScrollBarSize}" MinWidth="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Margin="0" Grid.Row="0" Template="{StaticResource VerticalDecrementTemplate}" HorizontalAlignment="Center" />
<RepeatButton x:Name="VerticalSmallDecrease" Grid.Row="0" Opacity="0" Height="{StaticResource ScrollBarSize}" MinWidth="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Padding="{ThemeResource ScrollBarVerticalDecreaseMargin}" Template="{StaticResource VerticalDecrementTemplate}" HorizontalAlignment="Center" />
<RepeatButton x:Name="VerticalLargeDecrease" Opacity="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="0" IsTabStop="False" Interval="50" Grid.Row="1" AllowFocusOnInteraction="False" Template="{StaticResource RepeatButtonTemplate}" />
<Thumb x:Name="VerticalThumb"
Opacity="0"
Expand All @@ -739,7 +744,7 @@
</Thumb>

<RepeatButton x:Name="VerticalLargeIncrease" Opacity="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" Interval="50" Grid.Row="3" AllowFocusOnInteraction="False" Template="{StaticResource RepeatButtonTemplate}" />
<RepeatButton x:Name="VerticalSmallIncrease" Opacity="0" Height="{StaticResource ScrollBarSize}" MinWidth="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Margin="0" Grid.Row="4" Template="{StaticResource VerticalIncrementTemplate}" HorizontalAlignment="Center" />
<RepeatButton x:Name="VerticalSmallIncrease" Grid.Row="4" Opacity="0" Height="{StaticResource ScrollBarSize}" MinWidth="{StaticResource ScrollBarSize}" IsTabStop="False" Interval="50" Padding="{ThemeResource ScrollBarVerticalIncreaseMargin}" Template="{StaticResource VerticalIncrementTemplate}" HorizontalAlignment="Center" />
</Grid>
<Grid x:Name="VerticalPanningRoot" MinHeight="24" Visibility="Collapsed" Opacity="0" contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
<Border x:Name="VerticalPanningThumb" VerticalAlignment="Top" HorizontalAlignment="Right" Background="{ThemeResource ScrollBarPanningThumbBackground}" BorderThickness="0" Width="2" MinHeight="32" Margin="2,0,2,0" />
Expand Down
12 changes: 6 additions & 6 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-4.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1507,7 +1507,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=4,0,0,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand Down Expand Up @@ -1568,7 +1568,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,0,4,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand Down Expand Up @@ -1639,7 +1639,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,4,0,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand All @@ -1655,7 +1655,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
Padding=0,4,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=#00FFFFFF
Expand Down Expand Up @@ -1775,7 +1775,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,0,0,4
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand All @@ -1791,7 +1791,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
Padding=0,0,0,4
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=#00FFFFFF
Expand Down
12 changes: 6 additions & 6 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-5.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1507,7 +1507,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=4,0,0,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand Down Expand Up @@ -1568,7 +1568,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,0,4,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand Down Expand Up @@ -1639,7 +1639,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,4,0,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand All @@ -1655,7 +1655,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
Padding=0,4,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=#00FFFFFF
Expand Down Expand Up @@ -1775,7 +1775,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,0,0,4
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand All @@ -1791,7 +1791,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
Padding=0,0,0,4
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=#00FFFFFF
Expand Down
12 changes: 6 additions & 6 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-6.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1507,7 +1507,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=4,0,0,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand Down Expand Up @@ -1568,7 +1568,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,0,4,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand Down Expand Up @@ -1639,7 +1639,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,4,0,0
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand All @@ -1655,7 +1655,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
Padding=0,4,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=#00FFFFFF
Expand Down Expand Up @@ -1775,7 +1775,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Primitives.RepeatButton]
Padding=11,5,11,5
Padding=0,0,0,4
Foreground=#E4000000
BorderThickness=1,1,1,1
BorderBrush=Windows.UI.Xaml.Media.LinearGradientBrush
Expand All @@ -1791,7 +1791,7 @@
Visibility=Visible
RenderSize=0,0
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
Padding=0,0,0,4
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=#00FFFFFF
Expand Down
Loading

0 comments on commit 89bc99d

Please sign in to comment.