How to remove the underline in SfAutoComplete?

[Bharath]

How to make SfAutocomplete as Rounded entry ?

https://ibb.co/Rpx3Gyg

[Muneesh Kumar G]

Hi Bharath, 

 

Greetings from Syncfusion.  

 

We have analyzed your requirement and we have achieved this by using custom renderer with Rounded Corner and without underline in SfAutoComplete. Please have the code snippet and sample from the below link, 

 

Code Snippet: 

Android: 

 

if (Control != null) 

       { 

                GradientDrawable gd = new GradientDrawable(); 

                gd.SetColor(Android.Graphics.Color.White); 

                gd.SetCornerRadius(12); 

                gd.SetStroke(2, Android.Graphics.Color.LightGray); 

                this.Control.SetBackgroundDrawable(gd);   

    } 

 

iOS: 

 

if (Control != null) 

            { 

                if (e.NewElement != null) 

                    e.NewElement.SizeChanged += (obj, args) => 

                    { 

                        var borderLayer = new CALayer(); 

                        borderLayer.Frame = new CoreGraphics.CGRect(0, 0, this.Control.Frame.Width, this.Control.Frame.Height); 

                        borderLayer.BackgroundColor = UIColor.Clear.CGColor; 

                        borderLayer.BorderColor = UIColor.Gray.CGColor; 

                        borderLayer.BorderWidth = 2; 

                        borderLayer.CornerRadius = 10; 

                        this.Control.TextField.BorderStyle = UITextBorderStyle.None; 

                        this.Control.Layer.AddSublayer(borderLayer); 

                    }; 

            } 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomRenderer1163330518 

 

Screenshot: 

Please check with the sample and let us know if you have any concern. 

 

Regards,  

Muneesh Kumar G 

 

[Bharath]

I have tried with your same example for sfautocomplete control. That underline is still showing. @Muneesh Kumar 

protected override void OnElementChanged(ElementChangedEventArgs<SfAutoComplete> e)
		{
			base.OnElementChanged(e);
			if (Control != null)
			{
                //Control.Background = Context.GetDrawable(Resource.Drawable.rounded_corners);
                GradientDrawable gd = new GradientDrawable();
                gd.SetShape(ShapeType.Rectangle);
                gd.SetColor(Android.Graphics.Color.Transparent);
                gd.SetCornerRadius(15);
                gd.SetStroke(4, Android.Graphics.Color.LightGray);
                //Control.AutoEditText.SetBackgroundColor(Android.Graphics.Color.Transparent);
                Control.SetBackgroundDrawable(gd);
            }
		}

[Muneesh Kumar G]

Hi Bharath, 

 

To remove the underline, you have to set the ShowBorder API as false in SfAutoComplete. Please have the code snippet and sample from the below link, 

 

Code Snippet: 

 

ShowBorder="False"   

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomRenderer1163330518 

 

UG Link: https://help.syncfusion.com/xamarin/sfautocomplete/customizing-autocomplete 

 

 

Screenshot: 

Please check with the sample and let us know if you have any concern. 

 

Regards,  

Muneesh Kumar G 

 

[Bharath]

Thank you it worked for me..

[Muneesh Kumar G]

Hi Bharath, 

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Thanks, 

Muneesh Kumar G.