Xamarin.Forms需显示汉堡菜单时，如何动态修改BarBackgroundColor？

核心思路 #

要同时实现汉堡菜单显示和导航栏背景色动态修改，需要调整页面结构：将主页面设为FlyoutPage（旧项目可用MasterDetailPage），把NavigationPage嵌套在FlyoutPage的Detail属性中。同时使用DynamicResource绑定导航栏颜色，实现全局动态更新。

步骤1：修改全局资源配置（App.xaml） #

将原静态样式改为动态资源绑定，这样后续修改资源字典时，导航栏颜色会自动更新：

<Application.Resources>
    <ResourceDictionary>
        <!-- 定义可动态修改的导航栏颜色 -->
        <Color x:Key="DynamicNavBarColor">DarkOliveGreen</Color>
        
        <Style TargetType="NavigationPage">
            <!-- 使用DynamicResource而非StaticResource -->
            <Setter Property="BarBackgroundColor" Value="{DynamicResource DynamicNavBarColor}" />
            <Setter Property="BarTextColor" Value="White" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

步骤2：初始化带汉堡菜单的主页面（App.xaml.cs） #

启动时根据配置参数设置初始导航栏颜色，同时构建带汉堡菜单的页面结构：

DB_ParametreList = dbparametre.GetAllParametre();
parametres = DB_ParametreList[0];

// 根据壁纸配置确定初始导航栏颜色
Color navBarColor = Color.DarkOliveGreen;
if (parametres.WallpaperName == "wallpapers_4.png")
{
    navBarColor = Color.FromHex("#705502");
}
else if (parametres.WallpaperName == "wallpapers_3.png")
{
    navBarColor = Color.FromHex("#09506B");
}

// 更新全局动态资源
Application.Current.Resources["DynamicNavBarColor"] = navBarColor;

// 构建FlyoutPage（汉堡菜单主页面）
var flyoutPage = new FlyoutPage
{
    Flyout = new YourFlyoutMenuPage(), // 替换为你的汉堡菜单页面
    Detail = new NavigationPage(new ListeAchatsPage()) // 导航栏嵌套在Detail中
};

MainPage = flyoutPage;

步骤3：运行时动态修改导航栏颜色 #

后续用户切换壁纸或修改配置时，只需更新全局动态资源即可，无需重建页面：

// 示例：用户切换壁纸后更新颜色
public void UpdateNavBarColor(string newWallpaperName)
{
    Color newColor = Color.DarkOliveGreen;
    switch(newWallpaperName)
    {
        case "wallpapers_4.png":
            newColor = Color.FromHex("#705502");
            break;
        case "wallpapers_3.png":
            newColor = Color.FromHex("#09506B");
            break;
    }
    // 全局更新颜色，所有绑定该资源的导航栏都会自动刷新
    Application.Current.Resources["DynamicNavBarColor"] = newColor;
}

关键说明 #

• 页面结构：FlyoutPage作为主页面负责汉堡菜单，NavigationPage嵌套在Detail中提供导航栏，两者功能互不冲突。
• 动态绑定：DynamicResource会监听资源字典的变化，相比直接设置控件属性，更适合全局样式的动态更新，且无需持有页面实例引用。

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