Share via

StackLayout In Xamarin Forms

  • Article

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 we're familiar with the Microsoft **XAML **for **UWP **and **WPF **where we used the **StackPanel **then we could easily understand the Stack Layout as well.

Let's design a Login Screen using Stack Layout and from that we'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 a few lines of code there.

https://2.bp.blogspot.com/-4FtnhcdN6ps/WOaHU2YgJ4I/AAAAAAAAAhg/DX2w33-aK4QwN5MVYAbxZ21VCZtqpOsUgCLcB/s640/StackLayout1.PNG

By default the orientation of StackLayout is vertical but if we want the horizontal fashion of Stack Layout then we 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. Now look at the UI for the Login screen.

https://1.bp.blogspot.com/-TZKhvTxeZaA/WOaHtPVyAiI/AAAAAAAAAhk/gQTfzLwcyzsaqvxGrSRx5LJaoprwAtK0ACLcB/s640/Screenshot_2017-04-06-23-16-51.png

 It seems that we've almost designed the same kinda Login Page in Xamarin Forms by just using the XAML.