CODEWITHSUNDEEP
androidwindowsxamarinvisual-studio-2019
Mi Po
Mi Po

Reputation: 1213

Xamarin Forms Designer need to place 2 buttons side by side on top of a map

Currently I have these 2 buttons on top of each other

Unfortunately, Visual Studio doesn't support visual editing in Xamarin, so I have to edit the XAML code by hand, which I can't do easily

Can somebody help me figure out how to get these 2 buttons to be side by side instead of on top of each other

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

enter image description here

Upvotes: 2

Views: 4830

Answers (1)

Jason
Jason

Reputation: 89214

use a nested horizontal 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>

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

Upvotes: 7

Related Questions