How to add a border to your Xamarin Form Label?

Question

Hello fellow Xamarin Forms users,

I already found out that borders on a label are not supported out of the box by Xamarin Froms. So after some searching is still have no clue how to make it possible. Is it possible to add a border using the custom renderer? If so does someone have an example? and if not does someone have any other out of the box idea to make this possible.

Thank you in advance

score 28 · Answer 1 · edited Oct 14 '20 at 12:19

28

You can add a Label within Frame element, and setup OutlineColor for Frame:

<Frame OutlineColor="Black">
    <Label Text="My Label With Frame" />
</Frame>

If you want to use custom renderer, you should implement custom renderer for each platform you want to support (i.e. Android, iOS, UWP, WinPhone)

edited Oct 14 '20 at 12:19

Sheridan

68,826
24
143
183

answered Feb 10 '17 at 12:38

kb0

1,143
1
8
13

Thanks for the quick answer, but that wasn't really what i was looking for. The solution i made was using a boxview instanciated it under my label, with a height of one. I'll put an answer below to show you what i did. – Diceble Feb 10 '17 at 13:15
2

Just a quick note: `Frame.OutlineColor` is obsolete in Xamarin Forms 3. It is replaced with the property `Frame.BorderColor`. – Anders Gustafsson May 24 '18 at 09:04

score 14 · Accepted Answer · answered Feb 10 '17 at 13:23

I was thinking a little out of the box and came up with using a boxview to use as a border. Here you have a sample of the code that I wrote:

  <StackLayout x:Name="BasicInfo" Margin="10,10,10,5" Grid.Row="0" Grid.Column="0">
    <Label Text="Basic Info" FontSize="20"/>
    <BoxView Color="Black" WidthRequest ="100" HeightRequest="1"/>
     <Label x:Name="text1" />
     <Label x:Name="text2"/>
     <Label x:Name="text3"/>
     <Label x:Name="text4"/>  
  </StackLayout>

I'll also add a picture of the result it gives me:

score 2 · Answer 3 · answered Nov 08 '18 at 14:44

Despite there already being an answer, the solution I found allows you to choose which borders you specifically want to show and how much.

A fix that I used was to wrap the element that needs a border in a ContentView, give that ContentView a backgroundColour and a padding. The code is below

Resourcedictionary with the following style declared

<Style TargetType="ContentView"
       x:Key="BorderContentView">
    <Setter Property="BackgroundColor"
            Value="Black" />
    <Setter Property="Padding"
            Value="1 2 1 3" />
    <!-- Tweak the values above to set your borders however you prefer -->
</Style>

In your view, simply add a wrapping ContentView and add the style to it

<ContentView Style="{DynamicResource BorderContentView}">
    <!-- Elements with a border here --> 
</ContentView>

score 0 · Answer 4 · answered Sep 16 '22 at 07:35

Use Custom renderer to apply border on Label control. Create class ExLabel in xamarin.forms Shared project. Like below

 public class ExLabel : Label
 {
    public ExLabel()
    {
    }
 }

Now in android project implement add Custom renderer class and use ExLabel there

[assembly: ExportRenderer(typeof(ExLabel), typeof(ExLabelRenderer))]
namespace Chemichals.Droid.Renderers
{
    public class ExLabelRenderer : LabelRenderer
    {
        Context context;
        public ExLabelRenderer(Context context) : base(context)
        {
            this.context = context;
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.BorderLabel, null));
            }
        }
    }
}

Now in Resource -> Drawable folder add below BorderLabel.xml file

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <solid android:color="@android:color/white" />
   <stroke android:width="1dip" android:color="#66B4E6"/>
</shape>

In xamarin forms shared project's xaml file use ExLabel instead of Label, you will see a border on it.

How to add a border to your Xamarin Form Label?

4 Answers4