MAUI: содержимое Collectionview не отображается при добавлении RefreshView

Я добавил RefreshView вместо CollectionView. После добавления RefreshView содержимое CollectionView не отображается в пользовательском интерфейсе. Содержимое CollectionView видно в пользовательском интерфейсе перед добавлением RefreshView. Ниже приведен код:

<?xml version = "1.0" encoding = "utf-8" ?>
<ContentPage 
    xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml" 
    BackgroundColor = "White"
    x:Class = "NeedHelp.Pages.FriendDetailsPage">

    <ContentPage.Content>
        <StackLayout>
            <Grid BackgroundColor = "#eeeeee">
                
            </Grid>

            <ScrollView 
                x:Name = "frienddetails_scrollview"
                IsVisible = "False"
                Orientation = "Vertical" 
                VerticalOptions = "FillAndExpand" 
                HorizontalOptions = "FillAndExpand">
                
                <StackLayout
                    Margin = "15">
                    
                    <Frame 
                        BorderColor = "#efefef"
                        BackgroundColor = "White"
                        CornerRadius = "5"
                        HasShadow = "False"
                        Padding = "5">
                        
                    </Frame>

                    <Frame
                        BorderColor = "#efefef"
                        Padding = "3"
                        x:Name = "map_layout"
                        Margin = "0,5,0,0">
                        
                    </Frame>

                    <Label
                        Margin = "0,5,0,0"
                        x:Name = "History_label"
                        Text = "History"
                        TextColor = "#424242"
                        HorizontalOptions = "Center"
                        HorizontalTextAlignment = "Center">
                    </Label>

                    <Frame
                        x:Name = "Tab_layout"
                        BorderColor = "#efefef"
                        Margin = "0,5,0,0"
                        BackgroundColor = "White"
                        HasShadow = "False"
                        CornerRadius = "5"
                        Padding = "5">

                    </Frame>

                    <ListView 
                        x:Name = "historylistview"
                        SeparatorVisibility = "None"
                        HasUnevenRows = "True"
                        SelectionMode = "None"
                        CachingStrategy = "RecycleElement"
                        BackgroundColor = "#ffffff">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <ViewCell.View>
                                        <StackLayout
                                            Margin = "0,0,0,10">
                                            
                                        </StackLayout>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>

                        <ListView.Footer>
                            <Label/>
                        </ListView.Footer>
                    </ListView>
                    
                <RefreshView 
                    IsRefreshing = "{Binding IsRefreshing}"
                    Command = "{Binding RefreshCommand}">

                    <CollectionView 
                        x:Name = "MyTweetsList" 
                        Margin = "0,5,0,5"
                        ItemsSource = "{Binding AllItems,Mode=TwoWay}"
                        RemainingItemsThreshold = "0"
                        RemainingItemsThresholdReached = "LoadMoreTweets"
                        HorizontalOptions = "Fill">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout
                                    x:Name = "Item"
                                    HorizontalOptions = "Fill"
                                    VerticalOptions = "FillAndExpand"
                                    Orientation = "Vertical">

                                </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                        <CollectionView.HeightRequest>
                            <OnIdiom x:TypeArguments = "x:Double">
                                <OnIdiom.Phone>400</OnIdiom.Phone>
                                <OnIdiom.Tablet>600</OnIdiom.Tablet>
                                <OnIdiom.Desktop>400</OnIdiom.Desktop>
                            </OnIdiom>
                        </CollectionView.HeightRequest>
                    </CollectionView>
                </RefreshView>

                    <Label
                        VerticalOptions = "CenterAndExpand"
                        HorizontalOptions = "CenterAndExpand"
                        IsVisible = "{Binding ComingSoonVisibility}"
                        HorizontalTextAlignment = "Center"
                        Text = "No Messages Yet."
                        x:Name = "no_announcement_label"/>
                </StackLayout>
            </ScrollView>
            
            <Grid 
                x:Name = "tweetBox"
                IsVisible = "False"
                Margin = "0,0,0,10">

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

public ICommand RefreshCommand
{
    get
    {
        return new Command(async () =>
        {
            IsRefreshing = true;
            
            LoadData();
            
            IsRefreshing = false;
        });
    }
}


private bool _isRefreshing = false;
public bool IsRefreshing
{
    get { return _isRefreshing; }
    set
    {
        _isRefreshing = value;
        OnPropertyChanged(nameof(IsRefreshing));
    }
}

Нужно ли мне добавлять что-нибудь еще для просмотра данных в пользовательском интерфейсе при добавлении RefreshView?

Вы перепроверили, что данные загружаются правильно методом LoadData();?

Jessie Zhang -MSFT 26.06.2024 11:39

@JessieZhang-MSFT Проблема не в обновлении. При первой загрузке данные просмотра коллекции не отображаются в пользовательском интерфейсе.

Matthew Pans 26.06.2024 11:58

Не могли бы вы опубликовать весь код .xaml текущей страницы?

Jessie Zhang -MSFT 26.06.2024 12:01

@JessieZhang-MSFT Я обновил вопрос со всей структурой пользовательского интерфейса, не могли бы вы проверить сейчас.

Matthew Pans 26.06.2024 15:22

@JessieZhang-MSFT Я попробовал то же самое на новом демонстрационном проекте, и там он работает нормально. Но только в моем основном проекте это не работает, так что, должно быть, проблема в моей существующей структуре макета.

Matthew Pans 26.06.2024 15:50
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
5
95
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, это именно тот случай, как вы сказали.

Но в качестве обходного пути вы можете добавить StackLayout снаружи RefreshView и установить специальное значение для свойства HeightRequest.

Вы можете обратиться к следующему коду:

                <StackLayout BackgroundColor = "YellowGreen" HeightRequest = "200" VerticalOptions = "Fill" > 

                    <RefreshView  BackgroundColor = "Pink"
                IsRefreshing = "{Binding IsRefreshing}"
                Command = "{Binding RefreshCommand}">

                        <CollectionView
                        BackgroundColor = "LightBlue"
                    x:Name = "MyTweetsList"
                    Margin = "0,5,0,5"
                    ItemsSource = "{Binding Items,Mode=TwoWay}"
                    HorizontalOptions = "Fill">
                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout
                                x:Name = "Item"
                                HorizontalOptions = "Fill"
                                VerticalOptions = "FillAndExpand"
                                Orientation = "Vertical">
                                        <Label  Text = "{Binding Name}" />


                                    </StackLayout>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                            <CollectionView.HeightRequest>
                                <OnIdiom x:TypeArguments = "x:Double">
                                    <OnIdiom.Phone>400</OnIdiom.Phone>
                                    <OnIdiom.Tablet>600</OnIdiom.Tablet>
                                    <OnIdiom.Desktop>400</OnIdiom.Desktop>
                                </OnIdiom>
                            </CollectionView.HeightRequest>
                        </CollectionView>
                    </RefreshView>

                </StackLayout>

Примечание:

1. И есть известная проблема: CollectionView в RefreshView не отображается в ВертикальномStackLayout, но отображается в StackLayout, поэтому, пожалуйста, используйте StackLayout, а не VerticalStackLayout.

2. Не забудьте установить свойство IsVisible внешнего ScrollView на true, иначе вы не увидите в нем ни одного представления.

      <ScrollView 
            x:Name = "frienddetails_scrollview"
            IsVisible = "False"
      </ScrollView>

Но в моем коде нет вертикального стека.

Matthew Pans 27.06.2024 10:10

Привет @MatthewPans, спасибо за ваш отзыв. Поскольку в настоящее время в этом отношении существуют связанные с этим проблемы, я просто сделал любезное напоминание в заметке. :)

Jessie Zhang -MSFT 27.06.2024 10:55

Другие вопросы по теме