Блог

Главная - Вопросы по программированию - Отображение стекового описания с объектами в привязке в нескольких строках

Отображение стекового описания с объектами в привязке в нескольких строках

#c# #xaml #xamarin.forms

#c# #xaml #xamarin.forms

Вопрос:

У меня есть StackLayout с Binding элементами внутри Grid макета. stackLayout Показывает серию объектов, и я бы хотел, чтобы, когда он по горизонтали доходил до конца экрана, объекты продолжали отображать их путем переноса, так просто Label . Проблема в том, что объекты всегда отображаются для меня только в одной строке, и я не могу видеть их все.

Пример

Это мой код:

 <StackLayout
   Grid.Row="2"
   Grid.Column="2"                                               
   BindableLayout.ItemsSource="{Binding IconDiaries}"
   VerticalOptions="FillAndExpand"
   Orientation="Horizontal">
      <BindableLayout.ItemTemplate>
          <DataTemplate>
             <Grid RowSpacing="0.5">
                <Grid.RowDefinitions>
                   <RowDefinition Height="17"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="18"/>
                   <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <BoxView BackgroundColor="Gray" Grid.ColumnSpan="2" Grid.Row="0" CornerRadius="5" Opacity="0.6" />
                <Image Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="3"/>
                <Label Grid.Row="0" Grid.Column="1" Text="{Binding id}" TextColor="Black" FontSize="12" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
              </Grid>
         </DataTemplate>
     </BindableLayout.ItemTemplate>
</StackLayout>

Ответ №1:

Что вам нужно, так это обертывание, и оно обеспечивается FlexLayout

Измените эти свойства в соответствии с вашими потребностями Wrap AlignItems Direction JustifyContent , чтобы получить желаемый результат

 <FlexLayout BindableLayout.ItemsSource="{Binding YourItemSource}" 
            Wrap="Wrap" JustifyContent="Start" Direction="Row" AlignItems="Start" AlignContent="Start">
    <BindableLayout.ItemTemplate>
          <DataTemplate>
               <!-- Your Template -->
          </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

Еще один пример, который вам поможет

Ответ №2:

stacklayout не может этого достичь, и вы можете использовать collectionview и установить для itemsLayout значение GridLayout