如何在MAUI中实现分段控制视图？新手寻求技术帮助

用户需求：作为MAUI新手，实现如图所示的分段控制视图，不使用Syncfusion、Telerik等试用版NuGet包。

效果图：

以下是纯原生MAUI实现方案，无需依赖第三方包：

1. 实现颜色状态转换器 #

创建BoolToColorConverter类，用于根据选中状态切换按钮的背景色和文字色：

using System.Globalization;

namespace YourNamespace.Converters;

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool isTrue && parameter is string param)
        {
            var colorPairs = param.Split(';');
            foreach (var pair in colorPairs)
            {
                var parts = pair.Split('=');
                if (parts.Length == 2 && bool.Parse(parts[0]) == isTrue)
                {
                    return Color.FromArgb(parts[1].Trim());
                }
            }
        }
        return Colors.Transparent;
    }

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

2. 在App.xaml中注册转换器 #

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:YourNamespace.Converters"
             x:Class="YourNamespace.App">
    <Application.Resources>
        <ResourceDictionary>
            <converters:BoolToColorConverter x:Key="BoolToColorConverter" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

3. 页面XAML布局 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.SegmentedControlPage">
    <StackLayout Padding="16">
        <!-- 分段控制栏 -->
        <HorizontalStackLayout Spacing="0" BackgroundColor="#E0E0E0" CornerRadius="8" Padding="2">
            <Button x:Name="BtnTab1" Text="全部" 
                    Clicked="OnTabClicked"
                    BackgroundColor="{Binding SelectedTab == 0, Converter={StaticResource BoolToColorConverter}, ConverterParameter='True=#FFFFFF;False=#E0E0E0'}"
                    TextColor="{Binding SelectedTab == 0, Converter={StaticResource BoolToColorConverter}, ConverterParameter='True=#007AFF;False=#666666'}"
                    CornerRadius="6"
                    Margin="0"
                    Padding="24,12" />
            <Button x:Name="BtnTab2" Text="未完成" 
                    Clicked="OnTabClicked"
                    BackgroundColor="{Binding SelectedTab == 1, Converter={StaticResource BoolToColorConverter}, ConverterParameter='True=#FFFFFF;False=#E0E0E0'}"
                    TextColor="{Binding SelectedTab == 1, Converter={StaticResource BoolToColorConverter}, ConverterParameter='True=#007AFF;False=#666666'}"
                    CornerRadius="6"
                    Margin="0"
                    Padding="24,12" />
            <Button x:Name="BtnTab3" Text="已完成" 
                    Clicked="OnTabClicked"
                    BackgroundColor="{Binding SelectedTab == 2, Converter={StaticResource BoolToColorConverter}, ConverterParameter='True=#FFFFFF;False=#E0E0E0'}"
                    TextColor="{Binding SelectedTab == 2, Converter={StaticResource BoolToColorConverter}, ConverterParameter='True=#007AFF;False=#666666'}"
                    CornerRadius="6"
                    Margin="0"
                    Padding="24,12" />
        </HorizontalStackLayout>

        <!-- 内容展示区域 -->
        <Label Text="{Binding SelectedContent}" Margin="0,20,0,0" FontSize="18" HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

4. 页面后台逻辑 #

using Microsoft.Maui.Controls;

namespace YourNamespace;

public partial class SegmentedControlPage : ContentPage
{
    public int SelectedTab { get; set; } = 0;
    public string SelectedContent { get; set; } = "显示全部内容";

    public SegmentedControlPage()
    {
        InitializeComponent();
        BindingContext = this;
    }

    private void OnTabClicked(object sender, EventArgs e)
    {
        if (sender == BtnTab1)
        {
            SelectedTab = 0;
            SelectedContent = "显示全部内容";
        }
        else if (sender == BtnTab2)
        {
            SelectedTab = 1;
            SelectedContent = "显示未完成内容";
        }
        else if (sender == BtnTab3)
        {
            SelectedTab = 2;
            SelectedContent = "显示已完成内容";
        }
        OnPropertyChanged(nameof(SelectedTab));
        OnPropertyChanged(nameof(SelectedContent));
    }
}

说明 #

• 通过HorizontalStackLayout包裹按钮模拟分段控制栏，配合CornerRadius和背景色实现圆角边框效果
• 利用绑定和转换器自动切换选中按钮的样式
• 点击按钮时更新选中状态和对应展示内容，可根据实际需求替换内容区域为不同的视图

内容的提问来源于stack exchange，提问作者Ahsan Ali