Question

如何使用Home.xaml显示三列布局，下面仍显示为单列，我在<Grid></Grid>中添加了行定义和列定义，请告知

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="soccerapp.Home" BackgroundColor="White" Title="Home">
    <ContentPage.Content>
        <Grid Padding="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Text="Player1" BackgroundColor="#f4d144"/>
            <Label Grid.Row="1" Text="Player2" BackgroundColor="#ed4edd"/>
            <Label Grid.Row="2" Text="Player3" BackgroundColor="#44ce9e"/>
            <Label Grid.Row="3" Text="Player4" BackgroundColor="#44ce9e"/>

            <Label x:Name="HomeLabel"  Text="Home Page is here" TextColor="White"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" FontSize="Medium"></Label>
        </Grid>
    </ContentPage.Content>
</ContentPage>

请找到以下屏幕截图（网格显示在单列中，这不是我想要的）

....我想按照以下屏幕截图显示网格：

Answer 1

首先，您仅定义了两列，而不是三列。其次，将所有标签都放在第一列

<Grid Padding="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Use Grid.Column to specify column -->
        <Label Grid.Row="0" Grid.Column="0" Text="Player1" BackgroundColor="#f4d144"/>
        <Label Grid.Row="0" Grid.Column="1" Text="Player2" BackgroundColor="#ed4edd"/>
        <Label Grid.Row="0" Grid.Column="2" Text="Player3" BackgroundColor="#44ce9e"/>

    </Grid>

如何在xamarin.forms应用中创建三列布局

1 个答案: