Apply Borders On Xamarin.Forms With User Interface Elements

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.

 

 

 

Code 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Company.Page"
    Title="T&C"
    BackgroundColor="#00000000">
    <ContentPage.Resources>
        <ResourceDictionary
            x:Name="AppDictionary">
            <Color
                x:Key="BackgroundColor">#FFFFFF</Color>
            <Color
                x:Key="BorderColor">#E1E1E1</Color>
            <Style
                x:Key="InternalViewStyle"
                TargetType="ContentView">
                <Setter
                    Property="BackgroundColor"
                    Value="{StaticResource BackgroundColor}" />
                <Setter
                    Property="VerticalOptions"
                    Value="Fill" />
                <Setter
                    Property="Padding"
                    Value="10,10,10,10">
                </Setter>
            </Style>
            <Style
                x:Key="BorderStyle"
                TargetType="ContentView">
                <Setter
                    Property="BackgroundColor"
                    Value="{StaticResource BorderColor}" />
                <Setter
                    Property="Padding"
                    Value="1,1,1,1">
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout
        VerticalOptions="Start"
        HorizontalOptions="Fill"
        Padding="30,40,30,0">
        <Entry
            HorizontalTextAlignment="Start"
            Placeholder="Email"
            Keyboard="Email"
            x:Name="EmailEntry" />
        <Entry
            HorizontalTextAlignment="Start"
            Placeholder="Phone"
            Keyboard="Numeric"
            x:Name="PhoneEntry" />
        <ContentView
            Style="{StaticResource BorderStyle}">
            <StackLayout
                VerticalOptions="Start"
                Style="{StaticResource InternalViewStyle}">
                <Label
                    Text="Terms & Conditions"
                    TextColor="Black"
                    HorizontalTextAlignment="Start">
                </Label>
                <ScrollView
                    HeightRequest="300"
                    Orientation="Vertical"
                    VerticalOptions="FillAndExpand">
                    <StackLayout
                        Orientation="Vertical"
                        VerticalOptions="FillAndExpand">
                        <Label
                            Text="Text here"                             Font = "14" />
                    </StackLayout>
                </ScrollView>
            </StackLayout>
        </ContentView>
        <Button
            Text="SUBMIT"
            BorderColor="Blue"
            TextColor="Blue"
            Font="Bold"
            BorderWidth="1"
            BorderRadius="3"
            HorizontalOptions="Fill"
            x:Name="NextButton"
            Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

Code Here

Happy Coding :)