Post
Ask Question

Apply Borders On Xamarin.Forms With User Interface Elements

Some of the developers including me who start from the initial stage of development are aware of how to apply Border in Xamarin.Forms. I have found a solution and am sharing that with all the developers via this blog.

Please see the screenshot where a border is available in Terms & Conditions section. We need to place some of the lines of code for this.
 
Xamarin.Forms 
 
Code 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <ContentPage  
  3.     xmlns="http://xamarin.com/schemas/2014/forms"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  5.     x:Class="Company.Page"  
  6.     Title="T&C"  
  7.     BackgroundColor="#00000000">  
  8.     <ContentPage.Resources>  
  9.         <ResourceDictionary  
  10.             x:Name="AppDictionary">  
  11.             <Color  
  12.                 x:Key="BackgroundColor">#FFFFFF</Color>  
  13.             <Color  
  14.                 x:Key="BorderColor">#E1E1E1</Color>  
  15.             <Style  
  16.                 x:Key="InternalViewStyle"  
  17.                 TargetType="ContentView">  
  18.                 <Setter  
  19.                     Property="BackgroundColor"  
  20.                     Value="{StaticResource BackgroundColor}" />  
  21.                 <Setter  
  22.                     Property="VerticalOptions"  
  23.                     Value="Fill" />  
  24.                 <Setter  
  25.                     Property="Padding"  
  26.                     Value="10,10,10,10">  
  27.                 </Setter>  
  28.             </Style>  
  29.             <Style  
  30.                 x:Key="BorderStyle"  
  31.                 TargetType="ContentView">  
  32.                 <Setter  
  33.                     Property="BackgroundColor"  
  34.                     Value="{StaticResource BorderColor}" />  
  35.                 <Setter  
  36.                     Property="Padding"  
  37.                     Value="1,1,1,1">  
  38.                 </Setter>  
  39.             </Style>  
  40.         </ResourceDictionary>  
  41.     </ContentPage.Resources>  
  42.     <StackLayout  
  43.         VerticalOptions="Start"  
  44.         HorizontalOptions="Fill"  
  45.         Padding="30,40,30,0">  
  46.         <Entry  
  47.             HorizontalTextAlignment="Start"  
  48.             Placeholder="Email"  
  49.             Keyboard="Email"  
  50.             x:Name="EmailEntry" />  
  51.         <Entry  
  52.             HorizontalTextAlignment="Start"  
  53.             Placeholder="Phone"  
  54.             Keyboard="Numeric"  
  55.             x:Name="PhoneEntry" />  
  56.         <ContentView  
  57.             Style="{StaticResource BorderStyle}">  
  58.             <StackLayout  
  59.                 VerticalOptions="Start"  
  60.                 Style="{StaticResource InternalViewStyle}">  
  61.                 <Label  
  62.                     Text="Terms & Conditions"  
  63.                     TextColor="Black"  
  64.                     HorizontalTextAlignment="Start">  
  65.                 </Label>  
  66.                 <ScrollView  
  67.                     HeightRequest="300"  
  68.                     Orientation="Vertical"  
  69.                     VerticalOptions="FillAndExpand">  
  70.                     <StackLayout  
  71.                         Orientation="Vertical"  
  72.                         VerticalOptions="FillAndExpand">  
  73.                         <Label  
  74.                             Text="Text here"                             Font = "14" />  
  75.                     </StackLayout>  
  76.                 </ScrollView>  
  77.             </StackLayout>  
  78.         </ContentView>  
  79.         <Button  
  80.             Text="SUBMIT"  
  81.             BorderColor="Blue"  
  82.             TextColor="Blue"  
  83.             Font="Bold"  
  84.             BorderWidth="1"  
  85.             BorderRadius="3"  
  86.             HorizontalOptions="Fill"  
  87.             x:Name="NextButton"  
  88.             Clicked="OnButtonClicked" />  
  89.     </StackLayout>  
  90. </ContentPage> 
Code Here

Happy Coding :)