Xamarin Grid 不均匀拆分答案

【问题标题】：Xamarin Grid does not split evenlyXamarin Grid 不均匀拆分
【发布时间】：2019-10-05 05:51:25
【问题描述】：

我希望 ListView DataTemplate Cell 中包含的两个标签在屏幕上水平均匀分布。

据我了解，如果您使用 Grid 并将两个 ColumnDefinitions 设置为 1* 它应该可以工作。我试过了，它没有按预期显示。

我必须在第一个标签上添加一个大的WidthRequest 才能让它工作。

我还尝试将网格上的HorizonalOptions 和标签设置为FillAndExpand，但没有结果。

<ViewCell>
    <Frame HasShadow="true" Margin="2">
        <StackLayout Orientation="Horizontal" Margin="0,0,0,0" >
            <StackLayout WidthRequest="20" BackgroundColor="{Binding RYGStatusColor}" >
                <Label Text="{Binding RYGStatusLetter}" HorizontalTextAlignment="Center" 
                    FontSize="Medium" FontAttributes="Bold" TextColor="White" />
            </StackLayout>
            <StackLayout Orientation="Vertical">
                <Label Text="{Binding ProgramName}" FontSize="Medium" FontAttributes="Bold" />
                <Label Text="{Binding DesignCustomerName}" FontSize="Small" />
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" 
                        Text="{Binding EstimatedTotalValue, Converter={StaticResource CurrencyDisplay}}" 
                        FontSize="Small" FontAttributes="Bold" WidthRequest="1024" />
                    <!-- WidthRequest is a hack to force the width to be equal across the screen. -->
                    <Label Grid.Row="0" Grid.Column="1" FontSize="Small">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="Modified: " />
                                <Span Text="{Binding ModifiedDate, StringFormat='{0:M/d/yy}', Converter={StaticResource LocalTime}}}" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Grid>
            </StackLayout>
        </StackLayout>
    </Frame>
</ViewCell>

如果没有WidthRequest hack，我会得到以下结果：Actual Results

第 1 行 “标签1 标签2” 第 2 行 “标签1 标签2”

通过 hack，我得到了预期的结果：Expected Results

第 1 行 “标签1 标签2” 第 2 行 “标签1 标签2”

【问题讨论】：

尝试在您的网格和标签上设置 BackgroundColor - 这将有助于明确不同元素实际占用的空间以及您是否需要调整布局选项
谢谢，我懒得上传截图了，但是你可以看到结果，和我的模型一样。
这只是您的 ViewCell 布局的一部分吗？我认为查看整个布局会有所帮助。您的屏幕截图显示的内容比您的 XAML sn-p 更多
好点@Jason。更新到完整视图单元格
将 HorizontalOptions=FillAndExpand 添加到包含 StackLayout 并解决了问题。谢谢大家！

标签： xaml listview xamarin xamarin.forms grid

【解决方案1】：

我怀疑 Grid 正在正确拆分自身，但它并没有占用您所期望的全部空间。尝试将HorizontalOptions="FillAndExpand" 添加到网格本身并报告回来。

【讨论】：

Jason 上面关于整个 ViewCell 的注释和您的评论促使我考虑包含 StackLayout。添加 HorizontalOptions=FillAndExpand 并修复它。谢谢！！！

【解决方案2】：

我希望 ListView DataTemplate Cell 中包含的两个标签在屏幕上水平分布。据我了解，如果您使用 Grid 并将两个 ColumnDefinitions 设置为 1* 它应该可以工作。我试过了，它没有按预期显示。

我在 ListView 日期模板中使用您的代码，并且不使用 widthrequest，我得到以下结果。 Xamarin.Form 版本为 3.4.0.1008975。

代码如下：

<ContentPage.Content>
    <ListView ItemsSource="{Binding models}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>
                        <Label
                            Grid.Row="0"
                            Grid.Column="0"
                            BackgroundColor="Blue"
                            FontAttributes="Bold"
                            FontSize="Small"
                            Text="{Binding str1}" />
                        <!--  WidthRequest is a hack to force the width to be equal across the screen.  -->
                        <Label
                            Grid.Row="0"
                            Grid.Column="1"
                            BackgroundColor="Yellow"
                            FontSize="Small">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="Modified: " />
                                    <Span Text="{Binding str2}" />
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage.Content>

【讨论】：