How to show dashed line SfTextInputLayout

[Nguyen Khoa Lu]

Hello Syncfusion, I want to show dashed line at bottom control. How to do this?

Current support: 

I want same here:

Thanks you.

[Nguyen Khoa Lu]

3 days for this support. Very slow...

[Sridevi Sivakumar]

Hi Nguyen Khoa Lu,

Sorry for the delay.  We would like to let you know that currently we don’t have a direct support to get the dash border line in SfTextInputLayout. Hence, we are validating this for finding the possibility to achieve this through any of workaround sample. Our development team is working on this with high priority and we will share the possibility on or before December 2, 2020.

We appreciate your patience until then.

Regards,
Sridevi S. 

[Sridevi Sivakumar]

Hi Nguyen Khoa Lu,

Sorry for the delay.  

 

Currently we are facing the difficulties to achieve the requirement. We need some more time and we will update the possible solution on or before December 4, 2020.

Regards,
Sridevi S.

[Nguyen Khoa Lu]

Okay. Thanks you. Im waiting for release my app.

[Sridevi Sivakumar]

Hi Nguyen Khoa Lu,

We have customized the SfTextInputLayout borderline by using SKCanvasView. Please have a workaround sample from the below link.

Link: https://www.syncfusion.com/downloads/support/forum/160132/ze/Sample-1281843357

Code snippet: 

        private void CustomizeLayoutBorder() 

        { 

            Grid grid = ((this.Children[0] as StackLayout).Children[0] as Grid); 

            int row = Grid.GetRow(grid.Children[3]), column = Grid.GetColumn(grid.Children[3]); 

            int rowSpan = Grid.GetRowSpan(grid.Children[3]),columnSpan = Grid.GetColumnSpan(grid.Children[3]); 

            grid.Children.RemoveAt(3); 

            SKCanvasView canvasView = new SKCanvasView(); 

            canvasView.PaintSurface += OnCanvasViewPaintSurface; 

            grid.Children.Add(canvasView); 

            Grid.SetRow(canvasView, row); 

            Grid.SetColumn(canvasView, column); 

            Grid.SetRowSpan(canvasView, rowSpan); 

            Grid.SetColumnSpan(canvasView, columnSpan); 

        } 

 

        private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) 

        { 

            SKCanvas canvas = (args.Surface).Canvas; 

            canvas.Clear(); 

            SKPaint paint = new SKPaint 

            { 

                Style = SKPaintStyle.Stroke, 

                Color = SKColors.Black, 

                StrokeWidth = 5, 

                StrokeCap = SKStrokeCap.Butt, 

                PathEffect = SKPathEffect.CreateDash(new float[] { 15, 15 }, 20) 

            }; 

            SKPath path = new SKPath(); 

            path.LineTo((args.Info).Width, 0); 

            canvas.DrawPath(path, paint); 

        } 

Screenshot: 

 

Please check with the sample and it meets your requirement. Let us know if you need any further assistance.

Regards,
Sridevi S 

 

[Nguyen Khoa Lu]

Thanks for your support, it work well and same my target.

But it has importance problem, my apk increase near 14MB by package SkiaSharp. From 46,437kB to 59,935 kB.

My Company maybe deny solution

[Sridevi Sivakumar]

Hi Nguyen Khoa Lu,

Since we don’t have a direct support, we have achieved it through a possible way to draw the dash line using Xamarin support.  In case of sizing problem as you mentioned, we have achieved the same using Xamarin.Forms Shapes with Line and its dash array support as shown in below.

Code snippet:  

public class LineView : ContentView  

    {  

        public static readonly BindableProperty StrokeDashArrayProperty =  

            BindableProperty.Create(nameof(StrokeDashArray), typeof(DoubleCollection), typeof(LineView), null, BindingMode.Default, null, StrokeDashArrayValueChanged);  

   

        private static void StrokeDashArrayValueChanged(BindableObject bindable, object oldValue, object newValue)  

        {  

            var lineView = bindable as LineView;  

            if(lineView.line != null)  

            {  

                lineView.line.StrokeDashArray = newValue as DoubleCollection;  

            }  

        }  

   

        public DoubleCollection StrokeDashArray  

        {  

            get { return (DoubleCollection)GetValue(StrokeDashArrayProperty); }  

            set { SetValue(StrokeDashArrayProperty, value); }  

        }  

   

        private Line line { get; set; }  

        public LineView()  

        {  

            line = new Line();  

            line.Stroke = Brush.Black;  

            line.StrokeThickness = 2d;  

            var stack = new StackLayout();  

            stack.Children.Add(line);  

            this.Content = stack;  

        }  

        protected override void OnSizeAllocated(double width, double height)  

        {  

            base.OnSizeAllocated(width, height);  

            if (width <= 0 || height <= 0) return;  

            line.X1 = 0;  

            line.X2 = width;  

            line.Y1 = 0;  

            line.Y2 = 0;  

        }  

    }  

Added this LineView as child of TextInputLayout with replacing the default BoxView.

Please find the sample,

Sample Link:  https://www.syncfusion.com/downloads/support/forum/160132/ze/Sample961786103

Regards,
Sridevi S. 

 

[Nguyen Khoa Lu]

Hi you, Thanks for your answer.

Are you sure you tested it on iOS?

I run it on iOS Simulator 12 Pro Max 14.2, It not show dashed line. Android work well.

[Sridevi Sivakumar]

Hi Nguyen Khoa Lu,

Sorry for the inconvenience caused.

We have modified the code snippet. Please have a modified sample from below link.

Sample link: https://www.syncfusion.com/downloads/support/forum/160132/ze/LayoutSample281723154

Let us know if you need any further assistance.

Regards,
Sridevi S.