Skip to content

Commit

Permalink
Update ControlsV2 scrollbar template (#14846)
Browse files Browse the repository at this point in the history 
This commit updates our scrollbar template to microsoft-ui-xaml at ceeab5f.
This incorporates the bug fix for MSFT-39442675.
  • Loading branch information
@lhecker
lhecker authored Feb 15, 2023
1 parent c08742f commit 6a8bba9
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 28 deletions.
1 change: 1 addition & 0 deletions .github/actions/spelling/expect/expect.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1575,6 +1575,7 @@ replatformed
Replymessage
repositorypath
Requiresx
rerasterize
rescap
Resequence
RESETCONTENT
Expand Down
58 changes: 30 additions & 28 deletions src/cascadia/TerminalControl/TermControl.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@
-->

<x:Double x:Key="ScrollBarSize">16</x:Double>
<CornerRadius x:Key="ScrollBarCornerRadius">0</CornerRadius>
<CornerRadius x:Key="ScrollBarThumbCornerRadius">3</CornerRadius>

<Style x:Key="ForkedScrollbarTemplate"
TargetType="ScrollBar">
Expand Down Expand Up @@ -120,16 +118,16 @@
Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleY">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Expand Down Expand Up @@ -187,16 +185,16 @@
Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleY">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Expand Down Expand Up @@ -253,16 +251,16 @@
Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleY">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Expand Down Expand Up @@ -319,16 +317,16 @@
Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleY">
Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
<DiscreteDoubleKeyFrame KeyTime="0:0:30"
Expand All @@ -352,9 +350,11 @@
<ControlTemplate x:Key="VerticalThumbTemplate"
TargetType="Thumb">
<Rectangle x:Name="ThumbVisual"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
Fill="{TemplateBinding Background}"
RadiusX="{Binding Source={ThemeResource ScrollBarThumbCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
RadiusY="{Binding Source={ThemeResource ScrollBarThumbCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{ThemeResource ScrollBarThumbStrokeThickness}">
<VisualStateManager.VisualStateGroups>
Expand Down Expand Up @@ -409,6 +409,7 @@
</ControlTemplate>
</Grid.Resources>

<!-- Windows Terminal: This is another addition/customization made by us. -->
<VisualStateManager.CustomVisualStateManager>
<local:ScrollBarVisualStateManager />
</VisualStateManager.CustomVisualStateManager>
Expand All @@ -425,13 +426,13 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--
Windows Terminal: Here we've removed the corner radius
to make our scrollbars be flush with the window frame.
-->
<Rectangle x:Name="HorizontalTrackRect"
Grid.ColumnSpan="5"
Margin="0"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
Fill="{ThemeResource ScrollBarTrackFill}"
Opacity="0"
Stroke="{ThemeResource ScrollBarTrackStroke}"
Expand Down Expand Up @@ -520,13 +521,13 @@
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--
Windows Terminal: Here we've removed the corner radius
to make our scrollbars be flush with the window frame.
-->
<Rectangle x:Name="VerticalTrackRect"
Grid.RowSpan="5"
Margin="0"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
Fill="{ThemeResource ScrollBarTrackFill}"
Opacity="0"
Stroke="{ThemeResource ScrollBarTrackStroke}"
Expand Down Expand Up @@ -929,6 +930,7 @@
To="1"
Duration="{StaticResource ScrollBarOpacityChangeDuration}" />

<!-- Because of the blurriness caused by SCALE animation performed on the object with rounded corners, we have to use dependent animation on width to rerasterize the mask on every tick of the animation. -->
<DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
EnableDependentAnimation="True"
Storyboard.TargetName="VerticalThumb"
Expand Down

0 comments on commit 6a8bba9

Please sign in to comment.