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.

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

[Spec] Rounded Corners #10

Closed
Tracked by #22
jsuarezruiz opened this issue May 18, 2020 · 4 comments
Closed
Tracked by #22

[Spec] Rounded Corners #10

jsuarezruiz opened this issue May 18, 2020 · 4 comments
Labels
area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing proposal/open t/enhancement ☀️ New feature or request

Comments

@jsuarezruiz
Copy link
Contributor

Rounded Corners

Rounded Corners are a common visual requirement.

corners

API

We need to add an interface for defining what's required for a View to implement corner rounding (and provide CSS support):

interface IRoundedCorner
{
	CornerRadius CornerRadius { get; }
	void CornerRadiusChanged(CornerRadius oldValue, CornerRadius newValue);
}

The CornerRadius BindableProperty can be implemented in one place:

static class RoundedCorner
{
	public static readonly BindableProperty CornerRadiusProperty = 
	     BindableProperty.Create(nameof(CornerRadius), typeof(CornerRadius), typeof(IRoundedCorners));
}

The following Views are candidates for rounded corners:

  • BoxView
  • Button
  • Image
  • ImageButton
  • Layouts
  • ScrollView

Scenarios

C# Example

var grid = new Grid();
grid.CornerRadius = new CornerRadius(12, 0, 12, 6);

XAML Example

<Grid
     CornerRadius="12, 0, 12, 6">
</Grid>

Difficulty: Medium

Providing the interface is simple; individual implementations may vary in difficulty.

@jsuarezruiz jsuarezruiz added the t/enhancement ☀️ New feature or request label May 18, 2020
@aguywithcode
Copy link

Looks like Button has a CornerRadiusProperty already. Perhaps it should be extracted to a higher class in the tree perhaps View or VisualElement?

@ederbond
Copy link
Contributor

Also make sure that if the element is set to have shadow, the shadow should be rounded too.
I've opened some issues for this in the past too. xamarin/Xamarin.Forms#3867
and here xamarin/Xamarin.Forms#3871

@MitchBomcanhao
Copy link

Would the rounded corners clip the content of the control?

@themronion
Copy link

What about single rounded corners on frame - like PancakeView? I think this is more desirable and wanted by xamarin devs. Thumbs up who agrees!

@Redth Redth added this to the 6.0.100-preview.7 milestone Jul 16, 2021
@Redth Redth closed this as completed Sep 27, 2021
@Redth Redth added the area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing label Sep 27, 2021
@Redth Redth modified the milestones: 6.0.100-rc.1, 6.0.101-preview.9 Sep 27, 2021
@ghost ghost locked as resolved and limited conversation to collaborators Feb 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing proposal/open t/enhancement ☀️ New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants