Как поставить эти рамки из стороны в сторону вертикально?

Question

У меня есть 3 кадра, каждый из которых содержит 1 изображение / значок и 1 текстовую метку.

У меня есть этот код:

<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>

Но это ставит кнопки очень далеко друг от друга. Я хотел бы, чтобы они были рядом друг с другом и в одной колонке. Кто-нибудь может помочь?

Answer 1

Вы используете очень большое значение Margin (35) для каждого кадра. Маржа применима к каждому элементу, на котором она указана - следовательно, вы получаете интервал 70 кадров между кадрами (35 + 35 сверху и снизу).

Вместо определенного отдельного значения, которое применяется ко всему элементу, левые, верхние, правые, нижние поля / отступы можно указывать отдельно в виде значений, разделенных запятыми (вы можете иметь 2 значения, разделенных запятыми, для сопоставления влево / вправо и по / нижний интервал тоже).

Возможно, попробуйте Margin = "35,0,35,0", чтобы сохранить расстояние слева направо и минимизировать расстояние сверху вниз. Обратите внимание, что это может быть упрощено до Margin = "35,0" - с этим форматом 35 применяется к левому и правому, ноль к верху и низу.

Нет причин для совпадения верха / низа и левого / правого - вы можете настроить каждый из них, чтобы получить наилучший эффект.

См. Ссылку: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding