如何使用Grid.ColumnDefinitions定义最左列和两个最右列

Question

我想填写三个网格列：

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

列顺序

 Column 1                          Column 2  Column 3

有人可以帮我告诉我如何定义它，以使第1列位于最左侧，而第2列和第3列位于最右侧吗？

Answer 1

您可以在下面尝试代码

解决方案1 ​​（推荐）

<StackLayout >
    <ScrollView>
        <Grid x:Name="TableGrid" VerticalOptions="CenterAndExpand"  BackgroundColor="Silver" Margin="10" Padding="1" RowSpacing="1" ColumnSpacing="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>

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

        <Label Text="First name" x:Name="lblFirst"  Grid.ColumnSpan="2" Grid.Row="0" Style="{DynamicResource headerTablet}"/>
        <Label Text="Last name" x:Name="lb1Sec" Grid.Column="2" Grid.Row="0"  Style="{DynamicResource headerTablet}"/>
        <Label Text="Gender" Grid.Column="3" x:Name="lblThird" Grid.Row="0" Style="{DynamicResource headerTablet}"/>
    </Grid>
    </ScrollView>
    </StackLayout>

解决方案2

<?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="myProj.Pages.Page1">
<ContentPage.Resources>
    <ResourceDictionary>
    <Style x:Key="headerTablet" TargetType="Label">
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="BackgroundColor" Value="Silver" />
        <Setter Property="FontSize" Value="17" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="HorizontalTextAlignment" Value="Center" />
    </Style>                                  
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout >
    <ScrollView>
    <Grid x:Name="TableGrid" VerticalOptions="CenterAndExpand"  BackgroundColor="Silver" Margin="10" Padding="1" RowSpacing="1" ColumnSpacing="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>

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

    <Label Text="First name" x:Name="lblFirst"   Grid.Row="0" Style="{DynamicResource headerTablet}"/>
    <Label  x:Name="lblHidden" Grid.Column="1" Grid.Row="0"  Style="{DynamicResource headerTablet}"/>
    <Label Text="Last name" x:Name="lb1Sec" Grid.Column="2" Grid.Row="0"  Style="{DynamicResource headerTablet}"/>
    <Label Text="Gender" Grid.Column="3" x:Name="lblThird" Grid.Row="0" Style="{DynamicResource headerTablet}"/>
    </Grid>
    </ScrollView>
</StackLayout>
</ContentPage>

解决方案3

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

在下面输出屏幕截图

Answer 2

尝试一下：

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

最右边的两列将调整大小以适合其内容，而第一列将拉伸以填充剩余的空间。

或者，您可以执行以下操作：

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" /> <!-- Left Column --> 
        <ColumnDefinition Width="*" />    <!-- Spacer column -->
        <ColumnDefinition Width="Auto" /> <!-- Right Column 1 -->
        <ColumnDefinition Width="Auto" /> <!-- Right Column 2 -->
    </Grid.ColumnDefinitions>

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

Answer 3

您可以通过将“宽度”设置为“ Times Star”来更改相对宽度。 基本上，“ *”只是“ 1 *”的缩写。

因此，如果您有三个列定义，将其设置为“ *”，则Xamarin.Forms将创建一个由三个大小相等的列组成的网格。 在某些情况下，可能需要使用间隔柱或跨度，但是有一种更简单的方法：

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

这将导致一个网格，其中第一列的宽度是其他两列的3倍。