我如何讓 MAUI 在所有頁面上顯示圖像？

Question

我正在為我的公司設計一個應用程序，我需要它在應用程序的每一頁上顯示公司的徽標。 我如何在 MAUI 中實現這一點？

我試過的：

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>

全球標志頁面：

<?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>

但是，這只會顯示包含整個徽標的一頁。 我懷疑另一個頁面正在顯示，但隱藏了，因為它的高度為 0。 我究竟該如何前進？

Answer 1

#1 解決方法：

您可以創建一個包含logo的通用TitleView ，然后在您要顯示的Content pages中重復使用它。

1.為您的項目創建一個ContentView ： Title.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="MauiAppCustomTitleView.Title">
    <ContentView.Content>
        <Image Source="dotnet_bot.png" HorizontalOptions="Center" VerticalOptions="Center"> </Image>
    </ContentView.Content>
</ContentView>

2. 在您的MainPage中使用TitleView ： Title.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"
             xmlns:TitleView="clr-namespace:MauiAppCustomTitleView"
             x:Class="MauiAppCustomTitleView.MainPage">

    <Shell.TitleView>
        <TitleView:Title></TitleView:Title>
    </Shell.TitleView>



</ContentPage>

#2 解決方法：

或者您可以使用控件模板，使您能夠設計模板控件或模板頁面以在 MAUI 中reuse 。