Question

我想在一行中显示三个进度条，但是当我运行代码时，第一个进度条没有显示在页面上。但是第二和第三正在显示。您能告诉我我在做什么错吗？

<StackLayout Grid.Row="8" Orientation="Horizontal" HeightRequest="15" Padding="5" VerticalOptions="Start"  HorizontalOptions="StartAndExpand" Margin="0,-10">
                        <Grid VerticalOptions="Start" Margin="0,1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="25"/>
                                <RowDefinition Height="20"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="33" />
                                <ColumnDefinition Width="33" />
                                <ColumnDefinition Width="34" />
                            </Grid.ColumnDefinitions>
                            <!--<Image Grid.Row="0" Grid.Column="1" Source="upload.png"  HeightRequest="30" WidthRequest="30" />-->
                            <Label x:Name="LableInbound" Grid.Row="0" Grid.Column="0" Text="Inbound"  TextColor="Black" HorizontalOptions="FillAndExpand"  VerticalOptions="Start" Margin="-5,-10,0,0" />
                            <Label x:Name="LableOutbound" Grid.Row="0" Grid.Column="1" Text="Outbound" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Margin="-5,-10,0,0"  />
                            <Label x:Name="LableDelivery" Grid.Row="0" Grid.Column="2" Text="Delivery" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Margin="-5,-10,0,0" />

                            <ProgressBar Grid.Row="1" Grid.Column="0" x:Name="OrderUploadProgressInbound"  HeightRequest="20" Progress="1" VerticalOptions="Center"  HorizontalOptions="Start" Margin="0,-10,0,0"   />
                            <ProgressBar Grid.Row="1" Grid.Column="1" x:Name="OrderUploadProgressOutbound"   HeightRequest="20" Progress="1" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0"   />
                            <ProgressBar Grid.Row="1" Grid.Column="2" x:Name="OrderUploadProgressDelivery"  HeightRequest="20" Progress="1" VerticalOptions="Center" HorizontalOptions="End"  Margin="0,-10,0,0"   />
                        </Grid>
                    </StackLayout>

Answer 1

此问题的原因是，属性Grid.Column应该从0开始，而不是1。我将您的代码修改为以下内容，并且效果很好。

<StackLayout Grid.Row="8" Orientation="Horizontal" HeightRequest="15" Padding="5" VerticalOptions="Start"  HorizontalOptions="StartAndExpand" Margin="0,-10">
                    <Grid VerticalOptions="Center" Margin="0,1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="33*" />
                            <ColumnDefinition Width="33*" />
                            <ColumnDefinition Width="34*" />
                        </Grid.ColumnDefinitions>
                        <ProgressBar Grid.Row="0" Grid.Column="0" x:Name="OrderUploadProgressInbound" WidthRequest="100"  HeightRequest="20" Progress="1" VerticalOptions="Center"  HorizontalOptions="Start" Margin="7,0,0,0"   />
                        <ProgressBar Grid.Row="0" Grid.Column="1" x:Name="OrderUploadProgressOutbound" WidthRequest="100"  HeightRequest="20" Progress="1" VerticalOptions="Center" HorizontalOptions="Center" Margin="12,0,0,0"   />
                        <ProgressBar Grid.Row="0" Grid.Column="2" x:Name="OrderUploadProgressDelivery" WidthRequest="100"  HeightRequest="20" Progress="1" VerticalOptions="Center" HorizontalOptions="End"  Margin="15,0,0,0"   />
                    </Grid>
                </StackLayout>

进度栏未显示在分配的位置上

1 个答案: