如何在MAUI应用的所有页面显示企业Logo？

问题描述 #

我正在为公司设计一款App，需要在应用的每个页面都显示公司Logo。尝试在AppShell.xaml中添加包含Logo的GlobalLogoPage作为ShellContent后，仅显示带有Logo的页面，其他页面疑似因高度为0被隐藏，求解决方法。

我尝试的代码如下：

AppShell.xaml #

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

    <ShellContent Title="RootPage" 
                  ContentTemplate="{DataTemplate local:GlobalLogoPage}"
                  Route="GlobalLogoPage" />

    <ShellContent Title="Home"
        ContentTemplate="{DataTemplate local:HomePage}"
        Route="HomePage" />

</Shell>

GlobalLogoPage.xaml #

<?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="FusionPortalDemo.GlobalLogoPage"
             Title="GlobalLogoPage">
    <Image Source="psl_logo.jpeg"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
</ContentPage>

解决方案 #

你用ShellContent叠加页面的思路完全错误——ShellContent是用来定义导航入口的，多个ShellContent会作为标签页或导航栈项存在，并非用于内容叠加。要实现全局Logo在所有页面显示，推荐以下三种方案：

方案1：利用Shell全局TitleView #

直接在AppShell中配置全局标题栏视图，所有页面都会自动继承这个Logo：

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

    <!-- 全局Logo，固定在标题栏 -->
    <Shell.TitleView>
        <Image Source="psl_logo.jpeg"
               HeightRequest="40"
               WidthRequest="100"
               Margin="10"/>
    </Shell.TitleView>

    <!-- 业务页面导航入口 -->
    <ShellContent Title="Home"
        ContentTemplate="{DataTemplate local:HomePage}"
        Route="HomePage" />

</Shell>

方案2：自定义全局Logo组件 #

创建可复用的Logo视图组件，在每个页面布局中引入：

1. 创建GlobalLogoView.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FusionPortalDemo.GlobalLogoView">
    <Image Source="psl_logo.jpeg"
           HeightRequest="50"
           HorizontalOptions="Center"
           Margin="0,10,0,10"/>
</ContentView>

2. 在业务页面中使用：

<?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"
             xmlns:local="clr-namespace:FusionPortalDemo"
             x:Class="FusionPortalDemo.HomePage"
             Title="Home">
    <VerticalStackLayout>
        <!-- 引入全局Logo -->
        <local:GlobalLogoView/>
        <!-- 页面业务内容 -->
        <Label Text="首页内容"
               VerticalOptions="Center" 
               HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

方案3：基于基类页面统一布局 #

创建包含Logo的基类页面，所有业务页面继承该基类，实现布局统一：

1. 创建BaseContentPage.xaml：

<?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="FusionPortalDemo.BaseContentPage"
             Title="BasePage">
    <VerticalStackLayout>
        <Image Source="psl_logo.jpeg"
               HeightRequest="50"
               HorizontalOptions="Center"
               Margin="0,10,0,10"/>
        <!-- 预留业务内容区域 -->
        <ContentPresenter x:Name="MainContent"/>
    </VerticalStackLayout>
</ContentPage>

2. 基类后台代码BaseContentPage.xaml.cs：

namespace FusionPortalDemo;

public partial class BaseContentPage : ContentPage
{
    public BaseContentPage()
    {
        InitializeComponent();
    }

    public static readonly BindableProperty MainContentProperty =
        BindableProperty.Create(nameof(MainContent), typeof(View), typeof(BaseContentPage));

    public View MainContent
    {
        get => (View)GetValue(MainContentProperty);
        set => SetValue(MainContentProperty, value);
    }
}

3. 业务页面继承基类并填充内容：

<?xml version="1.0" encoding="utf-8" ?>
<local:BaseContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FusionPortalDemo"
             x:Class="FusionPortalDemo.HomePage"
             Title="Home">
    <local:BaseContentPage.MainContent>
        <VerticalStackLayout>
            <Label Text="首页内容"
                   VerticalOptions="Center" 
                   HorizontalOptions="Center" />
        </VerticalStackLayout>
    </local:BaseContentPage.MainContent>
</local:BaseContentPage>

总结 #

优先选择方案1（全局TitleView）实现标题栏固定Logo；若需灵活控制Logo在页面中的位置，选方案2；若所有页面布局结构高度统一，选方案3。

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