StackLayout In Xamarin Forms

Stack Layout is used to arrange the view in one aspect . It could be vertical or horizontal . Stack Layout is the most simple layout control in xamarin forms.
We can also use nested Stack Layout depending on our requirements.
We can design beautiful Screens by using the Stack Layout. If you're familiar with the Microsoft XAML for UWP and WPF where we used the StackPanel then you could easily understand the Stack Layout as well.

Let's design a Login Screen by using Stack Layout and from that you'll get a clear point of how to use that control in xamarin forms.

So let's Add a few lines of XAML code in the Content Page. Let's create a beautiful Skype Login Page with the Stack Layout so let's switch to Visual Studio Or Xamarin Studio and add few lines of code there.

By default the orientation of StackLayout is Vertical but if you want the horizontal fashion of Stack Layout then you can easily do that by simply adding an Orientation = "Horizontal" in the Stack Layout .


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_Blogger"
             x:Class="XF_Blogger.MainPage" BackgroundColor="#00aff0">

  <StackLayout Margin="15,50,15,0">
    <Image Source="skype.png" VerticalOptions="Center" HorizontalOptions="Center"/>
    <StackLayout VerticalOptions="Center">
      <Entry BackgroundColor="White" Placeholder="Enter Skype ID" PlaceholderColor="Gray"/>
      <Entry BackgroundColor="White" Placeholder="Password" PlaceholderColor="Gray"/>
      <Button BackgroundColor="#078fc1" Text="Sign In"/>
      <Label Text="Problems signing in?" HorizontalTextAlignment="Center"></Label>
    </StackLayout>
  </StackLayout>
</ContentPage>

Now let's run this on the simulator or real device and just look at your UI for Login screen.

WOW ... Amazing it seems that we've almost design the same kinda Login Page in Xamarin Forms by just using the XAML.