Skip to content

Commit

Permalink
Fix ScrollBar rounded corners (#1485)
Browse files Browse the repository at this point in the history 
* Fix ScrollBar rounded corners

* Guard NaN

* Update idl
  • Loading branch information
@kaiguo
kaiguo authored Oct 25, 2019
1 parent 17a1e5c commit 22e5052
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 9 deletions.
12 changes: 11 additions & 1 deletion dev/Common/CornerRadiusFilterConverter.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,17 @@ winrt::IInspectable CornerRadiusFilterConverter::Convert(
winrt::hstring const& language)
{
auto cornerRadius = unbox_value<winrt::CornerRadius>(value);
auto filterType = Filter();

const auto scale = Scale();
if (!std::isnan(scale))
{
cornerRadius.TopLeft *= scale;
cornerRadius.TopRight *= scale;
cornerRadius.BottomRight *= scale;
cornerRadius.BottomLeft *= scale;
}

const auto filterType = Filter();
if (filterType == winrt::CornerRadiusFilterKind::TopLeftValue ||
filterType == winrt::CornerRadiusFilterKind::BottomRightValue)
{
Expand Down
3 changes: 3 additions & 0 deletions dev/Common/CornerRadiusFilterConverters.idl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ runtimeclass CornerRadiusFilterConverter : Windows.UI.Xaml.DependencyObject, Win

[MUX_DEFAULT_VALUE("winrt::CornerRadiusFilterKind::None")]
CornerRadiusFilterKind Filter{ get; set; };
[MUX_DEFAULT_VALUE("1.0")]
Double Scale{ get; set; };

static Windows.UI.Xaml.DependencyProperty FilterProperty{ get; };
static Windows.UI.Xaml.DependencyProperty ScaleProperty{ get; };
};

[WUXC_VERSION_MUXONLY]
Expand Down
4 changes: 2 additions & 2 deletions dev/CommonStyles/APITests/CommonStylesTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ public void CornerRadiusFilterConverterTest()
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:primitives='using:Microsoft.UI.Xaml.Controls.Primitives'>
<StackPanel.Resources>
<primitives:CornerRadiusFilterConverter x:Key='TopCornerRadiusFilterConverter' Filter='Top'/>
<primitives:CornerRadiusFilterConverter x:Key='TopCornerRadiusFilterConverter' Filter='Top' Scale='2'/>
<primitives:CornerRadiusFilterConverter x:Key='RightCornerRadiusFilterConverter' Filter='Right'/>
<primitives:CornerRadiusFilterConverter x:Key='BottomCornerRadiusFilterConverter' Filter='Bottom'/>
<primitives:CornerRadiusFilterConverter x:Key='LeftCornerRadiusFilterConverter' Filter='Left'/>
Expand All @@ -102,7 +102,7 @@ public void CornerRadiusFilterConverterTest()
var bottomRadiusGrid = (Grid)root.FindName("BottomRadiusGrid");
var leftRadiusGrid = (Grid)root.FindName("LeftRadiusGrid");

Verify.AreEqual(new CornerRadius(6, 6, 0, 0), topRadiusGrid.CornerRadius);
Verify.AreEqual(new CornerRadius(12, 12, 0, 0), topRadiusGrid.CornerRadius);
Verify.AreEqual(new CornerRadius(0, 6, 6, 0), rightRadiusGrid.CornerRadius);
Verify.AreEqual(new CornerRadius(0, 0, 6, 6), bottomRadiusGrid.CornerRadius);
Verify.AreEqual(new CornerRadius(6, 0, 0, 6), leftRadiusGrid.CornerRadius);
Expand Down
23 changes: 23 additions & 0 deletions dev/Generated/CornerRadiusFilterConverter.properties.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
CppWinRTActivatableClassWithDPFactory(CornerRadiusFilterConverter)

GlobalDependencyProperty CornerRadiusFilterConverterProperties::s_FilterProperty{ nullptr };
GlobalDependencyProperty CornerRadiusFilterConverterProperties::s_ScaleProperty{ nullptr };

CornerRadiusFilterConverterProperties::CornerRadiusFilterConverterProperties()
{
Expand All @@ -28,11 +29,23 @@ void CornerRadiusFilterConverterProperties::EnsureProperties()
ValueHelper<winrt::CornerRadiusFilterKind>::BoxValueIfNecessary(winrt::CornerRadiusFilterKind::None),
nullptr);
}
if (!s_ScaleProperty)
{
s_ScaleProperty =
InitializeDependencyProperty(
L"Scale",
winrt::name_of<double>(),
winrt::name_of<winrt::CornerRadiusFilterConverter>(),
false /* isAttached */,
ValueHelper<double>::BoxValueIfNecessary(1.0),
nullptr);
}
}

void CornerRadiusFilterConverterProperties::ClearProperties()
{
s_FilterProperty = nullptr;
s_ScaleProperty = nullptr;
}

void CornerRadiusFilterConverterProperties::Filter(winrt::CornerRadiusFilterKind const& value)
Expand All @@ -44,3 +57,13 @@ winrt::CornerRadiusFilterKind CornerRadiusFilterConverterProperties::Filter()
{
return ValueHelper<winrt::CornerRadiusFilterKind>::CastOrUnbox(static_cast<CornerRadiusFilterConverter*>(this)->GetValue(s_FilterProperty));
}

void CornerRadiusFilterConverterProperties::Scale(double value)
{
static_cast<CornerRadiusFilterConverter*>(this)->SetValue(s_ScaleProperty, ValueHelper<double>::BoxValueIfNecessary(value));
}

double CornerRadiusFilterConverterProperties::Scale()
{
return ValueHelper<double>::CastOrUnbox(static_cast<CornerRadiusFilterConverter*>(this)->GetValue(s_ScaleProperty));
}
5 changes: 5 additions & 0 deletions dev/Generated/CornerRadiusFilterConverter.properties.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,14 @@ class CornerRadiusFilterConverterProperties
void Filter(winrt::CornerRadiusFilterKind const& value);
winrt::CornerRadiusFilterKind Filter();

void Scale(double value);
double Scale();

static winrt::DependencyProperty FilterProperty() { return s_FilterProperty; }
static winrt::DependencyProperty ScaleProperty() { return s_ScaleProperty; }

static GlobalDependencyProperty s_FilterProperty;
static GlobalDependencyProperty s_ScaleProperty;

static void EnsureProperties();
static void ClearProperties();
Expand Down
20 changes: 14 additions & 6 deletions dev/ScrollBar/ScrollBar_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">

Expand Down Expand Up @@ -198,6 +199,9 @@
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<primitives:CornerRadiusFilterConverter x:Key="TopLeftCornerRadiusDoubleValueConverter8x" Filter="TopLeftValue" Scale="8"/>
<primitives:CornerRadiusFilterConverter x:Key="BottomRightCornerRadiusDoubleValueConverter8x" Filter="BottomRightValue" Scale="8"/>

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

<Style x:Key="DefaultScrollBarStyle" TargetType="ScrollBar">
Expand Down Expand Up @@ -420,9 +424,9 @@
</ControlTemplate>
<ControlTemplate x:Key="VerticalThumbTemplate" TargetType="Thumb">
<Rectangle x:Name="ThumbVisual" Fill="{TemplateBinding Background}"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter8x}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter8x}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
Expand Down Expand Up @@ -456,9 +460,9 @@
<ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
<Rectangle x:Name="ThumbVisual" Fill="{TemplateBinding Background}"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter8x}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter8x}}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -621,8 +625,6 @@
<Setter Target="VerticalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokePointerOver}" />
<Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillPointerOver}" />
<Setter Target="VerticalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillPointerOver}" />
<contract7Present:Setter Target="HorizontalThumb.CornerRadius" Value="0" />
<contract7Present:Setter Target="VerticalThumb.CornerRadius" Value="0" />
</VisualState.Setters>

<Storyboard>
Expand All @@ -642,6 +644,12 @@
<DoubleAnimation Duration="{ThemeResource ScrollBarExpandDuration}" BeginTime="{ThemeResource ScrollBarExpandBeginTime}" Storyboard.TargetName="HorizontalLargeDecrease" Storyboard.TargetProperty="Opacity" To="1" />
<DoubleAnimation Duration="{ThemeResource ScrollBarExpandDuration}" BeginTime="{ThemeResource ScrollBarExpandBeginTime}" Storyboard.TargetName="HorizontalSmallDecrease" Storyboard.TargetProperty="Opacity" To="1" />
<DoubleAnimation Duration="{ThemeResource ScrollBarExpandDuration}" BeginTime="{ThemeResource ScrollBarExpandBeginTime}" Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Opacity" To="1" />
<contract7Present:ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="CornerRadius">
<DiscreteObjectKeyFrame KeyTime="{ThemeResource ScrollBarExpandBeginTime}" Value="0" />
</contract7Present:ObjectAnimationUsingKeyFrames>
<contract7Present:ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="CornerRadius">
<DiscreteObjectKeyFrame KeyTime="{ThemeResource ScrollBarExpandBeginTime}" Value="0" />
</contract7Present:ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandedWithoutAnimation">
Expand Down

0 comments on commit 22e5052

Please sign in to comment.