Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update elevation strokes #4250

Merged
merged 1 commit into from
Feb 19, 2021
Merged

Update elevation strokes #4250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions dev/CommonStyles/Common_themeresources_any.xaml
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{StaticResource ControlStrokeColorSecondary}"/>
<GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorSecondary}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Expand All @@ -228,7 +228,7 @@
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{StaticResource ControlStrokeColorOnAccentSecondary}"/>
<GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorOnAccentSecondary}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorOnAccentDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Expand Down Expand Up @@ -440,7 +440,7 @@
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{StaticResource ControlStrokeColorSecondary}"/>
<GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorSecondary}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Expand All @@ -457,7 +457,7 @@
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{StaticResource ControlStrokeColorOnAccentSecondary}"/>
<GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorOnAccentSecondary}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorOnAccentDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Expand Down
12 changes: 6 additions & 6 deletions dev/CommonStyles/TextBox_themeresources.xaml
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,17 @@
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{StaticResource ControlAAFillColorDefault}"/>
<GradientStop Offset="0.5" Color="{StaticResource ControlAAStrokeColorDefault}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="TextControlElevationBorderFocusedBrush" MappingMode="Absolute" StartPoint="0,1.5" EndPoint="0,2.5">
<LinearGradientBrush x:Key="TextControlElevationBorderFocusedBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,2">
<LinearGradientBrush.RelativeTransform>
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{ThemeResource SystemAccentColorLight2}"/>
<GradientStop Offset="1.0" Color="{ThemeResource SystemAccentColorLight2}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Expand Down Expand Up @@ -159,17 +159,17 @@
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{StaticResource ControlAAFillColorDefault}"/>
<GradientStop Offset="0.5" Color="{StaticResource ControlAAStrokeColorDefault}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="TextControlElevationBorderFocusedBrush" MappingMode="Absolute" StartPoint="0,1.5" EndPoint="0,2.5">
<LinearGradientBrush x:Key="TextControlElevationBorderFocusedBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,2">
<LinearGradientBrush.RelativeTransform>
<ScaleTransform ScaleY="-1" CenterY="0.5"/>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{ThemeResource SystemAccentColorDark1}"/>
<GradientStop Offset="1.0" Color="{ThemeResource SystemAccentColorDark1}"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two stops at the same coordinate seems odd, especially when there's not a stop at 0. What does this mean?

Copy link
Contributor Author

@beervoley beervoley Feb 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jevansaks @tashatitova

StartPoint="0,0" EndPoint="0,2"
<GradientStop Offset="1.0" Color="{ThemeResource SystemAccentColorDark1}"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>

As I understand it: here we have StartPoint=0,0 and EndPoint=0,2; by setting both stops to 1 we get the bottom stroke of the border to be one solid color (in this case SystemAccentColorDark1) and not interpolate between SystemAccentColorDark1 and ControlStrokeColorDefault at all until we reach end point 0,2. After we reach that point (0,2) we'll switch the color to SystemAccentColorDark1. By doing this, we'll make sure that bottom stroke is one solid color and is not interpolated along the way until we reach the stop.

image

To see the difference:

StartPoint="0,0" EndPoint="0,2"
<GradientStop Offset="0.5" Color="Red"/>
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>

In this case we'll draw the bottom stroke (1px height: Ofsset=0.5 out of height=2 yields 1px) with Red and interpolation will start right after that on the rounded corner and eventually reach ControlStrokeColorDefault:
image

<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Expand Down