网格布局不正确xamarin表单

您好，我使用的是xamarin表单，我希望更多地使用网格，而不是嵌套堆栈布局

我不得不说，尽管我已经多次阅读了微软的解释“自动vs”*“ 我确实感到困惑，我希望能找到一个简单的解释

看到下面的图片，我希望数量接近星星图标，但我得到下面，数量远离图标。我甚至把颜色，看看东西在哪里。有什么建议吗

  <Frame Margin="0,0,0,10"  CornerRadius="10" BorderColor="Red">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" BackgroundColor="Yellow" Grid.ColumnSpan="2" Text="Long description message"/>
                    <Label Grid.Row="0" Grid.Column="2" BackgroundColor="Aqua" Text="28/1/2019" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" />
                    <Image Grid.Row="1" Grid.Column="0" BackgroundColor="Coral" Source="star.png" HorizontalOptions="Start"></Image>
                    <Label Grid.Row="1" Grid.Column="1" BackgroundColor="CornflowerBlue" Text="£ 11.000" VerticalOptions="Start" HorizontalOptions="Start" />
                    <Label Grid.Row="1" Grid.Column="2" BackgroundColor="DarkCyan" Text="£33,565.45" FontSize="16" VerticalTextAlignment="End" HorizontalOptions="EndAndExpand" />
                </Grid>
            </Frame>

自动

表示（在列宽的情况下）它将以特定列的最大元素所需的宽度作为列宽。在您的示例中，第二列不大于屏幕上所需的11.000英镑。如果您要写入11.000.000英镑，则第二列的宽度将自动增加并适应此文本，然后第1列和第3列都将被删除同样小

*

或星号表示它将在所有宽度属性中设置的星号总数之间分割剩余的可用空间。例如，给定一个具有两列的网格：如果列1宽度等于

*

（shortcut表示1*）第2列的宽度也等于

*

，它会将屏幕分成中间，两个宽度相等。如果第一列的宽度等于

2*

，第二列的宽度等于

*

，第一列将使用屏幕宽度的2/3，第二列将使用剩余的1/3。如果第一列的宽度等于

3*

第二个宽度等于

*

，第一列将使用屏幕宽度的3/4（75%），第二列将使用剩余的1/4。依此类推

因此，关于您的代码，您可以这样理解：首先，它根据列的最大元素自动设置第二列宽度（在您的情况下为11.000英镑）然后，由于剩下两列的宽度为

*

，它会将剩余的空间分成两个相等的宽度。这就是数字不在图片旁边的原因，因为第一列的“*”

要解决此问题，只需将第一列宽度设置为

Auto

，将第二列宽度设置为

*

：

<Frame Margin="0,0,0,10"  CornerRadius="10" BorderColor="Red">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" BackgroundColor="Yellow" Grid.ColumnSpan="2" Text="Long description message"/>
        <Label Grid.Row="0" Grid.Column="2" BackgroundColor="Aqua" Text="28/1/2019" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" />
        <Image Grid.Row="1" Grid.Column="0" BackgroundColor="Coral" Source="star.png" HorizontalOptions="Start"></Image>
        <Label Grid.Row="1" Grid.Column="1" BackgroundColor="CornflowerBlue" Text="£ 11.000" VerticalOptions="Start" HorizontalOptions="Start" />
        <Label Grid.Row="1" Grid.Column="2" BackgroundColor="DarkCyan" Text="£33,565.45" FontSize="16" VerticalTextAlignment="End" HorizontalOptions="EndAndExpand" />
    </Grid>
</Frame>