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
相关产品推荐
相关产品推荐

