Question

如何创建一个双列网格，左边的列只占用所需的空间，而另一列只留下尽可能多的空间

我试过这段代码：

<Grid VerticalOptions="Start" Margin="10,0,10,0">
   <Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Exclude Hidden" /></Grid>
   <Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="Start"><Label Text="All cards except those tagged as hidden" /></Grid>
   <Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Include Hidden" /></Grid>
   <Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Start"><Label        <Grid Grid.Row="2" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Favorites" /></Grid>
   <Grid Grid.Row="2" Grid.Column="1" HorizontalOptions="Start"><Label Text="Only cards tagged as favorites" /></Grid>
   <Grid Grid.Row="3" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Hidden" /></Grid>
   <Grid Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"><Label Text="Only those cards tagged as hidden" /></Grid>
</Grid>

但是这将网格划分为50:50第1列和第2列。我需要的是第1列只占用所需空间，第2列占用所有其余空间。

有人可以建议我怎么做吗？

Answer 1

为此，您需要使用Grid.ColumnDefinitions。以下是代码示例：

 <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>

使用此代码，您可以定义网格中列的定义。第一个定义，第一列是使用自动宽度，第一列将占用所需数量，第二列ColumnDefinition用于第二列，它将需要休息（*），或者“ ALL”。

要与现有的XAML关注代码一起使用：

<Grid VerticalOptions="Start" Margin="10,0,10,0">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Start">
            <Label Text="· Exclude Hidden" />
        </Grid>

        <Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="Start">
            <Label Text="All cards except those tagged as hidden" />
        </Grid>

        <Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Start">
            <Label Text="· Include Hidden" />
        </Grid>

        <Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Start">
            <Label Text="All cards with those tagged as hidden" />
        </Grid>

        <Grid Grid.Row="2" Grid.Column="0" HorizontalOptions="Start">
            <Label Text="· Favorites" />
        </Grid>

        <Grid Grid.Row="2" Grid.Column="1" HorizontalOptions="Start">
            <Label Text="Only cards tagged as favorites" />
        </Grid>

        <Grid Grid.Row="3" Grid.Column="0" HorizontalOptions="Start">
            <Label Text="· Hidden" />
        </Grid>

        <Grid Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
            <Label Text="Only those cards tagged as hidden" />
        </Grid>
</Grid>

...另外我不确定你为什么要使用那些内部Grids来抓住你的Labels，这不是IMO的最佳做法，但这只是我的观点。

我的代码的最终结果是这样的：

希望这对你有所帮助！

快速注释：第一列的宽度为最长的行项目。

在Xaml中调整Xamarin.Forms网格列

1 个答案: