How to put these frames side to side vertically? - xaml

Question

I have 3 frames, each one containing 1 image/icon and 1 text label.
I have this code :
<StackLayout Spacing="0" Padding="0">
<Frame CornerRadius="3" BackgroundColor="#4167b2" HeightRequest="45" Margin="35" Padding="0" HasShadow="false">
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/facebook.png" />
<Label Text="Login com facebook" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="FacebookButton" AutomationId="FacebookButton" Command="{Binding FacebookButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
<Frame CornerRadius="3" BackgroundColor="#D44638" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/gmail.png" />
<Label Text="Login com g-mail" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="GmailButton" AutomationId="GmailButton" Command="{Binding GmailButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
<Frame CornerRadius="3" BackgroundColor="#1dcaff" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/twitter-squared.png" />
<Label Text="Login com twitter" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="TwitterButton" AutomationId="TwitterButton" Command="{Binding TwitterButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</StackLayout>
But it puts the buttons very away from each other. I would like them to be close to each other and in same column. Can anybody help ?

Answer 1

You are using a very large Margin value (35) on each frame. The Margin is applicable to each element it is specified on - hence you are getting 70pixel spacing between frames (35 + 35 top & bottom).
Rather than specific a a single value which applies all around the element, the Left,Top,Right, Bottom margin/padding can be specified separately as comma separated values (you can have 2 comma separated values for matching left/right & to/bottom spacing too).
Maybe try Margin="35,0,35,0" to retain the left-right spacing & minimise the top-bottom spacing. Note this could be simplified to Margin="35,0" - with this format the 35 applies to left & right, the zero to top & bottom.
There is no reason for top/bottom & left/right to be identical - you can adjust each to get the best effect.
See this link : https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding