Блог

Главная - Вопросы по программированию - Xamarin.Формы: как автоматически скрыть first CollectionView

Xamarin.Формы: как автоматически скрыть first CollectionView

#xaml #xamarin.forms #scroll #scrollbar #collectionview

#xaml #xamarin.forms #прокрутите #полоса прокрутки #collectionview

Вопрос:

Я работаю на Xamarin.Приложение Forms, которое будет содержать страницу с 2 элементами CollectionView:

  • горизонтальное представление коллекции, в котором будут отображаться события
  • вертикальное представление коллекции, в котором будут отображаться записи

Я бы хотел, чтобы первый список постепенно скрывался, как только пользователь начинает прокручивать второй список.

Мы можем найти это поведение в примере из Syncfusion: но они используют SfRotator в качестве элемента управления для горизонтального списка:

Я попытался воспроизвести то же поведение на своей странице, но оно работает не так, как ожидалось. Мой горизонтальный список не будет скрыт до тех пор, пока я не буду прокручивать по вертикали сам этот первый список. Если я прокручиваю второй вертикальный список, первый список все еще виден:

Мой XAML выглядит так:

 <ContentPage.Content>
    <RefreshView x:DataType="vm:NewsViewModel" 
                 IsRefreshing="{Binding IsRefreshing}"
                 Command="{Binding RefreshCommand}">
        <ScrollView>
            <StackLayout Padding="16" Spacing="16">
                <CollectionView x:Name="EventsListView"
                                ItemsSource="{Binding Events}"
                                HeightRequest="250"
                                VerticalScrollBarVisibility="Never"
                                SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal"
                                           ItemSpacing="20" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                           <ctrl:ShadowFrame BackgroundColor="Red">
                               <StackLayout x:DataType="model:Event" >
                                   <Label Text="{Binding Name}" />
                                   <Image Source="{Binding Image}" />
                               </StackLayout>
                           </ctrl:ShadowFrame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <CollectionView x:Name="NewsListView"
                                ItemsSource="{Binding News}"
                                VerticalScrollBarVisibility="Never"
                                SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Vertical"
                                           ItemSpacing="20" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                           <ctrl:ShadowFrame>
                               <StackLayout x:DataType="model:News">
                                   <Label Text="{Binding Description}" />
                                   <Label Text="{Binding Date}" />
                                   <Image Source="{Binding Image}" />
                               </StackLayout>
                           </ctrl:ShadowFrame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </ScrollView>
    </RefreshView>
</ContentPage.Content>

=> Есть ли способ добиться этого?

Ответ №1:

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

Xamarin не рекомендует использовать ListView, WebView или ScrollView внутри ScrollView. Microsoft Xamarin.Официальная документация Forms гласит, что ScrollViews не должны быть вложенными. Кроме того, ScrollViews не должны быть вложены в другие элементы управления, обеспечивающие прокрутку, такие как ListView и WebView.

И вот что происходит:

На самом ScrollView деле это не прокрутка, вертикальная CollectionView — это та, которая создает иллюзию прокрутки страницы, что означает, что горизонтальная всегда находится сверху.

Как это исправить?

Чтобы исправить это, вы должны удалить вертикаль CollectionView и использовать какой-то вид повторителя, в этом посте вы узнаете, как этого добиться.