Scroll View in Xamarin Forms

Introduction:

Here we are going to learn about scroll view in xamarin forms. and also make a scroll view in xamarin forms.


What is scroll view?

So, start by discussing that what is scroll view. we all are familier with scroll view It is used for scrolling a page. If you want to show more and more data on an Application page, then don’t take any tension; Scroll View is always there to help you. You can scroll screen up and down to view more data, as show in the image given below. E.g. Facebook and other big social media applications require scrolling.

Code in xamarin Forms:

You can make your view scroll able by a single tag of scroll view. This tag is placed inside your content view and all things that you want to make scroll able are placed inside scroll view tag.

Scrolling just need a single tag of <ScrollView></ScrollView>



  <ScrollView>
    <StackLayout>
            <Slider></Slider>
        <Switch IsToggled="True" Toggled="Switch_Toggled" x:Name="switch"></Switch>
        <Label Text="Content" IsVisible="{Binding Source={x:Reference switch}, Path=IsToggled }" x:Name="lbl"/>
        <Slider x:Name="slider" Maximum="255" Minimum="10" Value="50" ValueChanged="slider_ValueChanged"></Slider>
        <Label Text="{Binding Source={x:Reference slider}, Path=Value, StringFormat='{0:N0}'}"></Label>
        <Stepper x:Name="stepper" Increment="5" Maximum="50" Minimum="10" Value="30"></Stepper>
        <Label Text="{Binding Source={x:Reference stepper},Path=Value}"></Label>
        <Entry Keyboard="Email" Placeholder="Email"></Entry>
        <Entry Placeholder="Password" IsPassword="True" Completed="Entry_Completed" TextChanged="Entry_TextChanged"></Entry>
        <Label x:Name="cmp" Text=" "></Label>
        <Entry Keyboard="Numeric" Placeholder="phone"></Entry>
        <Editor></Editor>
        <Picker Title="Picker" SelectedIndexChanged="picker_SelectedIndexChanged" x:Name="picker">
                <Picker.Items>
                    <x:String>SMS</x:String>
                    <x:String>Email</x:String>
                    <x:String>MMS</x:String>
                </Picker.Items>
            </Picker>
            <DatePicker Date="30 Mar 2017" Format="dd MMM yyyy" MinimumDate="1 Jan 2017" MaximumDate="31 Dec 2017"></DatePicker>
            <TimePicker Format="hh mm ss"></TimePicker>
            <Button Text="Submit"></Button>
     
     
    </StackLayout>
    </ScrollView>




Here we make a view with some content and make it scroll able by scroll view tag.

Output:

here you can see a scrolling bar on your view.