Jak mogę zmienić ekran <StackLayout><Grid>, aby użyć <RelativeLayout>?

Question

Mam ten kod, który jest obecnie kombinacją i

Chciałbym przejść do układu względnego i nie widziałem tylu przykładów tego. Byłbym wdzięczny za wszelkie sugestie, w jaki sposób można to osiągnąć.

Kilka uwag na temat XAML.

• albo emptyGrid lub phraseGrid wyświetlane na ekranie
• albo buttonGrid lub tapGrid wyświetlane na ekranie
• pionowej osi przycisku i etykieta kranu powinna być w tej samej pozycji. Tak więc, gdy przyciski nie są wyświetlane, etykieta z kranem pojawia się przy tych samych pionowych przyciskach co przyciski.
• wyświetlenie ramki wewnątrz zakładkami stronie

Zdaję sobie sprawę, że jest to nieco więcej niż proste pytanie, ale jestem pewien, że byłoby interesujące dla innych. Ponieważ odpowiedź może być dość zaangażowana, otworzę nagrodę za 250 punktów za kilka dni.

<Grid x:Name="emptyGrid" Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
     <StackLayout Padding="10,0,10,0" HorizontalOptions="Center" VerticalOptions="Center"> 
      <Label x:Name="emptyLabel" FontSize="18" XAlign="Center" TextColor="Gray" /> 
     </StackLayout> 
     <Button x:Name="resetButton" Text="Reset points?" TextColor="White" FontAttributes="Bold" FontSize="20" HeightRequest="60" BackgroundColor="#E19A3F" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"> 
      <Button.FontSize> 
       <OnPlatform x:TypeArguments="x:Double" iOS="25" Android="20" /> 
      </Button.FontSize> 
     </Button> 
    </Grid> 

    <Grid x:Name="phraseGrid" Padding="20, 20, 20, 20" BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="6*" /> 
      <RowDefinition Height="6*" /> 
      <RowDefinition Height="80*" /> 
      <RowDefinition Height="13*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Grid x:Name="prGrid" Grid.Row="0" Grid.Column="0" 
      Padding="5,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
      BackgroundColor> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="25*" /> 
       <ColumnDefinition Width="25*" /> 
       <ColumnDefinition Width="50*" /> 
      </Grid.ColumnDefinitions> 
      <Label x:Name="msg1" Style="{StaticResource smallLabel}" Text="msg1" Grid.Row="0" Grid.Column="0" /> 
      <Label x:Name="msg2" Style="{StaticResource smallLabel}" Text="msg2" Grid.Row="0" Grid.Column="1" /> 
      <Label x:Name="msg3" Style="{StaticResource smallLabel}" Text="msg3" Grid.Row="0" Grid.Column="2" /> 
     </Grid> 

     <Grid x:Name="siGrid" Grid.Row="1" Grid.Column="0" 
      Padding="5,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="25*" /> 
       <ColumnDefinition Width="25*" /> 
       <ColumnDefinition Width="50*" /> 
      </Grid.ColumnDefinitions> 
      <Label x:Name="faveLabel" Style="{StaticResource smallLabel}" FontFamily="FontAwesome" Grid.Row="0" Grid.Column="0" /> 
      <Label x:Name="wordTypeLabel" Style="{StaticResource smallLeftLabel}" Grid.Row="0" Grid.Column="1" /> 
     </Grid> 

     <Grid x:Name="wordGrid" Grid.Row="2" Grid.Column="0" 
      HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="45*" /> 
       <RowDefinition Height="55*" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
       <Label x:Name="textLabel" FontSize="45" XAlign="Center" VerticalOptions="Center" LineBreakMode="WordWrap" /> 
      </Grid> 
      <Grid x:Name="detailGrid" Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,0,10,0"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <Label x:Name="detail1" Grid.Row="0" Style="{StaticResource bigLabel}" /> 
       <Label x:Name="detail2" Grid.Row="1" Style="{StaticResource bigLabel}" /> 
       <Label x:Name="detail3" Grid.Row="2" Style="{StaticResource bigLabel}" /> 
      </Grid> 
     </Grid> 

     <Grid x:Name="buttonGrid" Grid.Row="3" Grid.Column="0" 
      HorizontalOptions="FillAndExpand" VerticalOptions="Center" Padding="20, 0"> 
      <Button x:Name="aButton" Style="{StaticResource pointButton}" Grid.Column="0" Text="0"> 
      </Button> 
      <Button x:Name="bButton" Style="{StaticResource pointButton}" Grid.Column="1" Text="1"> 
      </Button> 
      <Button x:Name="cButton" Style="{StaticResource pointButton}" Grid.Column="2" Text="2"> 
      </Button> 
      <Button x:Name="dButton" Style="{StaticResource pointButton}" Grid.Column="3" Text="5"> 
      </Button> 
     </Grid> 

     <Grid x:Name="tapGrid" Grid.Row="3" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center"> 
      <Label x:Name="tapScreenLabel" Style="{StaticResource smallLabel}" /> 
     </Grid> 

    </Grid> 
</StackLayout> 

Answer 1

Kod

Kod źródłowy tego można znaleźć w GitHub: https://github.com/brminnick/GridToRelativeLayout

public class RelativeLayoutPage : ContentPage 
{ 
    public RelativeLayoutPage() 
    { 
     var emptyLabel = new Label 
     { 
      Text = "Empty Label", 
      Margin = new Thickness(10, 0, 10, 0), 
      FontSize = 18, 
      TextColor = Color.Gray, 
      HorizontalTextAlignment = TextAlignment.Center 
     }; 

     var resetPointsButton = new Button 
     { 
      BackgroundColor = Color.FromHex("E19A3F"), 
      Text = "Reset points?", 
      TextColor = Color.White, 
      FontAttributes = FontAttributes.Bold, 
     }; 
     switch (Device.RuntimePlatform) 
     { 
      case Device.Android: 
       resetPointsButton.FontSize = 20; 
       break; 
      case Device.iOS: 
       resetPointsButton.FontSize = 25; 
       break; 
     } 

     var msg1Label = new Label 
     { 
      Text = "msg1", 
      Margin = new Thickness(0, 26, 0, 0) 
     }; 
     var msg2Label = new Label 
     { 
      Text = "msg2", 
      Margin = new Thickness(0, 26, 0, 0) 
     }; 
     var msg3Label = new Label 
     { 
      Text = "msg3", 
      Margin = new Thickness(0, 26, 0, 0) 
     }; 

     var faveLabel = new Label { Text = "Fave Label" }; 
     var wordTypeLabel = new Label { Text = "Word Type Label" }; 

     var textLabel = new Label 
     { 
      Text = "Text Label", 
      FontSize = 45, 
      HorizontalTextAlignment = TextAlignment.Center, 
      VerticalTextAlignment = TextAlignment.Center 
     }; 

     var detail1Label = new Label 
     { 
      Text = "Detail 1 Label", 
      Margin = new Thickness(10, 0) 
     }; 
     var detail2Label = new Label 
     { 
      Text = "Detail 2 Label", 
      Margin = new Thickness(10, 0) 
     }; 
     var detail3Label = new Label 
     { 
      Text = "Detail 3 Label", 
      Margin = new Thickness(10, 0) 
     }; 

     var zeroButton = new Button 
     { 
      Text = "0", 
      Margin = new Thickness(0, 0, 0, 20) 
     }; 
     var oneButton = new Button 
     { 
      Text = "1", 
      Margin = new Thickness(0, 0, 0, 20) 
     }; 
     var twoButton = new Button 
     { 
      Text = "2", 
      Margin = new Thickness(0, 0, 0, 20) 
     }; 
     var fiveButton = new Button 
     { 
      Text = "5", 
      Margin = new Thickness(0, 0, 0, 20) 
     }; 

     var tapScreenLabel = new Label 
     { 
      Text = "Tap Screen", 
      Margin = new Thickness(0, 0, 0, 20), 
      VerticalTextAlignment = TextAlignment.Center, 
      VerticalOptions = LayoutOptions.Center 
     }; 

     Func<RelativeLayout, double> GetZeroButtonHeight = parent => zeroButton.Measure(parent.Width, parent.Height).Request.Height; 
     Func<RelativeLayout, double> GetOneButtonHeight = parent => oneButton.Measure(parent.Width, parent.Height).Request.Height; 
     Func<RelativeLayout, double> GetTwoButtonHeight = parent => twoButton.Measure(parent.Width, parent.Height).Request.Height; 
     Func<RelativeLayout, double> GetFiveButtonHeight = parent => fiveButton.Measure(parent.Width, parent.Height).Request.Height; 

     var relativeLayout = new RelativeLayout(); 
     relativeLayout.Children.Add(emptyLabel, 
            Constraint.Constant(0), 
            Constraint.Constant(0), 
            Constraint.RelativeToParent(parent => parent.Width)); 
     relativeLayout.Children.Add(resetPointsButton, 
            Constraint.Constant(0), 
            Constraint.Constant(0), 
            Constraint.RelativeToParent(parent => parent.Width)); 
     relativeLayout.Children.Add(msg1Label, 
            Constraint.Constant(25), 
            Constraint.RelativeToView(resetPointsButton, (parent, view) => view.Y + view.Height), 
            Constraint.RelativeToParent(parent => parent.Width * 0.25)); 
     relativeLayout.Children.Add(msg2Label, 
            Constraint.RelativeToView(msg1Label, (parent, view) => view.X + view.Width), 
            Constraint.RelativeToView(resetPointsButton, (parent, view) => view.Y + view.Height), 
            Constraint.RelativeToParent(parent => parent.Width * 0.25)); 
     relativeLayout.Children.Add(msg3Label, 
            Constraint.RelativeToView(msg2Label, (parent, view) => view.X + view.Width), 
            Constraint.RelativeToView(resetPointsButton, (parent, view) => view.Y + view.Height), 
            Constraint.RelativeToParent(parent => parent.Width * 0.5)); 
     relativeLayout.Children.Add(faveLabel, 
            Constraint.Constant(25), 
            Constraint.RelativeToView(msg1Label, (parent, view) => view.Y + view.Height + 20), 
            Constraint.RelativeToParent(parent => parent.Width * 0.25)); 
     relativeLayout.Children.Add(wordTypeLabel, 
            Constraint.RelativeToView(faveLabel, (parent, view) => view.X + view.Width), 
            Constraint.RelativeToView(msg1Label, (parent, view) => view.Y + view.Height + 20), 
            Constraint.RelativeToParent(parent => parent.Width * 0.25)); 
     relativeLayout.Children.Add(textLabel, 
            Constraint.Constant(20), 
            Constraint.RelativeToView(faveLabel, (parent, view) => view.Y + view.Height + 20), 
            Constraint.RelativeToParent(parent => parent.Width - 40), 
            Constraint.RelativeToParent(parent => parent.Height * 0.25)); 
     relativeLayout.Children.Add(detail1Label, 
            Constraint.Constant(20), 
            Constraint.RelativeToView(textLabel, (parent, view) => view.Y + view.Height + 20)); 
     relativeLayout.Children.Add(detail2Label, 
            Constraint.Constant(20), 
            Constraint.RelativeToView(detail1Label, (parent, view) => view.Y + view.Height)); 
     relativeLayout.Children.Add(detail3Label, 
            Constraint.Constant(20), 
            Constraint.RelativeToView(detail2Label, (parent, view) => view.Y + view.Height)); 
     relativeLayout.Children.Add(zeroButton, 
            Constraint.Constant(40), 
            Constraint.RelativeToParent(parent => parent.Height - GetZeroButtonHeight(parent) - 40), 
            Constraint.RelativeToParent(parent => (parent.Width - 80)/4)); 
     relativeLayout.Children.Add(oneButton, 
            Constraint.RelativeToView(zeroButton, (parent, view) => view.X + view.Width), 
            Constraint.RelativeToParent(parent => parent.Height - GetZeroButtonHeight(parent) - 40), 
            Constraint.RelativeToParent(parent => (parent.Width - 80)/4)); 
     relativeLayout.Children.Add(twoButton, 
            Constraint.RelativeToView(oneButton, (parent, view) => view.X + view.Width), 
            Constraint.RelativeToParent(parent => parent.Height - GetZeroButtonHeight(parent) - 40), 
            Constraint.RelativeToParent(parent => (parent.Width - 80)/4)); 
     relativeLayout.Children.Add(fiveButton, 
            Constraint.RelativeToView(twoButton, (parent, view) => view.X + view.Width), 
            Constraint.RelativeToParent(parent => parent.Height - GetZeroButtonHeight(parent) - 40), 
            Constraint.RelativeToParent(parent => (parent.Width - 80)/4)); 
     relativeLayout.Children.Add(tapScreenLabel, 
            Constraint.Constant(20), 
            Constraint.RelativeToView(zeroButton, (parent, view) => view.Y), 
            Constraint.RelativeToParent(parent => parent.Width - 40)); 

     Padding = GetPadding(); 
     Content = relativeLayout; 
    } 

    Thickness GetPadding() 
    { 
     switch (Device.RuntimePlatform) 
     { 
      case Device.iOS: 
       return new Thickness(0, 20, 0, 0); 
      default: 
       return default(Thickness); 
     } 
    } 
} 

iOS Demo

Android Demo