How to bind bindable object to the xml file in xamarin forms

Question

I have created custom bordered stacklayout for android using custom renderer. The StackLayout border is created by using xml file. The border color is defined in that xml file. But I want to change that border color dynamically at runtime using bindable object property. I have done this with ios. But i dont have any idea how to bind the bindable object to the xml file. My customBorderStacklayout sample code is mentioned below, Please share your valuable suggestion to done this.

CustomStackBorder.cs

public class CustomStackBorder : StackLayout
{
    public Color BorderColor
    {
        get { return (Color)GetValue(BorderColorProperty); }
        set { SetValue(BorderColorProperty, value); }
    }

    public static readonly BindableProperty BorderColorProperty =
            BindableProperty.Create("BorderColor", typeof(Color), typeof(CustomStackBorder), Color.Gray, BindingMode.TwoWay);

    public CustomStackBorder()
    {       
    }
}

CustomStackLayoutRenderer.cs (Android)

public class CustomStackLayoutRenderer : VisualElementRenderer<StackLayout>
{
      public CustomStackLayoutRenderer(Context context) : base(context)
      {
      }
      protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
      {
           base.OnElementChanged(e);
           Background = ContextCompat.GetDrawable(this.Context, Resource.Drawable.StackLayoutBorder);            
      }
}

StackLayoutBorder.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="0.1dp" android:color="#ff555555"></stroke>
  <corners android:topLeftRadius="2dp"
            android:topRightRadius="2dp"
            android:bottomLeftRadius="2dp"
            android:bottomRightRadius="2dp" />
<solid android:color="#ffffff"/>
</shape>

Jaymin · Accepted Answer · 2019-03-28 06:25:29Z

1

You can do it by setting the stroke color of the drawable.

Code:

protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            if (e.NewElement as CustomStackBorder != null)
            {
                Background = ContextCompat.GetDrawable(this.Context, Resource.Drawable.StackLayoutBorder);
                GradientDrawable bgShape = (GradientDrawable)this.Background;
                bgShape.SetStroke(1, (e.NewElement as CustomStackBorder).BorderColor.ToAndroid());

            }
        }
    }

Change your OnElementChanged method in custom stack view renderer with my code and replace your BorderColor property value with real data. That is all you have to do.

Happy Coding!

edited Mar 28, 2019 at 6:25

answered Mar 28, 2019 at 6:08

Jaymin

2,9223 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yogeshwaran Over a year ago

I have tried your code but it will return the following exception, Unhandled Exception: Java.Lang.IllegalArgumentException: Unknown color

Jaymin Over a year ago

@Yogeshwaran, I have updated my code. Please have a look.

Collectives™ on Stack Overflow

How to bind bindable object to the xml file in xamarin forms

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related