I am building a xaml layout in Xamarin for my mobile app. I have written the following code. The layout, as you can see from the following images, is aligning the labels off the page and there are various other issues. However, when I press the button, the layout shows as its should. Why is this, and what should I do to make the items keep the position they use after the button is pressed?
<?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:Gas_Sense;assembly=Gas_Sense"
x:Class="Gas_Sense.HomePage"
Title="Home Page">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="7, 40, 7, 10" />
</ContentPage.Padding>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="120" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Image Source="Logo.png"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" />
<Image x:Name="BottleFillImage"
Source="bottle_outline.png"
VerticalOptions="CenterAndExpand"
Grid.Row="2" Grid.Column="0" Grid.RowSpan="6" />
<Label Text="Percentage Fill:"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
FontSize="Large"
Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2"/>
//More labels and Icons
<Button x:Name="NewDeviceButton"
Image="add.png"
HorizontalOptions="End"
VerticalOptions="FillAndExpand"
Grid.Row="7" Grid.Column="2" />
<ActivityIndicator x:Name="ScanActivity"
Color="Black"
HorizontalOptions="End"
VerticalOptions="FillAndExpand"
Grid.Row="7" Grid.Column="2" />
</Grid>
</ContentPage>