.NET MAUI中CarouselView的EmptyView控件交互失效如何解决？

不需要放弃EmptyView，你遇到的透明遮挡导致控件无法交互，本质是CarouselView的滚动手势拦截了EmptyView的触摸事件。可以通过以下两种方法解决：

方法一：集合为空时禁用滚动 #

当集合为空时，CarouselView的滚动功能没有实际意义，禁用滚动可以阻止手势事件拦截，让EmptyView里的按钮正常响应点击：

修改ViewModel #

添加判断集合是否为空的属性，并实现属性变更通知：

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Command;
using Microsoft.Maui.Controls;

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<string> Items { get; set; } = new ObservableCollection<string>();
    public ICommand AddItemCommand { get; set; }
    public bool IsScrollEnabled => Items.Count > 0;

    public MainViewModel()
    {
        AddItemCommand = new Command(AddItem);
        Items.CollectionChanged += (s, e) => OnPropertyChanged(nameof(IsScrollEnabled));
    }

    private void AddItem()
    {
        Items.Add($"Item {Items.Count + 1}");
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

修改XAML #

给CarouselView绑定IsScrollEnabled属性：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">
    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <CarouselView ItemsSource="{Binding Items}" IsScrollEnabled="{Binding IsScrollEnabled}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding .}" HorizontalOptions="Center" VerticalOptions="Center" />
            </DataTemplate>
        </CarouselView.ItemTemplate>

        <CarouselView.EmptyView>
            <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="暂无数据" TextColor="Gray" FontSize="18" />
                <Button Text="添加项" Command="{Binding AddItemCommand}" />
            </VerticalStackLayout>
        </CarouselView.EmptyView>
    </CarouselView>
</ContentPage>

方法二：自定义ControlTemplate调整层级 #

如果需要保留滚动逻辑（空集合场景下无实际作用），可以通过ControlTemplate调整EmptyView的渲染层级，确保它处于交互最上层：

添加值转换器 #

创建判断集合是否为空的转换器：

using System.Collections;
using System.Globalization;
using Microsoft.Maui.Controls;

public class EmptyCollectionToBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is IEnumerable enumerable)
        {
            return !enumerable.Cast<object>().Any();
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

修改XAML #

声明转换器并自定义CarouselView的ControlTemplate：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">
    <ContentPage.Resources>
        <local:EmptyCollectionToBoolConverter x:Key="EmptyToTrueConverter" />
    </ContentPage.Resources>

    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <CarouselView ItemsSource="{Binding Items}">
        <CarouselView.ControlTemplate>
            <ControlTemplate>
                <Grid>
                    <!-- 原CarouselView滚动容器，空集合时设为输入透明 -->
                    <ScrollView x:Name="ScrollPresenter" 
                                InputTransparent="{TemplateBinding ItemsSource, Converter={StaticResource EmptyToTrueConverter}}">
                        <ContentPresenter />
                    </ScrollView>
                    <!-- EmptyView，空集合时显示并置于顶层 -->
                    <ContentView Content="{TemplateBinding EmptyView}" 
                                 IsVisible="{TemplateBinding ItemsSource, Converter={StaticResource EmptyToTrueConverter}}"
                                 ZIndex="100" />
                </Grid>
            </ControlTemplate>
        </CarouselView.ControlTemplate>

        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding .}" HorizontalOptions="Center" VerticalOptions="Center" />
            </DataTemplate>
        </CarouselView.ItemTemplate>

        <CarouselView.EmptyView>
            <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="暂无数据" TextColor="Gray" FontSize="18" />
                <Button Text="添加项" Command="{Binding AddItemCommand}" />
            </VerticalStackLayout>
        </CarouselView.EmptyView>
    </CarouselView>
</ContentPage>

原理说明 #

MAUI的CarouselView内部默认包含滚动容器，即使集合为空，该容器仍会优先接收触摸事件，导致EmptyView的控件无法响应交互。通过禁用滚动或让滚动容器对输入透明，就能让EmptyView的控件正常接收点击事件。

内容的提问来源于stack exchange，提问作者Jim Olson