Xamarin forms button with no border issue

xaml xamarin xamarin.forms

20,231

Solution 1

Are you using Android? If yes, then:

On Android this property will not have an effect unless VisualElement.BackgroundColor is set to a non-default color.

Solution 2

I'm using Xamarin.Forms 2.3, and I was also trying to create a button, with no border radius, a background color set to white, and a border color & width, and none of the above answers worked for me.

Actually I still had to set the BorderRadius to 1 (my width was 2), AND add another workaround that I just cannot understand :

In my Android project, I added a Custom renderer, for Button, with nothing in it. Absolutely nothing. So the behavior of Xamarin forms, is different on Android when you use the Default renderer, and when you use a custom renderer that inherits from the default renderer, and yet with no line of code in it.

My Renderer:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(GenericButtonRenderer))]

    namespace Express.CustomRenderers
{
    public class GenericButtonRenderer : Xamarin.Forms.Platform.Android.ButtonRenderer
    {
    }
}

Solution 3

There seems to be a issue in Xamarin.Forms where Button borders don't show on Android when the ButtonRadius is 0. (It doesn't appear that this issue is fixed as of Xamarin.Forms v2.0.0.6482.) It's not ideal since it will slightly change the look of the button, but you can work around it by setting BorderRadius = 1 for just Android, or all platforms, giving a slightly perceptible rounding to the corners.

Workaround (code)

// HACK: fixes a bug where border doesn't work without a radius.
yourButton.BorderRadius = Device.OnPlatform<int>(iOS: 0, Android: 1, WinPhone: 0);

Workaround (XAML)

<Button
    x:Name="YourButton"
    Text="Some Button Text"
    TextColor="Black"
    Clicked="OnClickedDiscover"
    BackgroundColor="Aqua"
    BorderColor="Red"
    BorderWidth="1">
    <Button.BorderRadius>
        <!-- HACK: fixes a bug where border doesn't work without a radius. -->
        <OnPlatform x:TypeArguments="x:Int32">
            <OnPlatform.Android>1</OnPlatform.Android>
        </OnPlatform>
    </Button.BorderRadius>
</Button>

Solution 4

In Xamarin.Forms 2.5.0, the patch has been reverted :

"Revert "Fix border on android buttons (#941)" (#1192)"

You have to use a custom renderer for now...

~~This bug has been fixed in the last version of Xamarin Forms 2.4.0 :~~

~~> 36031 - "Button border not drawn on Android without a BorderRadius" (PR)~~

View more solutions

20,231

Author by

Giu

Updated on December 22, 2020

Comments

Giu over 3 years

I try to render a list of clickable items in a view. I would like to add a button with an image and a white border (the first one). I discovered that the buttons in my StackLayout/ViewCell can't render a border.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="*.PlacesPage"
Title="TEST">
<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ContentPage.Content>
    <Grid>
        <ListView x:Name="lvPlaces" ItemsSource="{Binding Places}" SeparatorColor="Gray" SeparatorVisibility="Default" RowHeight="120" >
            <ListView.ItemTemplate>
              <DataTemplate>
                  <ViewCell>
                    <ViewCell.View>
                        <StackLayout Orientation="Horizontal">
                            <Button HorizontalOptions="Center" VerticalOptions="Center" BorderWidth="3" BorderColor="White" Text="IMG"></Button>
                            <Button Text="{Binding Name}" BorderWidth="0" FontSize="20" BackgroundColor="Transparent" Clicked="OnButtonClickedPlace"></Button>
                        </StackLayout>
                    </ViewCell.View>
                  </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage.Content>

patridge over 8 years

For anyone wanting to play along at home, here's the bug: bugzilla.xamarin.com/show_bug.cgi?id=36031
reinder over 8 years

This doesn't always work with thick borders, workaround is to keep increasing the radius on Android until you see the border. For instance if your BorderWidth = 6, you need to have at least BorderRadius = 3 for the border to show up....
AllDayer almost 8 years

Had the same problem. This was the only thing that worked in 2.3. Thanks!
MSicc over 7 years

This also fixes the problem when you want to remove the shadow and make the button appear completely transparent in XF 2.3
Admin over 7 years

worked perfect for me. Crazy that we have to do this.
Maxim Alexeyev over 7 years

Wouldn't ever come up with this. Thanks a lot.
Haskell almost 7 years

you nailed it!!
V-rund Puro-hit almost 7 years

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
CarLoOSX almost 7 years

Yes, is not an answer, but it works so it is a temporally solution.
Rohit Vipin Mathews almost 7 years

FormsApplicationActivity is obsolete.
Ahmed Alejo over 6 years

this is due to the fact that you are using FormsAppCompatActivity which registers the following renderer Xamarin.Forms.Platform.Android.**AppCompat**.ButtonRenderer* instead of Xamarin.Forms.Platform.Android.ButtonRenderer
William-H-M over 6 years

Though this will show an alert for being obsolete, it still works for last version Xamarin.Forms (2.5.0.121934)