如何更改<stacklayout> <grid>屏幕以使用<relativelayout>？

Question

我的代码目前是＆和

的组合

我想转向相对布局，并没有看到这么多的例子。将不胜感激任何关于如何实现这一目标的建议。

关于XAML的一些观点。

• 屏幕上显示emptyGrid或phraseGrid
• 屏幕上出现buttonGrid或tapGrid
• 按钮的垂直中心和水龙头标签应该是相同的位置。因此，当按钮未显示时，点击标签出现在与按钮相同的垂直按钮上。
• 框架显示在选项卡页面
中

我意识到这不仅仅是一个简单的问题，但我确信其他人会感兴趣。由于答案可能非常复杂，我将在几天内为此开放250点奖金。

    

    <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

代码

可以在GitHub中找到此源代码： https://github.com/brminnick/GridToRelativeLayout

var top = new ContentPane({..., content: title});

iOS演示

Android演示