是否可以使用 Xamarin 表单在 CarouselView 中的 loader(ActivityIndi​​cator) 之后显示 EmptyView？

Question

我有很多尝试在 Loader 之后显示 EmptyView 但没有成功可能我错过了 EmptyView 和 Loader 的一些代码配置。

我正在使用 ActivityIndi​​cator 加载器来加载视图，如果它会在数据到来时隐藏。

以下代码用于 CarouselView 的 EmptyView

<CarouselView.EmptyView>
                <Frame BackgroundColor="Transparent" Margin="20,150">
                <Frame BackgroundColor="White" CornerRadius="20" HeightRequest="150" WidthRequest="300" HorizontalOptions="Center" VerticalOptions="Center">
                    <Label Text="Data not Found" FontSize="Medium" HorizontalOptions="Center" VerticalOptions="Center"/>
                </Frame>
            </Frame>
    </CarouselView.EmptyView>

以下代码用于 ActivityIndi​​cator

<StackLayout IsVisible="{Binding IsBusy}" Padding="12" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
    <ActivityIndicator IsRunning="{Binding IsBusy}" Color="#BFA464" x:Name="PaymentLoader"/>
    <Label Text="Data is Loading..." HorizontalOptions="Center" TextColor="#BFA464"/>
</StackLayout>

下图是我的整个代码截图

here is full code image

如果有人有想法，请分享您的宝贵知识。

Answer 1

根据你的描述和代码，我猜你是想在没有找到数据的情况下显示CarouselView的EmptyView和ActivityIndi​​cator，对吗？

从Xamarin.Forms CarouselView EmptyView中，我们可以看到EmptyView，object类型，当ItemsSource属性为null，或者ItemsSource属性指定的集合为null或为空时将显示的字符串、绑定或视图。默认值为空。

我做了一个样本，你可以看看：

<StackLayout>
    <!--  Place new controls here  -->
    <CarouselView ItemsSource="{Binding models}">
        <CarouselView.EmptyView>
            <Frame Margin="20,150" BackgroundColor="Transparent">
                <Frame
                    BackgroundColor="White"
                    CornerRadius="20"
                    HeightRequest="150"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="300">
                    <Label
                        FontSize="Medium"
                        HorizontalOptions="Center"
                        Text="Data not Found"
                        VerticalOptions="Center" />
                </Frame>
            </Frame>
        </CarouselView.EmptyView>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame
                        Margin="8"
                        BorderColor="Gray"
                        CornerRadius="20"
                        HasShadow="True"
                        HeightRequest="250"
                        VerticalOptions="CenterAndExpand"
                        WidthRequest="300">
                        <StackLayout>
                            <Image Source="{Binding ImagePath}" />
                            <Label
                                FontAttributes="Bold"
                                FontSize="24"
                                HorizontalTextAlignment="Center"
                                Text="{Binding Title}" />
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

    <StackLayout
        Padding="12"
        AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
        AbsoluteLayout.LayoutFlags="PositionProportional"
        IsVisible="{Binding IsBusy}">
        <ActivityIndicator
            x:Name="PaymentLoader"
            IsRunning="{Binding IsBusy}"
            Color="#BFA464" />
        <Label
            HorizontalOptions="Center"
            Text="Data is Loading..."
            TextColor="#BFA464" />
    </StackLayout>
</StackLayout>

public partial class MainPage : ContentPage, INotifyPropertyChanged
{
    public ObservableCollection<BirdsModel> models { get; set; }
    private Boolean _IsBusy;
    public Boolean IsBusy
    {
        get { return _IsBusy; }
        set
        {
            _IsBusy = value;
            RaisePropertyChanged("IsBusy");
        }
    }
    public MainPage()
    {
        InitializeComponent();
        IsBusy = true;
        models = new ObservableCollection<BirdsModel>();        
        this.BindingContext = this;          
    }


    public event PropertyChangedEventHandler PropertyChanged;        
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();

        await Task.Delay(2000);

        models.Add(new BirdsModel() { Title = "title 1", ImagePath = "a5.jpg" });
        models.Add(new BirdsModel() { Title = "title 2", ImagePath = "a6.jpg" });
        models.Add(new BirdsModel() { Title = "title 3", ImagePath = "a7.jpg" });
        models.Add(new BirdsModel() { Title = "title 4", ImagePath = "a8.jpg" });

        IsBusy = false;

    }
}

public class BirdsModel
{
    public string Title { get; set; }
    public ImageSource ImagePath { get; set; }
}

这是github上的示例，大家可以看看：

https://github.com/CherryBu/CarouselViewSample