CornerRadiusEffect

samples/XCT.Sample/Pages/Effects/CornerRadiusEffectPage.xaml

@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<pages:BasePage
+    x:Class="Xamarin.CommunityToolkit.Sample.Pages.Effects.CornerRadiusEffectPage"
+    xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:pages="clr-namespace:Xamarin.CommunityToolkit.Sample.Pages"
+    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
+    x:Name="Page">
+
+    <pages:BasePage.Resources>
+        <ResourceDictionary>
+            <Style TargetType="Slider">
+                <Setter Property="MaximumTrackColor" Value="White" />
+                <Setter Property="ThumbColor" Value="Blue" />
+            </Style>
+            <Style TargetType="Label">
+                <Setter Property="LineBreakMode" Value="TailTruncation" />
+            </Style>
+        </ResourceDictionary>
+    </pages:BasePage.Resources>
+
+    <ScrollView>
+        <Grid RowDefinitions="*,Auto">
+            <Grid Grid.Row="0">
+                <ContentView
+                    Grid.Row="0"
+                    xct:CornerRadiusEffect.CornerRadius="{Binding CornerRadius, Source={x:Reference Page}}"
+                    BackgroundColor="Blue"
+                    HeightRequest="{Binding Value, Source={x:Reference Name=SliderHeight}}"
+                    HorizontalOptions="Center"
+                    VerticalOptions="Center"
+                    WidthRequest="{Binding Value, Source={x:Reference Name=SliderWidth}}" />
+            </Grid>
+
+            <Grid
+                Grid.Row="1"
+                Padding="10"
+                BackgroundColor="LightGray"
+                RowSpacing="0">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="100" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="100" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+
+                <Label
+                    Grid.Row="0"
+                    Grid.Column="1"
+                    HorizontalOptions="End"
+                    Text="Width" />
+                <Slider
+                    x:Name="SliderWidth"
+                    Grid.Row="0"
+                    Grid.Column="2"
+                    Maximum="1000"
+                    Minimum="100"
+                    Value="100" />
+
+                <Label
+                    Grid.Row="0"
+                    Grid.Column="3"
+                    HorizontalOptions="End"
+                    Text="Height" />
+                <Slider
+                    x:Name="SliderHeight"
+                    Grid.Row="0"
+                    Grid.Column="4"
+                    Maximum="1000"
+                    Minimum="100"
+                    Value="100" />
+
+                <Label
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    HorizontalOptions="End"
+                    Text="TopLeft" />
+                <Slider
+                    x:Name="SliderCornerRadiusTopLeft"
+                    Grid.Row="1"
+                    Grid.Column="2"
+                    Maximum="200"
+                    Minimum="0"
+                    Value="10" />
+
+                <Label
+                    Grid.Row="1"
+                    Grid.Column="3"
+                    HorizontalOptions="End"
+                    Text="TopRight" />
+                <Slider
+                    x:Name="SliderCornerRadiusTopRight"
+                    Grid.Row="1"
+                    Grid.Column="4"
+                    Maximum="200"
+                    Minimum="0"
+                    Value="10" />
+
+                <Label
+                    Grid.Row="2"
+                    Grid.Column="1"
+                    HorizontalOptions="End"
+                    Text="BottomLeft" />
+                <Slider
+                    x:Name="SliderCornerRadiusBottomLeft"
+                    Grid.Row="2"
+                    Grid.Column="2"
+                    Maximum="200"
+                    Minimum="0"
+                    Value="10" />
+
+                <Label
+                    Grid.Row="2"
+                    Grid.Column="3"
+                    HorizontalOptions="End"
+                    Text="BottomRight" />
+                <Slider
+                    x:Name="SliderCornerRadiusBottomRight"
+                    Grid.Row="2"
+                    Grid.Column="4"
+                    Maximum="200"
+                    Minimum="0"
+                    Value="10" />
+            </Grid>
+        </Grid>
+    </ScrollView>
+</pages:BasePage>

samples/XCT.Sample/Pages/Effects/CornerRadiusEffectPage.xaml.cs

@@ -0,0 +1,27 @@
+using Xamarin.Forms;
+
+namespace Xamarin.CommunityToolkit.Sample.Pages.Effects
+{
+	public partial class CornerRadiusEffectPage
+	{
+		public CornerRadiusEffectPage()
+		{
+			InitializeComponent();
+
+			SliderCornerRadiusTopLeft.ValueChanged += OnCornerRadiusValueChanged;
+			SliderCornerRadiusTopRight.ValueChanged += OnCornerRadiusValueChanged;
+			SliderCornerRadiusBottomLeft.ValueChanged += OnCornerRadiusValueChanged;
+			SliderCornerRadiusBottomRight.ValueChanged += OnCornerRadiusValueChanged;
+		}
+
+		void OnCornerRadiusValueChanged(object sender, ValueChangedEventArgs e)
+		{
+			CornerRadius = new CornerRadius(
+				SliderCornerRadiusTopLeft.Value, SliderCornerRadiusTopRight.Value,
+				SliderCornerRadiusBottomLeft.Value, SliderCornerRadiusBottomRight.Value);
+			OnPropertyChanged(nameof(CornerRadius));
+		}
+
+		public CornerRadius CornerRadius { get; private set; } = new (10);
+	}
+}

samples/XCT.Sample/ViewModels/Effects/EffectsGalleryViewModel.cs

@@ -50,6 +50,11 @@ protected override IEnumerable<SectionModel> CreateItems() => new[]
 				"The SemanticEffect allows you to set semantic properties for accessibility."),
 
 			new SectionModel(
+				typeof(CornerRadiusEffectPage),
+				nameof(CornerRadiusEffect),
+				"The CornerRadius allows rounded corners everywhere."),
+
+      new SectionModel(
 				typeof(StatusBarEffectPage),
 				nameof(StatusBarEffect),
 				"The StatusBar allows to change status bar color and style. This page also demonstrates Android only NavigationBar changes.")

src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/CornerRadius/CornerRadiusEffect.shared.cs

@@ -0,0 +1,83 @@
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Shapes;
+
+namespace Xamarin.CommunityToolkit.Effects
+{
+	public class CornerRadiusEffect
+	{
+		public static readonly BindableProperty CornerRadiusProperty = BindableProperty.CreateAttached(
+			nameof(CornerRadius),
+			typeof(CornerRadius),
+			typeof(CornerRadiusEffect),
+			default(CornerRadius),
+			propertyChanged: OnCornerRadiusPropertyChanged);
+
+		static void OnCornerRadiusPropertyChanged(BindableObject bindable, object oldValue, object newValue)
+		{
+			if (bindable is not VisualElement elementView)
+				return;
+
+			elementView.SizeChanged -= ElementViewSizeChanged;
+			elementView.SizeChanged += ElementViewSizeChanged;
+
+			UpdateClip(elementView);
+		}
+
+		static void ElementViewSizeChanged(object? sender, EventArgs e)
+		{
+			if (sender is not VisualElement elementView)
+				return;
+
+			UpdateClip(elementView);
+		}
+
+		public static CornerRadius GetCornerRadius(BindableObject? bindable)
+			=> (CornerRadius)(bindable?.GetValue(CornerRadiusProperty) ?? throw new ArgumentNullException(nameof(bindable)));
+
+		public static void SetCornerRadius(BindableObject? bindable, CornerRadius value)
+			=> bindable?.SetValue(CornerRadiusProperty, value);
+
+		static void UpdateClip(VisualElement elementView)
+		{
+			var rect = new Rect(0, 0, elementView.Width, elementView.Height);
+			var cornerRadius = GetCornerRadius(rect, elementView);
+			if (cornerRadius == default)
+			{
+				elementView.Clip = null;
+				return;
+			}
+
+			if (elementView.Clip is not RoundRectangleGeometry roundRectangleGeometry)
+			{
+				elementView.Clip = new RoundRectangleGeometry(cornerRadius, rect);
+				return;
+			}
+
+			roundRectangleGeometry.CornerRadius = cornerRadius;
+			roundRectangleGeometry.Rect = rect;
+		}
+
+		static CornerRadius GetCornerRadius(Rect rect, VisualElement elementView)
+        {
+	        var maxCornerRadius = Math.Min(rect.Width, rect.Height) / 2;
+	        if (maxCornerRadius <= 0)
+		        return default;
+
+	        var cornerRadius = GetCornerRadius(elementView);
+	        if (cornerRadius.TopLeft > maxCornerRadius ||
+	            cornerRadius.TopRight > maxCornerRadius ||
+	            cornerRadius.BottomLeft > maxCornerRadius ||
+	            cornerRadius.BottomRight > maxCornerRadius)
+	        {
+		        return new CornerRadius(
+			        Math.Min(cornerRadius.TopLeft, maxCornerRadius),
+			        Math.Min(cornerRadius.TopRight, maxCornerRadius),
+			        Math.Min(cornerRadius.BottomLeft, maxCornerRadius),
+			        Math.Min(cornerRadius.BottomRight, maxCornerRadius));
+	        }
+
+	        return cornerRadius;
+        }
+	}
+}