title: How can I change a <StackLayout> <Grid> screen to use <RelativeLayout>?
body: <p>I have this code that's currently a combination of  and </p>
  
  <p>I would like to move to a relative layout and have not seen so many examples of that. Would appreciate any suggestions on how this could be accomplished. </p>
  
  <p>Some points about the XAML.  </p>
  
  <ul>
  <li>Either emptyGrid or phraseGrid appear on the screen</li>
  <li>Either buttonGrid or tapGrid appear on the screen</li>
  <li>The vertical center of the buttons and the tap label should be the same position. So that when the buttons are not showing a tap label appears at the same vertical buttons as the buttons. </li>
  <li>The Frame appears inside a tabbed page</li>
  </ul>
  
  <p>I realize this is a bit more than a simple question but I'm sure it would be of interest to others. As the answer might be quite involved I'll open up a 250 point bounty for this in a couple of days. </p>
  
  
  
  <p>
  
      </p>
  
  <pre class="lang-xml prettyprint-override"><code>    &lt;Grid x:Name="emptyGrid" Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
          &lt;StackLayout Padding="10,0,10,0" HorizontalOptions="Center" VerticalOptions="Center"&gt;
              &lt;Label x:Name="emptyLabel" FontSize="18" XAlign="Center" TextColor="Gray" /&gt;
          &lt;/StackLayout&gt;
          &lt;Button x:Name="resetButton" Text="Reset points?" TextColor="White" FontAttributes="Bold" FontSize="20" HeightRequest="60" BackgroundColor="#E19A3F" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"&gt;
              &lt;Button.FontSize&gt;
                  &lt;OnPlatform x:TypeArguments="x:Double" iOS="25" Android="20" /&gt;
              &lt;/Button.FontSize&gt;
          &lt;/Button&gt;
      &lt;/Grid&gt;
  
      &lt;Grid x:Name="phraseGrid" Padding="20, 20, 20, 20" BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="6*" /&gt;
              &lt;RowDefinition Height="6*" /&gt;
              &lt;RowDefinition Height="80*" /&gt;
              &lt;RowDefinition Height="13*" /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;Grid x:Name="prGrid" Grid.Row="0" Grid.Column="0" 
              Padding="5,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
              BackgroundColor&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="25*" /&gt;
                  &lt;ColumnDefinition Width="25*" /&gt;
                  &lt;ColumnDefinition Width="50*" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Label x:Name="msg1" Style="{StaticResource smallLabel}" Text="msg1" Grid.Row="0" Grid.Column="0" /&gt;
              &lt;Label x:Name="msg2" Style="{StaticResource smallLabel}" Text="msg2" Grid.Row="0" Grid.Column="1" /&gt;
              &lt;Label x:Name="msg3" Style="{StaticResource smallLabel}" Text="msg3" Grid.Row="0" Grid.Column="2" /&gt;
          &lt;/Grid&gt;
  
          &lt;Grid x:Name="siGrid" Grid.Row="1" Grid.Column="0" 
              Padding="5,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="25*" /&gt;
                  &lt;ColumnDefinition Width="25*" /&gt;
                  &lt;ColumnDefinition Width="50*" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Label x:Name="faveLabel" Style="{StaticResource smallLabel}" FontFamily="FontAwesome" Grid.Row="0" Grid.Column="0" /&gt;
              &lt;Label x:Name="wordTypeLabel" Style="{StaticResource smallLeftLabel}" Grid.Row="0" Grid.Column="1" /&gt;
          &lt;/Grid&gt;
  
          &lt;Grid x:Name="wordGrid" Grid.Row="2" Grid.Column="0" 
              HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="45*" /&gt;
                  &lt;RowDefinition Height="55*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
                  &lt;Label x:Name="textLabel" FontSize="45" XAlign="Center" VerticalOptions="Center" LineBreakMode="WordWrap" /&gt;
              &lt;/Grid&gt;
              &lt;Grid x:Name="detailGrid" Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,0,10,0"&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="Auto" /&gt;
                      &lt;RowDefinition Height="Auto" /&gt;
                      &lt;RowDefinition Height="Auto" /&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;Label x:Name="detail1" Grid.Row="0" Style="{StaticResource bigLabel}" /&gt;
                  &lt;Label x:Name="detail2" Grid.Row="1" Style="{StaticResource bigLabel}" /&gt;
                  &lt;Label x:Name="detail3" Grid.Row="2" Style="{StaticResource bigLabel}" /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
  
          &lt;Grid x:Name="buttonGrid" Grid.Row="3" Grid.Column="0" 
              HorizontalOptions="FillAndExpand" VerticalOptions="Center" Padding="20, 0"&gt;
              &lt;Button x:Name="aButton" Style="{StaticResource pointButton}" Grid.Column="0" Text="0"&gt;
              &lt;/Button&gt;
              &lt;Button x:Name="bButton" Style="{StaticResource pointButton}" Grid.Column="1" Text="1"&gt;
              &lt;/Button&gt;
              &lt;Button x:Name="cButton" Style="{StaticResource pointButton}" Grid.Column="2" Text="2"&gt;
              &lt;/Button&gt;
              &lt;Button x:Name="dButton" Style="{StaticResource pointButton}" Grid.Column="3" Text="5"&gt;
              &lt;/Button&gt;
          &lt;/Grid&gt;
  
          &lt;Grid x:Name="tapGrid" Grid.Row="3" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center"&gt;
              &lt;Label x:Name="tapScreenLabel" Style="{StaticResource smallLabel}" /&gt;
          &lt;/Grid&gt;
  
      &lt;/Grid&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p></p>