在.NET MAUI中设置导航背景图及页面居中块显示问题

一、修复全屏背景图不生效的问题 #

Shell的BackgroundImageSource属性仅作用于侧边Flyout菜单区域，而非整个应用屏幕。要实现全屏背景，需通过Shell.Background结合ImageBrush来设置：

修改AppShell.xaml的背景设置部分：

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

    <!-- 全屏背景图：UniformToFill确保图片铺满屏幕且比例不变形 -->
    <Shell.Background>
        <ImageBrush Source="Assets/BackgroundImage.png" Stretch="UniformToFill" />
    </Shell.Background>

    <!-- 原有FlyoutHeader、Footer及FlyoutItem保持不变 -->
    <Shell.FlyoutHeader>
        <Image Source="Assets/logo.png" HeightRequest="152"></Image>
    </Shell.FlyoutHeader>

    <Shell.FlyoutFooter>
        <Label Text="Username" Padding="20"></Label>
    </Shell.FlyoutFooter>

    <FlyoutItem Title="Dashboard" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Dashboard"
                ContentTemplate="{DataTemplate views:DashboardPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Clients" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Clients"
                ContentTemplate="{DataTemplate views:ClientListPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Staff" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Staff"
                ContentTemplate="{DataTemplate views:StaffListPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Projects" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Projects"
                ContentTemplate="{DataTemplate views:ProjectsPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Finances" Icon="dotnet_bot.png">
        <Tab>
            <ShellContent 
                Title="Finances"
                ContentTemplate="{DataTemplate views:FundsPage}"/>
        </Tab>
    </FlyoutItem>

</Shell>

二、实现页面内容块式居中显示 #

给每个页面的内容套一个容器布局，通过对齐属性和样式设置实现居中块效果。以DashboardPage为例：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Nova.View.DashboardPage"
             Title="Dashboard">

    <!-- 根布局占满屏幕 -->
    <Grid>
        <!-- 块式容器：居中显示、限制宽度、添加样式 -->
        <Frame 
            Margin="20"
            MaxWidthRequest="800"
            BackgroundColor="White"
            CornerRadius="12"
            Padding="30"
            HorizontalOptions="Center"
            VerticalOptions="Center">
            
            <!-- 页面实际内容 -->
            <StackLayout>
                <Label Text="Dashboard Content" FontSize="Large"/>
                <!-- 其他业务控件 -->
            </StackLayout>
        </Frame>
    </Grid>
</ContentPage>

关键设置说明：

• 用Grid作为页面根布局，默认铺满屏幕
• Frame作为块容器，HorizontalOptions="Center"和VerticalOptions="Center"实现居中
• 通过MaxWidthRequest限制容器宽度，适配不同尺寸屏幕
• 可自定义BackgroundColor、CornerRadius、Padding等属性优化视觉效果

额外注意事项 #

• 确保背景图Assets/BackgroundImage.png已添加到项目，且生成操作设置为MAUI图像资源
• 若需所有页面统一块式样式，可创建自定义ContentPage基类复用布局

内容的提问来源于stack exchange，提问作者Alexa Pettitt