Is it possible to configure Border so the it only draws a border on one side?

Question

I am using Border to wrap my inputs in ContentViews. StrokeShapes of Rectangle and RoundRectangle work fine. I am wondering if it is possible to only draw the border on a given side like the left or bottom. SrokeShape of line does not seem to be an option as it collapses the border and the start and end are not relative to the contained content.

I am using VS 17.3 preview 4.

Answer 1

Hello,​

Is it possible to configure Border so the it only draws a border on one side?

No, <Border> cannot draw a border on one side.

However, you can use BoxView to draw it. For example, if you want to draw a bottom border. You can create a <VerticalStackLayout> and put a BoxView (set HeightRequest and HorizontalOptions="Fill") like following code.

   <VerticalStackLayout   
               Spacing="25"   
               Padding="30,0"   
               VerticalOptions="Center">  
               <Label Text="This is test text"  
                      FontSize="14"  
                      FontAttributes="Bold" />  
               <BoxView   
                      Color="Gray"  
                      Margin="0,-10,0,0"                   
                      HeightRequest="2"  
                      HorizontalOptions="Fill" />            
   </VerticalStackLayout>  

If you want to draw a left border. Please create <HorizontalStackLayout >, set BoxView with WidthRequest and VerticalOptions="Fill" like following code.

   <HorizontalStackLayout HeightRequest="20">  
                   <BoxView   
                      Color="Gray"  
                      Margin="0,0,0,0"                   
                      WidthRequest="2"  
                      VerticalOptions="Fill" />  
                   <Label Text="This is test text"  
                      FontSize="14"  
                      FontAttributes="Bold"  
                     />  
     
               </HorizontalStackLayout>  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.