Add border to a specific side( say only in the left and right) in button in xamarin application

Question

I am developing a xamarin application. I have a button as below:

<Button
    BackgroundColor="{StaticResource MyBackgroundColor}"
    BorderColor="{StaticResource PrimaryColor}"
    BorderWidth=".1"
    ..../>

The button has border around all the sides. How can I add border only in the left and right sides. I saw that, I have to make a custom renderer. Is this the only way to achieve this? If so Is there any example? OR Is there any other way?

Answer 1

You can try to use the BoxView as the Button's border. Such as:

 <StackLayout Orientation="Vertical">
    <StackLayout Orientation="Vertical" Spacing="0">
    <Button Text="hello" BorderColor="Transparent" BorderWidth="0" CornerRadius="0"/>
    <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Color="Red"/>
    </StackLayout>
    <StackLayout Orientation="Vertical" Spacing="0">
        <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Color="Red"/>
        <Button Text="hello" BorderColor="Transparent" BorderWidth="0" CornerRadius="0"/>
    </StackLayout>
    <StackLayout Orientation="Horizontal" Spacing="0">
        <Button Text="hello" BorderColor="Transparent" HorizontalOptions="FillAndExpand" BorderWidth="0" CornerRadius="0"/>
        <BoxView WidthRequest="2" HorizontalOptions="Start" VerticalOptions="FillAndExpand" Color="Red"/>
    </StackLayout>
    <StackLayout Orientation="Horizontal" Spacing="0">
        <BoxView WidthRequest="2" HorizontalOptions="End" VerticalOptions="FillAndExpand" Color="Red"/>
        <Button Text="hello" BorderColor="Transparent" BorderWidth="0" CornerRadius="0" HorizontalOptions="FillAndExpand"/>
    </StackLayout>
</StackLayout>

And the screenshot of the result:

For more information, you can refer to this case about the Xamarin.Forms Button with only single border on bottom.