.NET MAUI中如何创建自定义全局对象？实现全局状态图标无需逐页添加

核心思路 #

不用给每个页面手动添加控件，而是通过全局布局注入或Window层级覆盖的方式，把状态图标添加到应用的顶层视图，实现全局显示。

方法一：基于Shell的全局注入（适合用Shell做导航的场景） #

如果你的应用用了Shell（TabBar/Flyout菜单就是Shell的组件），可以直接在Shell的布局里嵌入全局状态图标：

1. 创建状态图标ContentView #

先做一个可复用的状态图标视图StatusIndicatorView：

<!-- StatusIndicatorView.xaml -->
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.StatusIndicatorView">
    <ContentView.Margin>
        <!-- 适配各平台状态栏高度 -->
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="16, 44, 16, 16" />
            <On Platform="Android" Value="16, 24, 16, 16" />
            <On Platform="Windows" Value="16, 32, 16, 16" />
        </OnPlatform>
    </ContentView.Margin>
    <!-- 自定义图标样式，这里用圆角Frame包裹Image -->
    <Frame CornerRadius="16" BackgroundColor="#FF4081" Padding="8"
           HorizontalOptions="End" VerticalOptions="Start">
        <Image x:Name="StatusIcon" WidthRequest="24" HeightRequest="24" Source="default_status.png" />
    </Frame>
</ContentView>

2. 修改AppShell布局 #

把Shell的内容用AbsoluteLayout包裹，在顶层加入状态图标：

<!-- AppShell.xaml -->
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:YourApp.Views"
       x:Class="YourApp.AppShell">
    <!-- 用AbsoluteLayout实现全局覆盖 -->
    <Shell.ContentTemplate>
        <AbsoluteLayout>
            <!-- 保留原Shell的页面内容 -->
            <ContentPresenter AbsoluteLayout.LayoutBounds="0,0,1,1" 
                              AbsoluteLayout.LayoutFlags="All" />
            <!-- 全局状态图标，定位到右上角 -->
            <views:StatusIndicatorView AbsoluteLayout.LayoutBounds="1,0,AutoSize,AutoSize" 
                                       AbsoluteLayout.LayoutFlags="PositionProportional" />
        </AbsoluteLayout>
    </Shell.ContentTemplate>

    <!-- 你的TabBar/Flyout配置 -->
    <TabBar>
        <Tab Title="首页" Icon="home.png">
            <ShellContent ContentTemplate="{DataTemplate views:HomePage}" />
        </Tab>
        <Tab Title="设置" Icon="settings.png">
            <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}" />
        </Tab>
    </TabBar>
</Shell>

方法二：Window层级全局覆盖（通用所有场景） #

如果你的应用没用Shell，或者需要更灵活的全局控制，可以直接在Window的布局里添加状态图标：

1. 同样创建StatusIndicatorView #

和方法一的StatusIndicatorView完全一致。

2. 在App启动时注入全局视图 #

修改App.xaml.cs的启动逻辑，把状态图标添加到Window的顶层：

// App.xaml.cs
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    base.OnLaunched(args);

    var mainWindow = Application.Current.Windows.FirstOrDefault();
    if (mainWindow?.Content is not null)
    {
        var statusIndicator = new StatusIndicatorView();
        
        // 把原页面内容包裹进AbsoluteLayout（如果不是的话）
        if (!(mainWindow.Content is AbsoluteLayout absoluteLayout))
        {
            absoluteLayout = new AbsoluteLayout();
            // 让原内容占满整个Window
            AbsoluteLayout.SetLayoutBounds(mainWindow.Content, new Rect(0, 0, 1, 1));
            AbsoluteLayout.SetLayoutFlags(mainWindow.Content, AbsoluteLayoutFlags.All);
            absoluteLayout.Children.Add(mainWindow.Content);
            mainWindow.Content = absoluteLayout;
        }

        // 设置状态图标定位到右上角
        AbsoluteLayout.SetLayoutBounds(statusIndicator, new Rect(1, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
        AbsoluteLayout.SetLayoutFlags(statusIndicator, AbsoluteLayoutFlags.PositionProportional);
        absoluteLayout.Children.Add(statusIndicator);
    }
}

动态更新状态图标 #

如果需要根据应用状态（比如网络连接、登录状态）切换图标，可以给StatusIndicatorView添加绑定属性：

1. 给StatusIndicatorView添加绑定属性 #

// StatusIndicatorView.xaml.cs
public partial class StatusIndicatorView : ContentView
{
    public static readonly BindableProperty StatusIconSourceProperty =
        BindableProperty.Create(nameof(StatusIconSource), typeof(ImageSource), typeof(StatusIndicatorView), null);

    public ImageSource StatusIconSource
    {
        get => (ImageSource)GetValue(StatusIconSourceProperty);
        set => SetValue(StatusIconSourceProperty, value);
    }

    public StatusIndicatorView()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

2. 绑定到视图 #

修改StatusIndicatorView.xaml里的Image：

<Image Source="{Binding StatusIconSource}" WidthRequest="24" HeightRequest="24" />

3. 全局控制状态 #

创建一个全局ViewModel（比如AppViewModel），用来管理应用状态：

// AppViewModel.cs
public class AppViewModel : INotifyPropertyChanged
{
    private ImageSource _statusIconSource = "online_icon.png";
    public ImageSource StatusIconSource
    {
        get => _statusIconSource;
        set
        {
            _statusIconSource = value;
            OnPropertyChanged();
        }
    }

    // 示例：网络状态变化时更新图标
    public void UpdateNetworkStatus(bool isOnline)
    {
        StatusIconSource = isOnline ? "online_icon.png" : "offline_icon.png";
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

4. 注册全局ViewModel #

在App.xaml里添加资源：

<Application.Resources>
    <ResourceDictionary>
        <local:AppViewModel x:Key="GlobalAppViewModel" />
    </ResourceDictionary>
</Application.Resources>

5. 绑定到状态图标 #

修改StatusIndicatorView.xaml的BindingContext：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourApp"
             x:Class="YourApp.Views.StatusIndicatorView"
             BindingContext="{StaticResource GlobalAppViewModel}">
    <!-- ... 其他内容 ... -->
</ContentView>

之后在任何地方调用GlobalAppViewModel.UpdateNetworkStatus()就能动态切换图标了。

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