如何调整Xamarin.Forms中TabbedPage的Tab项大小以适配UWP屏幕？

嘿，这个问题我之前做Xamarin.Forms UWP项目时也碰到过！默认的TabbedPage在UWP上确实不会自动让标签占满整个屏幕宽度，不过咱们可以通过自定义渲染器轻松搞定，还能完美适配横竖屏切换，步骤超清晰：

1. 先在共享项目创建自定义TabbedPage子类 #

咱们先定义一个专属的TabbedPage，方便后续只对它做自定义处理，不影响其他TabbedPage：

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class FullWidthTabbedPage : TabbedPage
    {
        // 不需要额外代码，只是作为标记类
    }
}

2. 在UWP项目中添加自定义渲染器 #

这一步是核心，咱们要修改UWP底层的TabView控件属性，让标签均匀分布：

using Xamarin.Forms.Platform.UWP;
using YourAppNamespace;
using YourAppNamespace.UWP;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml;

[assembly: ExportRenderer(typeof(FullWidthTabbedPage), typeof(FullWidthTabbedPageRenderer))]
namespace YourAppNamespace.UWP
{
    public class FullWidthTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var tabView = Control as TabView;
                if (tabView != null)
                {
                    // 清除默认的头尾占位，避免留白
                    tabView.TabStripHeader = null;
                    tabView.TabStripFooter = null;
                    // 设置标签宽度模式为均分整个可用空间
                    tabView.TabWidthMode = TabViewWidthMode.Equal;

                    // 监听窗口尺寸变化，横竖屏切换时自动刷新布局
                    Window.Current.SizeChanged += OnWindowSizeChanged;
                }
            }
        }

        private void OnWindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            var tabView = Control as TabView;
            tabView?.UpdateLayout();
        }

        // 记得取消事件监听，避免内存泄漏
        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                Window.Current.SizeChanged -= OnWindowSizeChanged;
            }
            base.Dispose(disposing);
        }
    }
}

3. 替换原有TabbedPage为自定义的FullWidthTabbedPage #

不管你是用XAML还是代码创建页面，把原来的<TabbedPage>改成<local:FullWidthTabbedPage>就行：

<local:FullWidthTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainTabPage">
    <!-- 你的Tab项内容 -->
    <ContentPage Title="首页">
        <!-- 页面内容 -->
    </ContentPage>
    <ContentPage Title="分类">
        <!-- 页面内容 -->
    </ContentPage>
    <ContentPage Title="我的">
        <!-- 页面内容 -->
    </ContentPage>
</local:FullWidthTabbedPage>

关键说明 #

• TabViewWidthMode.Equal是核心：它会让所有Tab项自动均分标签栏的总宽度，不管你有几个标签，都能完美填充屏幕，不会留空白。
• 监听窗口尺寸变化：横竖屏切换或者UWP窗口大小调整时，通过UpdateLayout()强制刷新标签布局，保证始终占满宽度。
• 移除头尾占位：默认UWP TabView会有一些默认的空白占位，清除后标签栏就能完全贴合屏幕边缘啦。

这样改完之后，你的UWP TabbedPage不管在什么屏幕尺寸、横竖屏状态下，标签都会自动占满整个屏幕宽度，完全解决你的问题！

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