Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

XAML Layout moves when I press a button?

$
0
0

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>

Before button press
After button press


Viewing all articles
Browse latest Browse all 77050

Trending Articles