Xamarin Forms带按钮的选项卡实现求助：自定义按钮与切换逻辑

下面提供两种常用的实现方案，覆盖自定义样式和快速开发场景：

方案一：纯自定义选项卡（完全可控样式） #

适合需要高度自定义选项卡外观的场景，通过HorizontalStackLayout承载按钮，配合视图模型实现内容切换。

1. XAML布局代码 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.TabDemoPage">
    <ContentPage.Resources>
        <local:TabColorConverter x:Key="TabColorConverter"/>
        <local:TabTextColorConverter x:Key="TabTextColorConverter"/>
        <Style x:Key="TabButtonStyle" TargetType="Button">
            <Setter Property="Padding" Value="15,10"/>
            <Setter Property="BorderWidth" Value="0"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </ContentPage.Resources>

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

    <VerticalStackLayout>
        <!-- 选项卡按钮栏 -->
        <HorizontalStackLayout Spacing="0" BackgroundColor="White">
            <Button Text="首页" 
                    Command="{Binding SwitchTabCommand}"
                    CommandParameter="Home"
                    BackgroundColor="{Binding SelectedTab, Converter={StaticResource TabColorConverter}, ConverterParameter=Home}"
                    TextColor="{Binding SelectedTab, Converter={StaticResource TabTextColorConverter}, ConverterParameter=Home}"
                    Style="{StaticResource TabButtonStyle}"/>
            
            <Button Text="我的" 
                    Command="{Binding SwitchTabCommand}"
                    CommandParameter="Profile"
                    BackgroundColor="{Binding SelectedTab, Converter={StaticResource TabColorConverter}, ConverterParameter=Profile}"
                    TextColor="{Binding SelectedTab, Converter={StaticResource TabTextColorConverter}, ConverterParameter=Profile}"
                    Style="{StaticResource TabButtonStyle}"/>
        </HorizontalStackLayout>

        <!-- 内容展示区域 -->
        <ContentView Content="{Binding CurrentTabContent}" VerticalOptions="FillAndExpand"/>
    </VerticalStackLayout>
</ContentPage>

2. 视图模型代码 #

using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace YourAppNamespace
{
    public class TabViewModel : INotifyPropertyChanged
    {
        private string _selectedTab = "Home";
        private View _currentTabContent;

        // 提前初始化页面视图，避免重复创建
        private readonly View _homeView = new HomePage();
        private readonly View _profileView = new ProfilePage();

        public string SelectedTab
        {
            get => _selectedTab;
            set
            {
                _selectedTab = value;
                OnPropertyChanged();
                UpdateCurrentTabContent();
            }
        }

        public View CurrentTabContent
        {
            get => _currentTabContent;
            set
            {
                _currentTabContent = value;
                OnPropertyChanged();
            }
        }

        public ICommand SwitchTabCommand => new Command<string>(tabName => SelectedTab = tabName);

        public TabViewModel()
        {
            UpdateCurrentTabContent(); // 初始化默认内容
        }

        private void UpdateCurrentTabContent()
        {
            CurrentTabContent = SelectedTab switch
            {
                "Home" => _homeView,
                "Profile" => _profileView,
                _ => _homeView
            };
        }

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

3. 样式转换器代码 #

用来根据选中状态切换按钮颜色：

using System;
using System.Globalization;
using Xamarin.Forms;

namespace YourAppNamespace
{
    public class TabColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var selectedTab = value as string;
            var currentTab = parameter as string;
            return selectedTab == currentTab ? Color.FromHex("#007AFF") : Color.LightGray;
        }

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

    public class TabTextColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var selectedTab = value as string;
            var currentTab = parameter as string;
            return selectedTab == currentTab ? Color.White : Color.Black;
        }

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

方案二：使用TabbedView（快速开发） #

如果你的Xamarin.Forms版本支持（通常是5.0+或.NET MAUI兼容版本），可以用内置的TabbedView快速实现，只需自定义头部样式即可。

XAML代码示例 #

<TabbedView xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:YourAppNamespace"
            x:Class="YourAppNamespace.CustomTabbedPage"
            TabStripPlacement="Top"
            TabStripBackgroundColor="White">

    <TabbedView.Resources>
        <local:SelectedColorConverter x:Key="SelectedColorConverter"/>
    </TabbedView.Resources>

    <!-- 自定义选项卡头部模板 -->
    <TabbedView.TabStripItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Title}" 
                   TextColor="{Binding IsSelected, Converter={StaticResource SelectedColorConverter}}"
                   FontSize="16"
                   Padding="15,10"
                   HorizontalOptions="Center"/>
        </DataTemplate>
    </TabbedView.TabStripItemTemplate>

    <!-- 选项卡内容项 -->
    <TabViewItem Title="首页">
        <local:HomePage/>
    </TabViewItem>
    <TabViewItem Title="我的">
        <local:ProfilePage/>
    </TabViewItem>
</TabbedView>

选中状态转换器 #

using System;
using System.Globalization;
using Xamarin.Forms;

namespace YourAppNamespace
{
    public class SelectedColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? Color.FromHex("#007AFF") : Color.Black;
        }

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

关键注意事项 #

• 若需保留页面状态，方案一中要提前初始化所有页面视图，避免切换时重建；方案二中TabbedView默认会保留页面状态。
• 样式可通过ResourceDictionary统一管理，方便批量修改。
• 复杂场景建议配合MVVM框架（如Prism、FreshMvvm）使用，简化视图逻辑。

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