Quantcast
Viewing all articles
Browse latest Browse all 91519

XAML Layout moves when I press a button?

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>

Image may be NSFW.
Clik here to view.
Before button press

Image may be NSFW.
Clik here to view.
After button press


Viewing all articles
Browse latest Browse all 91519

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>