Блог

Я использую следующий xaml в формах xamrin для создания страницы сведений о заказе со списком заказов в виде вложенного списка, однако у меня возникают трудности с выравниванием элементов представления списка.

 <ContentPage.Content>
  <ScrollView>
    <StackLayout Spacing="2">
         <Label Text="Order Number:"></Label>
          <Label Text="{Binding  Item.SopOrderNumber}" 
           LineBreakMode="NoWrap" 
           FontSize="20" />
            <Label Text="Phone Number:" FontSize="20" ></Label>
            <Label Text="{Binding  Item.TelephoneNumber}"/>
            <Button Command="{Binding SubmitCommand}"  Text="Click To Call"  TextColor="White"  
                FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                BackgroundColor="#088da5" /> 
            <Label Text="{Binding  Item.CustomerName}" 
                            LineBreakMode="NoWrap" 
                           FontSize="20"  />                                        
            <Label Text="Order Status"                         
            HorizontalOptions="StartAndExpand" />              
            <Picker x:Name="picker" Title="Order Status">
                <Picker.ItemsSource >
                    <x:Array Type="{x:Type x:String}">
                        <x:String>Delivered</x:String>
                        <x:String>Damaged</x:String>
                        <x:String>Missing</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker> 

            <Label Text="Order Details" FontSize="Large"></Label>
            <ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
                    <ListView.ItemTemplate >
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                <StackLayout Orientation="Horizontal" Padding="10" Spacing="15">
                                    <Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
                                    <Label Text="{Binding StockCode}"  FontSize="20" TextColor="Gray"></Label>
                                    <Label Text="{Binding StockDescription}"  FontSize="20" TextColor="Gray"></Label>
                                    <Label Text="{Binding Price}" TextColor="Gray"  FontSize="20" ></Label>
                                    <Label Text="{Binding Qty}" TextColor="Gray"  FontSize="20" ></Label>
                                </StackLayout>

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

                <Label Text="Notes"                           
            HorizontalOptions="StartAndExpand"             
               />
            <Editor x:Name="txtNotes"
                    VerticalOptions="FillAndExpand" HeightRequest="20"></Editor>

                  <Sig:SignaturePadView x:Name="signaturePad" />

            <Image x:Name="PhotoSource" ></Image>

            <Button Command="{Binding SubmitCommand}"  Text="Take Picture of Delivery" x:Name="btnTakePhto" Clicked="BtnTakePhto_Clicked"  TextColor="White"  
                FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                BackgroundColor="#088da5" />

            <Button Text="Update Order" BackgroundColor="AliceBlue"  Clicked="Update_Order_Clicked"></Button>
            <Button Text="Update Order and Goto Next Job" BackgroundColor="AliceBlue"  Clicked="Update_Order_Clicked"></Button>

        </StackLayout>
    </ScrollView>
</ContentPage.Content>
  

Как вы можете видеть из изображения, элементы в Listview не совпадают друг с другом, как я могу сделать их такими выровненными.

Редактировать 2 Еще раз привет, боюсь, я попробовал приведенный ниже ответ, но он не сработал, в итоге он выглядел хорошо.

     <ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >

<ListView.ItemTemplate >
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>

                    <Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
                    <Label Text="{Binding StockCode}"  FontSize="20" TextColor="Gray"></Label>
                    <Label Text="{Binding StockDescription}"  FontSize="20" TextColor="Gray"></Label>
                    <Label Text="{Binding Price}" TextColor="Gray"  FontSize="20" ></Label>
                    <Label Text="{Binding Qty}" TextColor="Gray"  FontSize="20" ></Label>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

</ListView>
  

Если вы хотите, чтобы все было выровнено, StackLayout, вероятно, не подходит для этого. StackLayout выделяет пространство для каждого дочернего элемента в зависимости от того, сколько ему нужно, поэтому, если каждая строка в вашем списке имеет разные требования к ширине для разных элементов, например price, вы получите вид макета, который вы видите.

Лучшим подходом была бы сетка, которая дает вам явный контроль над шириной каждого столбца:

 <ListView.ItemTemplate >
    <DataTemplate>
        <ViewCell>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>

            <Label Text="{Binding ItemNumber}" Grid.Column="0" FontSize="20" ></Label>
            <Label Text="{Binding StockCode}"  Grid.Column="1" FontSize="20" TextColor="Gray"></Label>
            <Label Text="{Binding StockDescription}"  Grid.Column="2" FontSize="20" TextColor="Gray"></Label>
            <Label Text="{Binding Price}" Grid.Column="3" TextColor="Gray"  FontSize="20" ></Label>
            <Label Text="{Binding Qty}"  Grid.Column="4" TextColor="Gray"  FontSize="20" ></Label>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>
  

В этом примере каждый столбец определен как имеющий равную ширину (равномерно разделяя доступную ширину), но вы можете настроить его по своему усмотрению.

Вы могли бы изменить одно из определений столбцов на Width=»1.5 *», что позволило бы выделить этому столбцу в 1,5 раза больше места, чем другим столбцам. Или вы могли бы определить столбец с Width =»100″, который придавал бы ему фиксированный размер независимо от ширины экрана.

Существует также Width=»Auto», который позволяет вам устанавливать ширину столбца на основе объема пространства, необходимого для содержимого этого столбца, но поскольку каждая строка в вашем ListView представляет собой отдельную сетку, вы столкнетесь с той же проблемой, что и сейчас с StackLayout .