[Proposal] RemoveBorderEffect

[TheCodeTraveler]

RemoveBorderEffect

• [x] 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());

[TheCodeTraveler]

Blocked. Pending the result of https://github.com/CommunityToolkit/Maui/issues/124

[KSemenenko]

any updates here? seems issue 124 is closed

[pictos]

With the new handlers approach, I ask if this is still valuable. I mean on Forms side this change requires a lot of files and work, with MAUI looks very straight forward to be implemented by devs and (from a maintainer point of view) is one less API to maintain

[KSemenenko]

I am facing this problem again, it was in Xamarin.Froms 2.0 and it is still there. Maybe we need to solve this problem somehow =)

[pictos]

@KSemenenko, which problem?

[KSemenenko]

Borderless Entry

[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.

[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.

[ghost]

Reopening Proposal.

Only Proposals moved to the Closed Project Column and Completed Project Column can be closed.

[KSemenenko]

@pictos thanks a lot for sample of code! 👍