Border Color For Editor In Xamarin.forms

April 18, 2024 Post a Comment

How can i make a border color for Editor in Xamarin.Forms? I used this link, but it works only for Android. I want it to work in all platforms! I'm a little bit newbie to this. Ple

Solution 1:

You may also archieve this by wrapping your Editor with a StackLayout with BackgroundColor="your color" and Padding="1" and set the BackgroundColor of your Editor to the same color of the form.

Something like this:

<StackLayoutBackgroundColor="White"><StackLayoutBackgroundColor="Black"Padding="1"><EditorBackgroundColor="White" /></StackLayout>
  ...
</StackLayout>

Not that fancy, but this will at least get you a border!

Solution 2:

Here's the complete solution I used. You need three things.

1 - A custom class that implements Editor in your forms project.

publicclassBorderedEditor : Editor
{

}

2 - A custom renderer for your custom Editor in your iOS project.

publicclassBorderedEditorRenderer : EditorRenderer
{
    protectedoverridevoidOnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.Layer.CornerRadius = 3;
            Control.Layer.BorderColor = Color.FromHex("F0F0F0").ToCGColor();
            Control.Layer.BorderWidth = 2;
        }
    }
}

3 - An ExportRenderer attribute in your iOS project that tells Xamarin to use your custom renderer for your custom editor.

[assembly: ExportRenderer(typeof(BorderedEditor), typeof(BorderedEditorRenderer))]

Then use your custom editor in Xaml:

<custom:BorderedEditor Text="{Binding TextValue}"/>

Solution 3:

The easiest way is to add a frame around it.

<FrameBorderColor="LightGray"HasShadow="False"Padding="0"><Editor/></Frame>

Solution 4:

in your portable project add this control

publicclassPlaceholderEditor : Editor
{
    publicstaticreadonly BindableProperty PlaceholderProperty =
        BindableProperty.Create("Placeholder", typeof(string), typeof(string), "");

    publicPlaceholderEditor()
    {
    }

    publicstring Placeholder
    {
        get
        {
            return (string)GetValue(PlaceholderProperty);
        }

        set
        {
            SetValue(PlaceholderProperty, value);
        }
    }       
}

in your android project add this renderer:

[assembly: ExportRenderer(typeof(PlaceholderEditor), typeof(PlaceholderEditorRenderer))]
namespaceTevel.Mobile.Packages.Droid
{


publicclassPlaceholderEditorRenderer : EditorRenderer
{ 

publicPlaceholderEditorRenderer() {  }

    protectedoverridevoidOnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            var element = e.NewElement as PlaceholderEditor;

            this.Control.Background = Resources.GetDrawable(Resource.Drawable.borderEditText);

            this.Control.Hint = element.Placeholder;
        }
    }

    protectedoverridevoidOnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == PlaceholderEditor.PlaceholderProperty.PropertyName)
        {
            var element = this.Element as PlaceholderEditor;
            this.Control.Hint = element.Placeholder;
        }
    }
}
}

in your Resources > drawable add an XML file borderEditText.xml

<?xml version="1.0" encoding="UTF-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_focused="true"><shapeandroid:shape="rectangle"><gradientandroid:startColor="#FFFFFF"android:endColor="#FFFFFF"android:angle="270" /><strokeandroid:width="3dp"android:color="#F8B334" /><cornersandroid:radius="12dp" /></shape></item><item><shapeandroid:shape="rectangle"><gradientandroid:startColor="#FFFFFF"android:endColor="#FFFFFF"android:angle="270" /><strokeandroid:width="3dp"android:color="#ccc" /><cornersandroid:radius="12dp" /></shape></item></selector>

Xaml: Header - xmlns:ctrls="clr-namespace:my control namespace;assembly= my assembly" control:

<ctrls:PlaceholderEditorVerticalOptions="Fill"HorizontalOptions="StartAndExpand"Placeholder="add my comment title"></ctrls:PlaceholderEditor>

Solution 5:

You will need to implement a Custom Renderer (guide from Xamarin) for each platform since customizing the BorderColor of an Entry is not yet supported in Xamarin.Forms.

Since you've already managed to change the BorderColor on Android, you can find a solution for iOS here: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

Index Android