Xamarin Forms中如何根据CarouselView位置设置图片可见性？

首先得提一句，你代码里用了ViewCell，这个是给ListView/CollectionView用的，CarouselView的ItemTemplate不需要它，记得换成普通的布局（比如StackLayout）或者ContentView，不然可能会有布局问题哦。

下面给你两种简单可行的实现方案：

方案一：纯XAML触发器实现（无需修改ViewModel） #

这种方法直接通过XAML的DataTrigger绑定CarouselView的CurrentItem属性，自动判断当前项是否为选中项，从而控制图片的可见性。

先看完整的CarouselView代码：

<!-- 记得引入sys命名空间：xmlns:sys="clr-namespace:System;assembly=mscorlib" -->
<CarouselView x:Name="CalendarCarousel" ItemsSource="{Binding CalendarItems}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout HorizontalOptions="FillAndExpand" Margin="5">
                <Label Text="{Binding ShortNameText}" 
                       TextColor="{Binding Color}" 
                       FontSize="10" 
                       HorizontalTextAlignment="Center"/>
                <!-- 你的图片控件 -->
                <Image Source="your_image_source" 
                       HorizontalOptions="Center"
                       Visibility="Collapsed"> <!-- 默认隐藏 -->
                    <Image.Triggers>
                        <!-- 当当前项等于CarouselView的CurrentItem时，显示图片 -->
                        <DataTrigger TargetType="Image" 
                                     Binding="{Binding Source={x:Reference CalendarCarousel}, Path=CurrentItem}" 
                                     Value="{Binding .}">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                        <!-- 处理初始状态CurrentItem为空的情况 -->
                        <DataTrigger TargetType="Image" 
                                     Binding="{Binding Source={x:Reference CalendarCarousel}, Path=CurrentItem}" 
                                     Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Image.Triggers>
                </Image>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

原理很简单：我们给图片设置默认隐藏，然后通过DataTrigger监听CarouselView的CurrentItem，当它和当前绑定的Item匹配时，就把图片设为可见，滚动时CurrentItem自动更新，图片的可见性也会跟着切换。

方案二：ViewModel驱动实现（更灵活） #

如果你的业务逻辑需要在选中项变化时做更多操作（比如更新其他数据），这种方法会更合适。我们给每个日历项添加一个IsSelected属性，通过绑定CarouselView的CurrentItem来控制这个属性，进而控制图片显示。

第一步：修改日历项的ViewModel #

public class CalendarItemViewModel : INotifyPropertyChanged
{
    public string ShortNameText { get; set; }
    public Color Color { get; set; }

    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

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

第二步：修改页面的ViewModel #

public class CalendarPageViewModel : INotifyPropertyChanged
{
    public ObservableCollection<CalendarItemViewModel> CalendarItems { get; set; }

    private CalendarItemViewModel _selectedCalendarItem;
    public CalendarItemViewModel SelectedCalendarItem
    {
        get => _selectedCalendarItem;
        set
        {
            // 先把之前选中的项设为未选中
            if (_selectedCalendarItem != null)
                _selectedCalendarItem.IsSelected = false;
            
            _selectedCalendarItem = value;
            
            // 把新选中的项设为选中
            if (_selectedCalendarItem != null)
                _selectedCalendarItem.IsSelected = true;
            
            OnPropertyChanged();
        }
    }

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

    // 初始化数据示例
    public CalendarPageViewModel()
    {
        CalendarItems = new ObservableCollection<CalendarItemViewModel>
        {
            new CalendarItemViewModel { ShortNameText = "Jan", Color = Color.Red },
            new CalendarItemViewModel { ShortNameText = "Feb", Color = Color.Blue }
            // 添加更多项...
        };

        // 默认选中第一个项
        if (CalendarItems.Any())
            SelectedCalendarItem = CalendarItems.First();
    }
}

第三步：XAML绑定和转换器 #

首先需要一个布尔值转可见性的转换器：

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is bool boolValue && boolValue ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is Visibility visibility && visibility == Visibility.Visible;
    }
}

然后在页面的资源里注册这个转换器：

<ContentPage.Resources>
    <ResourceDictionary>
        <local:BooleanToVisibilityConverter x:Key="BoolToVis"/>
    </ResourceDictionary>
</ContentPage.Resources>

最后是CarouselView的XAML：

<CarouselView ItemsSource="{Binding CalendarItems}" 
              CurrentItem="{Binding SelectedCalendarItem, Mode=TwoWay}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout HorizontalOptions="FillAndExpand" Margin="5">
                <Label Text="{Binding ShortNameText}" 
                       TextColor="{Binding Color}" 
                       FontSize="10" 
                       HorizontalTextAlignment="Center"/>
                <Image Source="your_image_source" 
                       HorizontalOptions="Center"
                       Visibility="{Binding IsSelected, Converter={StaticResource BoolToVis}}"/>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

这样当你滚动CarouselView时，SelectedCalendarItem会自动更新，对应的IsSelected属性也会变化，图片的可见性就跟着切换了。

内容的提问来源于stack exchange，提问作者Srusti Thakkar