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

MAUI应用TabBar始终显示在顶部而非底部的问题排查(Windows)

MAUI TabBar在Windows显示于顶部的解决方法

问题出在Windows平台的默认行为上——MAUI Shell遵循Windows应用的设计惯例,默认会把TabBar放在顶部,而移动端默认是底部。你只需要在Shell标签中添加TabBarPlacement="Bottom"属性,就能强制TabBar显示在底部。

修改后的AppShell.xaml代码:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="letseat.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:letseat"
    TabBarPlacement="Bottom"
    >

    <TabBar Route="Home">
        <Tab Icon="dotnet_bot.png" Title="Main">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Icon="dotnet_bot.png" Title="Profile">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}"/>
        </Tab>
        <Tab Icon="dotnet_bot.png" Title="Test">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}"/>
        </Tab>
    </TabBar>
</Shell>

(可选)针对不同平台单独配置

如果你需要给不同平台设置不同的TabBar位置,可以使用OnPlatform标签实现:

<Shell
    x:Class="letseat.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:letseat"
    >
    <Shell.TabBarPlacement>
        <OnPlatform x:TypeArguments="TabBarPlacement">
            <On Platform="iOS, Android" Value="Bottom"/>
            <On Platform="Windows" Value="Bottom"/>
            <!-- 可根据需求添加其他平台配置 -->
        </OnPlatform>
    </Shell.TabBarPlacement>

    <TabBar Route="Home">
        <Tab Icon="dotnet_bot.png" Title="Main">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Icon="dotnet_bot.png" Title="Profile">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}"/>
        </Tab>
        <Tab Icon="dotnet_bot.png" Title="Test">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}"/>
        </Tab>
    </TabBar>
</Shell>

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.08 22:01:17