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

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.