Дизайнеру форм Xamarin необходимо разместить 2 кнопки рядом поверх карты

#android #windows #xamarin #visual-studio-2019

#Android #Windows #xamarin #visual-studio-2019

Вопрос:

В настоящее время у меня есть эти 2 кнопки друг над другом

К сожалению, Visual Studio не поддерживает визуальное редактирование в Xamarin, поэтому мне приходится редактировать код XAML вручную, что я не могу сделать легко

Может кто-нибудь помочь мне понять, как заставить эти 2 кнопки располагаться рядом, а не друг над другом

 <?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:CustomRenderer;assembly=CustomRenderer"
             x:Class="CustomRenderer.MapPage">
    <StackLayout Margin="0,0,0,0">
        <Button Text="Add items" Clicked="OnAddItemsClicked"/>
        <Button Text="Add other" Clicked="OnAddOtherClicked"/>
        <local:CustomMap x:Name="customMap"
                     MapType="Street" />
    </StackLayout>
</ContentPage>
  

введите описание изображения здесь

Ответ №1:

используйте вложенный горизонтальный StackLayout

 <StackLayout Margin="0,0,0,0">
    <StackLayout Orientation="Horizontal">
      <Button Text="Add items" Clicked="OnAddItemsClicked"/>
      <Button Text="Add other" Clicked="OnAddOtherClicked"/>
    </StackLayout>
    <local:CustomMap x:Name="customMap"
                 MapType="Street" />
</StackLayout>
  

или Grid

 <Grid ColumnDefinitions="1*, 1*" RowDefinitions="1*, Auto">
    <Button Grid.Row="0" Grid.Column="0" Text="Add items" Clicked="OnAddItemsClicked"/>
    <Button Grid.Row="0" Grid.Column="1" Text="Add other" Clicked="OnAddOtherClicked"/>
    <local:CustomMap x:Name="customMap" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
                 MapType="Street" />
</Grid>
  

Комментарии:

1. Спасибо, первый вариант не сработал, они все еще были друг над другом. Второй вариант сработал, но кнопки отображались на 90% высоты экрана. Можете ли вы отредактировать ответ, чтобы эта строка сетки составляла 10% от высоты экрана?

2. Вам нужно поиграть со значениями RowDefinition, чтобы получить желаемый макет