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

Jump to bottom

fix: Adjust corner-radius border rendering on Skia #10260

Merged
merged 6 commits into from
Oct 27, 2022
Merged

fix: Adjust corner-radius border rendering on Skia #10260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f9a6eb6
fix: Adjust corner-radius border rendering on Skia
MartinZikmund Oct 26, 2022
ff27c65
fix: Ensure border thickness is used for both outer and inner corners…
MartinZikmund Oct 26, 2022
19d0a0c
chore: Avoid creating radius by border thickness only
MartinZikmund Oct 27, 2022
8c30006
test: Extend corner radius + thickness test with element sizing
MartinZikmund Oct 27, 2022
a5ce5f3
fix: Distribute corner radius fairly along each side of an element
MartinZikmund Oct 27, 2022
c74ff5a
perf: Reuse radii arrays
MartinZikmund Oct 27, 2022
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
105 changes: 79 additions & 26 deletions ...ests.Shared/Windows_UI_Xaml_Controls/BorderTests/Border_CornerRadius_BorderThickness.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@
d:DesignWidth="400">

<ScrollViewer>
<StackPanel Spacing="10"
<StackPanel Spacing="8"
Width="400">
<Grid x:Name="MyBackgroundUnderneath"
Width="200"
Height="200"
Width="{x:Bind ElementWidth, Mode=OneWay}"
Height="{x:Bind ElementHeight, Mode=OneWay}"
Background="White">
<!-- Using Red with 50% Opacity for the BorderBrush and Blue with 50% Opacity for the Background here -->
<!-- Easier to catch specific issues for the Background and Border that way compare to using opaque colors for this test -->
<Border Width="200"
Height="200"
<Border Width="{x:Bind ElementWidth, Mode=OneWay}"
Height="{x:Bind ElementHeight, Mode=OneWay}"
x:Name="MyBorder"
BorderThickness="{x:Bind MyBorderThickness, Mode=TwoWay}"
CornerRadius="{x:Bind MyCornerRadius, Mode=TwoWay}"
BorderThickness="{x:Bind MyBorderThickness, Mode=OneWay}"
CornerRadius="{x:Bind MyCornerRadius, Mode=OneWay}"
BorderBrush="#80FF0000"
Background="#800000FF" />
<Border BorderBrush="Yellow"
Expand Down Expand Up @@ -59,62 +59,115 @@
BorderThickness="1"
Height="10"
Width="10" />
<Border BorderBrush="Yellow"
x:Name="TopLeftTarget"
HorizontalAlignment="Left"
VerticalAlignment="Top"
BorderThickness="1"
Height="10"
Width="10" />
<Border BorderBrush="Yellow"
x:Name="TopRightTarget"
HorizontalAlignment="Right"
VerticalAlignment="Top"
BorderThickness="1"
Height="10"
Width="10" />
<Border BorderBrush="Yellow"
x:Name="BottomLeftTarget"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
BorderThickness="1"
Height="10"
Width="10" />
<Border BorderBrush="Yellow"
x:Name="BottomRightTarget"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
BorderThickness="1"
Height="10"
Width="10" />
</Grid>

<!-- Corner radius -->
<StackPanel Orientation="Horizontal"
Spacing="10">
<TextBlock Text="CornerRadius:" />
Spacing="8">
<TextBlock Text="Corner Radius:" FontWeight="Bold" VerticalAlignment="Center" />
<CheckBox Content="Lock"
x:Name="LockCornerRadiusCheck"
VerticalAlignment="Center"
IsChecked="{x:Bind LockCornerRadius, Mode=TwoWay}" />
</StackPanel>
<TextBlock Text="Top Left:" />
<Slider Minimum="0"
<Slider Header="Top Left:"
Minimum="0"
Maximum="100"
x:Name="TopLeftCornerRadiusSlider"
Value="{x:Bind TopLeftCornerRadius, Mode=TwoWay}" />
<TextBlock Text="Top Right:" />
<Slider Minimum="0"
<Slider Header="Top Right:"
Minimum="0"
Maximum="100"
x:Name="TopRightCornerRadiusSlider"
Value="{x:Bind TopRightCornerRadius, Mode=TwoWay}" />
<TextBlock Text="Bottom Right:" />
<Slider Minimum="0"
<Slider Header="Bottom Right:"
Minimum="0"
Maximum="100"
x:Name="BottomRightCornerRadiusSlider"
Value="{x:Bind BottomRightCornerRadius, Mode=TwoWay}" />
<TextBlock Text="Bottom Left:" />
<Slider Minimum="0"
<Slider Header="Bottom Left:"
Minimum="0"
Maximum="100"
x:Name="BottomLeftCornerRadiusSlider"
Value="{x:Bind BottomLeftCornerRadius, Mode=TwoWay}" />

<!-- Border thickness -->
<StackPanel Orientation="Horizontal"
Spacing="10">
<TextBlock Text="BorderThickness:" />
<TextBlock Text="Border Thickness:" FontWeight="Bold" VerticalAlignment="Center" />
<CheckBox Content="Lock"
x:Name="LockBorderThicknessCheck"
VerticalAlignment="Center"
IsChecked="{x:Bind LockBorderThickness, Mode=TwoWay}" />
</StackPanel>
<TextBlock Text="Left:" />
<Slider Minimum="0"
<Slider Header="Left:"
Minimum="0"
Maximum="100"
x:Name="LeftBorderThicknessSlider"
Value="{x:Bind LeftBorderThickness, Mode=TwoWay}" />
<TextBlock Text="Top:" />
<Slider Minimum="0"
<Slider Header="Left:"
Minimum="0"
Maximum="100"
x:Name="TopBorderThicknessSlider"
Value="{x:Bind TopBorderThickness, Mode=TwoWay}" />
<TextBlock Text="Right:" />
<Slider Minimum="0"
<Slider Header="Right:"
Minimum="0"
Maximum="100"
x:Name="RightBorderThicknessSlider"
Value="{x:Bind RightBorderThickness, Mode=TwoWay}" />
<TextBlock Text="Bottom:" />
<Slider Minimum="0"
<Slider Header="Bottom:"
Minimum="0"
Maximum="100"
x:Name="BottomBorderThicknessSlider"
Value="{x:Bind BottomBorderThickness, Mode=TwoWay}" />

<!-- Element size -->
<StackPanel Orientation="Horizontal"
Spacing="8">
<TextBlock Text="Size:" FontWeight="Bold" VerticalAlignment="Center" />
<CheckBox Content="Lock"
VerticalAlignment="Center"
x:Name="LockSizeCheck"
IsChecked="{x:Bind LockSize, Mode=TwoWay}" />
</StackPanel>
<Slider Header="Width:"
Minimum="0"
Maximum="200"
x:Name="WidthSlider"
Value="{x:Bind ElementWidth, Mode=TwoWay}" />
<Slider Header="Height:"
Minimum="0"
Maximum="200"
x:Name="HeightSlider"
Value="{x:Bind ElementHeight, Mode=TwoWay}" />
</StackPanel>
</ScrollViewer>
</UserControl>
Loading