Question

我有以下ListView-

<StackLayout>
    <ListView RowHeight="100"  Margin="0,10,2,10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"  Margin="0,4,4,4" Padding="0,4,4,4">
                            <StackLayout Orientation="Vertical">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <Image Grid.Column="0" Source="testLogo" HeightRequest="45" WidthRequest="45"/>
                                    <StackLayout Grid.Column="1" Orientation="Vertical" >
                                        <Label Text="test" Font="Bold" VerticalOptions="Center" />
                                    </StackLayout>
                                    <Button Grid.Column="2" Text="Login" HorizontalOptions="EndAndExpand" Margin="10,10,10,10"/>
                                </Grid>

                            </StackLayout>
                        </StackLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

这将按预期显示带列的网格，但是我无法将Button元素浮动到其相应列的最右侧。

因此，当前的显示效果看起来并不整洁，因为按钮位置似乎由Label元素的字符串长度决定。

我尝试将VerticalOptions="EndAndExpand"添加到Buttons"中，但这没有效果。

如何将按钮整齐地放置在其各自列的最右边？

Answer 1

如果使用 Grid 作为根布局，则可以按比例设置每个Grid项目的宽度。

如下：

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

效果：

在xaml中均匀对齐网格列

1 个答案: