[Proposal] RemoveBorderEffect

RemoveBorderEffect

• Proposed
• Prototype: Not Started
• Implementation: Not Started
  • iOS Support
  • Android Support
  • macOS Support
  • Windows Support
• Unit Tests: Not Started
• Sample: Not Started
• Documentation: Not Started

Summary

Removes a border from a VisualElement

Detailed Design

RemoveBorderEffect.shared.cs

public class RemoveBorderEffect : RoutingEffect
{
}

RemoveBorderEffect.Android.cs

public class RemoveBorderEffect : PlatformEffect
{
  Drawable? originalBackground;

  protected override void OnAttached()
  {
	originalBackground = Control.Background;

	var shape = new ShapeDrawable(new RectShape());
	if (shape.Paint != null)
	{
		shape.Paint.Color = global::Android.Graphics.Color.Transparent;
		shape.Paint.StrokeWidth = 0;
		shape.Paint.SetStyle(Paint.Style.Stroke);
	}

	Control.Background = shape;
  }

  protected override void OnDetached() => Control.Background = originalBackground;
}

RemoveBorderEffect.iOS.cs

public class RemoveBorderEffect : PlatformEffect
{
  UITextBorderStyle? oldBorderStyle;
  
  UITextField? TextField => Control as UITextField;
  
  protected override void OnAttached()
  {
	oldBorderStyle = TextField?.BorderStyle;
	SetBorderStyle(UITextBorderStyle.None);
  }
  
  protected override void OnDetached() => SetBorderStyle(oldBorderStyle);

  void SetBorderStyle(UITextBorderStyle? borderStyle)
  {
	if (TextField != null && borderStyle.HasValue)
		TextField.BorderStyle = borderStyle.Value;
  }
}

RemoveBorderEffect.uwp.cs

public class RemoveBorderEffect : PlatformEffect
{
  Thickness oldBorderThickness;
  
  protected override void OnAttached()
  {
	if (Control is Control uwpControl)
	{
		oldBorderThickness = uwpControl.BorderThickness;
		uwpControl.BorderThickness = new Thickness(0.0);
	}
  }
  
  protected override void OnDetached()
  {
	if (Control is Control uwpControl)
	{
		uwpControl.BorderThickness = oldBorderThickness;
	}
  }
}

Usage Syntax

XAML Usage

<Label
    <Label.Effects>
        <local: RemoveBorderEffect/>
    </Label.Effects>
</Label>

C# Usage

var label = new Label();
label.Effects.Add(new RemoveBorderEffect());

[pictos]

In order to remove the Entry border you can do the following for android and ios:

EntryHandler.Mapper.AppendToMapping("Background", (handler, view) =>
{
#if ANDROID
	var shape = new Android.Graphics.Drawables.ShapeDrawable(new Android.Graphics.Drawables.Shapes.RectShape());

	if (shape.Paint is not null)
	{
		shape.Paint.Color = Android.Graphics.Color.Transparent;
		shape.Paint.StrokeWidth = 0;
		shape.Paint.SetStyle(Android.Graphics.Paint.Style.Stroke);
	}
	handler.PlatformView.Background = shape;
#elif IOS || MACCATALYST
	handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
});

For windows just add these resources on your Platform/Windows/App.xaml

<maui:MauiWinUIApplication.Resources>
	<Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
	<Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
</maui:MauiWinUIApplication.Resources>

With that I still believe it’s a very simple code to keep here.

[pictos]

@KSemenenko you can open an issue on Maui repo itself, since it’s related to a control… Maybe it’s something that you can solve already using an style.