时间戳

首页 > 解决方案 > Xamarin Grid 不均匀拆分

xaml - Xamarin Grid 不均匀拆分

问题描述

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

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

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

我还尝试将HorizonalOptionsGrid 和标签设置为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>

如果没有WidthRequesthack，我会得到以下结果：实际结果

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

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

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

标签： xamllistviewxamarinxamarin.formsgrid

解决方案

我希望 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>

推荐阅读