You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MAUI:Windows平台TabbedPage溢出菜单颜色设置问题

MAUI TabbedPage 溢出菜单样式设置方案

当TabbedPage标签数量过多时,溢出菜单的文字与背景色冲突问题,可以通过以下设置项解决:

通用跨平台属性(支持Android等平台)

直接在TabbedPage或全局样式中设置以下属性:

  • 溢出菜单文字颜色:OverflowMenuItemTextColor
  • 溢出菜单背景颜色:OverflowMenuBackgroundColor

示例代码(App.xaml全局样式):

<Style TargetType="TabbedPage">
    <!-- 设置文字颜色为白色 -->
    <Setter Property="OverflowMenuItemTextColor" Value="#FFFFFF" />
    <!-- 设置背景颜色为深灰色 -->
    <Setter Property="OverflowMenuBackgroundColor" Value="#212121" />
</Style>

Windows平台(WinUI)额外设置(含悬停状态)

Windows平台的溢出菜单基于WinUI的TabView组件,需额外配置悬停状态样式:

<Style TargetType="maui:TabbedPage">
    <Setter Property="WindowsTabViewStyle">
        <Setter.Value>
            <Style TargetType="winui:TabView">
                <Setter Property="OverflowFlyout">
                    <Setter.Value>
                        <Flyout>
                            <!-- 设置菜单背景色 -->
                            <Flyout.FlyoutPresenterStyle>
                                <Style TargetType="FlyoutPresenter">
                                    <Setter Property="Background" Value="#212121" />
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <!-- 设置文字色及悬停状态 -->
                            <Flyout.ItemContainerStyle>
                                <Style TargetType="MenuFlyoutItem">
                                    <Setter Property="Foreground" Value="#FFFFFF" />
                                    <!-- 悬停时文字颜色 -->
                                    <Setter Property="PointerOverForeground" Value="#FFD700" />
                                    <!-- 悬停时背景颜色 -->
                                    <Setter Property="PointerOverBackground" Value="#333333" />
                                </Style>
                            </Flyout.ItemContainerStyle>
                        </Flyout>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

内容的提问来源于stack exchange,提问作者Sparky

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 11:49:59