ListView внутри CarouselView не имеет вертикальной прокрутки

У меня есть некоторые проблемы с тем, чтобы мой ListView был прокручиваемым по вертикали, что должно быть поведением по умолчанию (?).

Listview содержится в CarouselTemplate вместе с несколькими другими Grid предметами.

Главная страница, содержащая CarouselView:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
    <ContentPage.Content>

        <Grid>

            <Grid RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <CarouselView
                    Margin="0,25,0,0"
                    HorizontalScrollBarVisibility="Never"
                    IndicatorView="indicatorView"
                    IsBounceEnabled="False"
                    ItemsSource="{Binding ActivityData}"
                    VerticalOptions="Center">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Frame Style="{StaticResource CarouselWorkaround}">
                                <local:PCSActivityLocationBrowserTemplate />

                            </Frame>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

                <IndicatorView
                    x:Name="indicatorView"
                    Padding="0,0,0,30"
                    IndicatorColor="{DynamicResource TranslucidBlack}"
                    SelectedIndicatorColor="{DynamicResource BaseTextColor}"
                    VerticalOptions="Start" />


            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Шаблон карусели (PCSActivityLocationBrowserTemplate):

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
    <ContentView.Content>
        <Grid>

            <Grid RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="120" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <!--  PAGE BG  -->
                <BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />

                <!--  CONTENT  -->
                <Grid Padding="0,0,0,10" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="250" />
                        <RowDefinition Height="140" />
                        <RowDefinition Height="450" />
                    </Grid.RowDefinitions>

                    <Grid Margin="20">
                        <!--  CARD  -->
                        <grial:CardView
                            Grid.Row="0"
                            CornerRadius="5"
                            HeightRequest="180"
                            Style="{StaticResource ResponsiveLandscapeMarginStyle}"
                            VerticalOptions="End">
                            
                            <StackLayout
                                Padding="20"
                                HorizontalOptions="Center"
                                VerticalOptions="End">
                               
                                <!-- Rest of code left out for simplicity -->
                                
                            </StackLayout>
                        </grial:CardView>
                    </Grid>

                    <!--  AVATAR  -->
                    <Grid
                        Grid.Row="0"
                        HorizontalOptions="Center"
                        VerticalOptions="Start">
                        
                        <!-- Rest of code left out for simplicity -->

                    </Grid>

                    <!--  BG  -->
                    <BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />

                    <!--  FLOORS  -->
                    <grial:Repeater
                        Grid.Row="1"
                        BackgroundColor="Red"
                        HeightRequest="130"
                        ItemsSource="{Binding CurrentFloors}"
                        Orientation="Horizontal"
                        ScrollPadding="10"
                        Spacing="30"
                        VerticalOptions="CenterAndExpand">
                        <grial:Repeater.ItemTemplate>
                            <DataTemplate>
                                <local:PCSActivityFloorsItemTemplate />
                            </DataTemplate>
                        </grial:Repeater.ItemTemplate>
                    </grial:Repeater>


                    <!--  BG  -->
                    <BoxView Grid.Row="2" BackgroundColor="{DynamicResource BasePageColor}" />

                    <!--  Rooms -->
                    <ListView
                        Grid.Row="2"
                        CachingStrategy="RecycleElement"
                        HasUnevenRows="false"
                        ItemsSource="{Binding CurrentRooms}"
                        RowHeight="60"
                        SeparatorVisibility="None"
                        VerticalOptions="Start">

                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <local:PCSActivityRoomsItemTemplate />
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </Grid>
        </Grid>
    </ContentView.Content>
</ContentView>

В разделе «Комнаты» (Listview) не работает вертикальная прокрутка:

Вероятно, для этого есть довольно простое решение, но я не могу найти его после нескольких корректировок, таких как установка третьей высоты RowDefinition (строка, содержащая ListView) на * или на Auto, при этом ListView полностью исчезает с экрана.


xamarin.forms xaml xamarin.forms.listview
person Nicolas    schedule 03.02.2021    source источник
comment
Вы можете поместить список в DataTemplate CarouselView напрямую, чтобы проверить, не вызвана ли проблема с прокруткой макетом.   -  person Lucas Zhang    schedule 03.02.2021
comment
@ LucasZhang-MSFT Когда я помещаю ListView непосредственно в шаблон CarouselView, он работает. Таким образом, проблема вызвана шаблоном PCSActivityLocationBrowserTemplate.   -  person Nicolas    schedule 03.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

Наконец-то нашел проблему, протестировав ее немного больше, перемещая вещи (благодаря подсказке @LucasZhang-MSFT протестировать ListView непосредственно в карусели), что я должен был сделать немного больше, прежде чем публиковать.

TLDR;

Было несколько ошибок.

  1. Первое, что я удалил, это внешний Grid в PCSActivityLocationBrowserTemplate, он содержал 1 фиксированную строку с height из 120 и 1 строку с * height. Этот Grid был реализован с пользовательской панелью навигации (с высотой 120), хотя она больше не использовалась, поэтому внешняя сетка была ненужной.
  2. Во-вторых, третья строка (строка моего ListView) была установлена ​​​​на фиксированную высоту, установив ее на *, список стал прокручиваемым.
  3. Я постоянно замечал, что моя третья строка (с ListView) исчезает с экрана, когда я устанавливаю ее высоту на * (что я и сделал, как описано в .2). Это было вызвано CarouselView на главной странице, потому что для VerticalOptions было установлено значение Center. Таким образом, он всегда будет центрировать все, и, поскольку размер экрана увеличивается с нефиксированной высотой третьей строки, весь шебанг будет центрирован и, следовательно, больше не будет виден. Установка VerticalOptions на Start исправила это.

Фиксированный код:

Главная страница, содержащая CarouselView:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
    <ContentPage.Content>

        <Grid>

            <Grid RowSpacing="0">

                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <CarouselView
                    Margin="0,25,0,0"
                    HorizontalScrollBarVisibility="Never"
                    IndicatorView="indicatorView"
                    IsBounceEnabled="False"
                    ItemsSource="{Binding ActivityData}"
                    VerticalOptions="Start">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Frame Style="{StaticResource CarouselWorkaround}">
                                <local:PCSActivityLocationBrowserTemplate />
                            </Frame>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

                <IndicatorView
                    x:Name="indicatorView"
                    Padding="0,0,0,30"
                    IndicatorColor="{DynamicResource TranslucidBlack}"
                    SelectedIndicatorColor="{DynamicResource BaseTextColor}"
                    VerticalOptions="Start" />

            </Grid>
        </Grid>

    </ContentPage.Content>
</ContentPage>

Шаблон карусели (PCSActivityLocationBrowserTemplate):

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
    <ContentView.Content>
        <Grid>

            <!--  CONTENT  -->
            <Grid Padding="0,0,0,10" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="250" />
                    <RowDefinition Height="140" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Grid Margin="20">
                    <!--  CARD  -->
                    <grial:CardView
                        Grid.Row="0"
                        CornerRadius="5"
                        HeightRequest="180"
                        Style="{StaticResource ResponsiveLandscapeMarginStyle}"
                        VerticalOptions="End">
                        <!--  Info  -->
                        <StackLayout
                            Padding="20"
                            HorizontalOptions="Center"
                            VerticalOptions="End">
                            <!--  Name  -->
                            <Label
                                FontSize="18"
                                HorizontalTextAlignment="Center"
                                Style="{StaticResource LabelBoldStyle}"
                                Text="{Binding LocationName}" />
                            <!--  {Binding Profile.Name}  -->

                            <!--  Description  -->
                            <Label HorizontalTextAlignment="Center" Text="{Binding ClientName}" />
                            <!--  {Binding Profile.Description}  -->

                            <!--  Social  -->
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <!--  Column 1  -->
                                <StackLayout Grid.Column="0" Spacing="0">
                                    <Label
                                        HorizontalTextAlignment="Center"
                                        Style="{StaticResource LabelBoldStyle}"
                                        Text="{Binding LocationTotalFloors}"
                                        TextColor="{DynamicResource AccentColor}" />
                                    <!--  voorheen hard-coded tekst: 1629  -->
                                    <Label
                                        FontSize="12"
                                        HorizontalTextAlignment="Center"
                                        Text="ETAGES" />
                                </StackLayout>

                                <!--  Column 2  -->
                                <StackLayout Grid.Column="1" Spacing="0">
                                    <Label
                                        HorizontalTextAlignment="Center"
                                        Style="{StaticResource LabelBoldStyle}"
                                        Text="{Binding LocationTotalRooms}"
                                        TextColor="{DynamicResource AccentColor}" />
                                    <!--  voorheen hard-coded tekst: 235  -->
                                    <Label
                                        FontSize="12"
                                        HorizontalTextAlignment="Center"
                                        Text="RUIMTES" />
                                </StackLayout>

                                <!--  Column 3  -->
                                <StackLayout Grid.Column="2" Spacing="0">
                                    <Label
                                        HorizontalTextAlignment="Center"
                                        Style="{StaticResource LabelBoldStyle}"
                                        Text="{Binding LocationTotalElements}"
                                        TextColor="{DynamicResource AccentColor}" />
                                    <!--  voorheen hard-coded tekst: 2963  -->
                                    <Label
                                        FontSize="12"
                                        HorizontalTextAlignment="Center"
                                        Text="ELEMENTEN" />
                                </StackLayout>

                            </Grid>
                        </StackLayout>
                    </grial:CardView>
                </Grid>

                <!--  AVATAR  -->
                <Grid
                    Grid.Row="0"
                    HorizontalOptions="Center"
                    VerticalOptions="Start">
                    
                    <!--  Image  -->
                    <local:CircleCachedImage
                        BorderColor="{DynamicResource BasePageColor}"
                        BorderSize="{OnPlatform Android=8,
                                                iOS=15}"
                        HeightRequest="100"
                        Source="resource://PCS2.APP.SharedImages.PCSDefaultClientImage.png"
                        WidthRequest="100" />

                    <!--  Badge  -->
                    <local:Badge
                        BackgroundColor="#22c064"
                        HorizontalOptions="Center"
                        Text="10+"
                        TextColor="{DynamicResource InverseTextColor}"
                        TranslationX="40"
                        VerticalOptions="Start" />
                </Grid>


                <!--  FLOORS  -->
                <grial:Repeater
                    Grid.Row="1"
                    BackgroundColor="Red"
                    HeightRequest="130"
                    ItemsSource="{Binding CurrentFloors}"
                    Orientation="Horizontal"
                    ScrollPadding="10"
                    Spacing="30"
                    VerticalOptions="CenterAndExpand">
                    <grial:Repeater.ItemTemplate>
                        <DataTemplate>
                            <local:PCSActivityFloorsItemTemplate />
                        </DataTemplate>
                    </grial:Repeater.ItemTemplate>
                </grial:Repeater>
         


                <!--  Rooms  -->
                <ListView
                    Grid.Row="2"
                    BackgroundColor="Blue"
                    CachingStrategy="RecycleElement"
                    HasUnevenRows="false"
                    ItemsSource="{Binding CurrentRooms}"
                    RowHeight="60"
                    SeparatorVisibility="None"
                    VerticalOptions="Start"
                    VerticalScrollBarVisibility="Always">

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <local:PCSActivityRoomsItemTemplate />
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>


            </Grid>

        </Grid>


    </ContentView.Content>
</ContentView>
person Nicolas    schedule 03.02.2021