如何让Xamarin Forms的TabbedPage呈现原生UWP Pivot样式？

我来帮你搞定这个问题！你之前遇到的「NavigationPage内容显示成ToString()结果」的问题，根源在于：直接给TabbedPageRenderer的Control（也就是Xamarin Forms封装的FormsPivot）设置原生UWP的DefaultPivotStyle，会覆盖掉FormsPivot内置的内容处理逻辑——它原本专门处理了NavigationPage的内容渲染，替换样式后这套逻辑失效，所以才会显示对象的字符串表示。

下面给你两种最简的实现方案，按需选择：

方案一：修改FormsPivot样式匹配原生外观（首推，最简单） #

不需要替换成原生Pivot，只需要自定义FormsPivot的样式，让它看起来和原生UWP Pivot一模一样。你可以复制原生Pivot的样式代码，把目标类型改成FormsPivot，保留它原有的内容绑定逻辑，只调整视觉部分：

1. 在UWP项目的App.xaml里添加这个自定义样式：

<Style x:Key="StyledFormsPivot" TargetType="forms:FormsPivot">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="forms:FormsPivot">
                <!-- 完全照搬原生Pivot的模板结构，只是把目标类型换成FormsPivot -->
                <Grid x:Name="RootElement">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ScrollViewer x:Name="HeaderScrollViewer"
                                  HorizontalScrollBarVisibility="Auto"
                                  VerticalScrollBarVisibility="Disabled"
                                  VerticalScrollMode="Disabled"
                                  HorizontalScrollMode="Auto"
                                  Margin="{TemplateBinding Padding}"
                                  Grid.Row="0">
                        <PivotHeaderPanel x:Name="HeaderPanel">
                            <PivotHeaderPanel.RenderTransform>
                                <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                            </PivotHeaderPanel.RenderTransform>
                        </PivotHeaderPanel>
                    </ScrollViewer>
                    <ItemsPresenter x:Name="PivotItemPresenter"
                                    Margin="{TemplateBinding Padding}"
                                    Grid.Row="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 然后在你的自定义渲染器里设置这个样式就行：

public class CustomTabbedPageRenderer : TabbedPageRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        if (Control != null)
        {
            Control.Style = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["StyledFormsPivot"];
        }
    }
}

这样既保留了FormsPivot对NavigationPage的内容处理能力，又能获得原生Pivot的视觉效果，代码改动最小也最稳定。

方案二：替换为原生UWP Pivot并手动处理内容映射 #

如果你铁了心要用原生Pivot控件，那得手动把TabbedPage的子页面映射到Pivot的Items里，还要处理NavigationPage的内容展示：

public class CustomTabbedPageRenderer : TabbedPageRenderer
{
    private Pivot _nativePivot;

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        // 清理旧的事件绑定和控件
        if (e.OldElement != null)
        {
            ((TabbedPage)e.OldElement).ChildrenChanged -= OnChildrenChanged;
            _nativePivot?.SelectionChanged -= OnNativePivotSelectionChanged;
        }

        if (e.NewElement != null)
        {
            // 创建原生Pivot并设置样式
            _nativePivot = new Pivot();
            _nativePivot.Style = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["DefaultPivotStyle"];
            
            // 同步TabbedPage的子页面到Pivot
            UpdatePivotItems();
            ((TabbedPage)e.NewElement).ChildrenChanged += OnChildrenChanged;
            _nativePivot.SelectionChanged += OnNativePivotSelectionChanged;

            // 替换当前的原生控件
            SetNativeControl(_nativePivot);
        }
    }

    private void UpdatePivotItems()
    {
        _nativePivot.Items.Clear();
        foreach (var page in Element.Children)
        {
            var pivotItem = new PivotItem
            {
                Header = page.Title,
                // 关键：如果是NavigationPage，取出它的根页面作为PivotItem的内容
                Content = page is NavigationPage navPage ? navPage.RootPage : page
            };
            _nativePivot.Items.Add(pivotItem);
        }
    }

    private void OnChildrenChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        // 当TabbedPage的子页面变化时更新Pivot
        UpdatePivotItems();
    }

    private void OnNativePivotSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // 同步原生Pivot的选中项到TabbedPage
        if (_nativePivot.SelectedIndex >= 0 && _nativePivot.SelectedIndex < Element.Children.Count)
        {
            Element.CurrentPage = Element.Children[_nativePivot.SelectedIndex];
        }
    }
}

这个方案需要手动处理页面同步和内容映射，相对麻烦一点，但能完全使用原生Pivot控件。

总结 #

优先选方案一，它不需要改动Xamarin Forms的核心内容处理逻辑，只调整样式就能达到目的，是最省心的做法。

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