如何使用MAUI实现类似安卓相机模式的可滑动选择控件？

推荐使用CollectionView，它原生支持横向滚动（滑动切换），同时可通过绑定实现点击选择功能，完全匹配安卓相机模式选择栏的需求。

核心代码片段 #

页面XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CameraApp"
             x:Class="CameraApp.CameraModePage">
    <ContentPage.Resources>
        <local:BoolToColorConverter x:Key="BoolToColorConverter"/>
    </ContentPage.Resources>
    <StackLayout Padding="10" VerticalOptions="End">
        <!-- 横向滚动的模式选择栏 -->
        <CollectionView ItemsSource="{Binding CameraModes}"
                        SelectionMode="Single"
                        SelectedItem="{Binding SelectedMode}"
                        ItemsLayout="HorizontalList">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame Margin="5" 
                           BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}}"
                           CornerRadius="15"
                           Padding="0">
                        <Label Text="{Binding ModeName}" 
                               Padding="15,8"
                               TextColor="White"
                               FontSize="Medium"/>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

相机模式模型

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace CameraApp
{
    public class CameraMode : INotifyPropertyChanged
    {
        private bool _isSelected;

        public string ModeName { get; set; }

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

        public event PropertyChangedEventHandler PropertyChanged;

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

视图模型

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;

namespace CameraApp
{
    public class CameraModeViewModel : INotifyPropertyChanged
    {
        private CameraMode _selectedMode;

        public ObservableCollection<CameraMode> CameraModes { get; set; }

        public CameraMode SelectedMode
        {
            get => _selectedMode;
            set
            {
                if (_selectedMode != null)
                    _selectedMode.IsSelected = false;

                _selectedMode = value;
                _selectedMode.IsSelected = true;
                OnPropertyChanged();
                HandleModeSwitch(_selectedMode);
            }
        }

        public CameraModeViewModel()
        {
            CameraModes = new ObservableCollection<CameraMode>
            {
                new CameraMode { ModeName = "人像", IsSelected = true },
                new CameraMode { ModeName = "拍照" },
                new CameraMode { ModeName = "视频" },
                new CameraMode { ModeName = "全景" },
                new CameraMode { ModeName = "夜景" }
            };
            SelectedMode = CameraModes.First();
        }

        void HandleModeSwitch(CameraMode selectedMode)
        {
            // 这里添加相机模式切换的业务逻辑
            System.Diagnostics.Debug.WriteLine($"已切换到：{selectedMode.ModeName}");
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

颜色转换器

using System.Globalization;

namespace CameraApp
{
    public class BoolToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? Colors.DarkOrange : Colors.Gray;
        }

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

实现说明 #

• CollectionView通过ItemsLayout="HorizontalList"实现横向滑动布局
• 点击模式项时，SelectedItem绑定会自动更新，触发选中状态样式变化和模式切换逻辑
• 通过ObservableCollection实现模式列表的动态更新支持

内容的提问来源于stack exchange，提问作者Yohanes Nurcahyo