logo标签列表

在 .Net Maui 中，是否可以更改工具栏项的颜色，包括更多图标、汉堡图标和返回按钮的颜色？

.netmauidarkmodeflyout
5
我有一个带有 .net maui 的 Flyout 主/详细信息页面。
在深色模式下，Windows 上的汉堡菜单按钮、返回按钮和工具栏项更多图标（三个点）以黑色显示。在 Android 上，只有工具栏项更多图标（三个点）是黑色的，返回按钮是白色的。
如何在 .net maui 上更改 Windows、Android、iOS 上的工具栏项更多图标颜色、汉堡菜单图标颜色和返回按钮颜色？
提前致谢。
Windows:

enter image description here

安卓：

enter image description here

在亮色模式下的Windows系统中，我该如何使更多的图标变成白色？

enter image description here

我的样式

<Color x:Key="Background_Dark">#081B25</Color>
<Color x:Key="DarkGreenBackgroundColor">#187D21</Color>
<Style TargetType="NavigationPage" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource DarkGreenBackgroundColor}, Dark={StaticResource Background_Dark}}" />
    <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource DarkGreenBackgroundColor}, Dark={StaticResource Background_Dark}}" />
    <Setter Property="BarTextColor" Value="White" />
    <Setter Property="IconColor" Value="White" />
</Style>

<Style TargetType="Page" ApplyToDerivedTypes="True">
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=White, Dark={StaticResource Background_Dark}}" />
</Style>

`

你应该替换图标并选择白色。我测试了代码，但未能实现它。此外，你可以参考官方文档关于更改图标和主题更改。考虑到不同的平台，你可以查看这个链接，它是关于Android的。 - Jianwei Sun - MSFT
感谢您的回答。 请从以下链接下载示例，并将主题设置为暗色。 Application.Current.UserAppTheme = AppTheme.Dark;在Windows和Android上进行测试。https://github.com/iolah2/maui-samples_2022/tree/main/6.0/Navigation/FlyoutPageSample - S Arslan
5个回答
2
我向MAUI提交了一个拉取请求，应该可以解决这个问题，并使溢出图标的颜色与其他导航图标相匹配。你可以在这里查看我的写作here。
在修复合并之前，你可以创建一个自定义的shell渲染器。这个shell渲染器将会把溢出图标的颜色设置为Shell.ForegroundColor，但如果你选择的话，也可以使用其他样式颜色。
在YourApp/Platforms/Android/中创建一个名为CustomRenderers.cs的文件。
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using Toolbar = AndroidX.AppCompat.Widget.Toolbar;

namespace YourApp.Platforms.Android;

public class CustomShellRenderer : ShellRenderer {
    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker() {
        return new CustomToolbarAppearanceTracker();
    }
}

internal class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker {
    public void Dispose() {
    }

    public void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance) {
        toolbar.OverflowIcon?.SetTint(appearance.ForegroundColor.ToAndroid());
    }

    public void ResetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker) {
    }
}

然后，在你的MauiProgram.cs文件中：
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts => {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            }).ConfigureMauiHandlers(handlers => {
// ADD THIS SECTION
#if ANDROID
                handlers.AddHandler(typeof(Shell), typeof(YourApp.Platforms.Android.CustomShellRenderer));
#endif
            });
我尝试了这种方法，而且有效。谢谢 - undefined
1

我测试了您提供的示例，并按照您说的步骤进行操作，但未能成功更改图标颜色。

方法1

正如我之前所说，您可以替换图标并选择白色图标颜色。如果您能够使用PS来很好地修改图标颜色，那么速度会更快。

方法2

您可以参考这个案例，它通过插件来更改图标颜色。因此，相对较为复杂。它可能对您有帮助。

现在使用白色图标似乎是最好的解决方案。我将通过您的示例，演示如何在所有平台上更改返回按钮和更多图标。非常感谢你。 - S Arslan
你给出的示例中建议使用透明背景，这也是一个选项。我会尝试使用透明背景。谢谢。 - S Arslan
@SArslan，你解决了这个问题吗？ - Jianwei Sun - MSFT
0
如果你进入 <Project Sdk="Microsoft.NET.Sdk"> ，滚动到图像部分并添加值 TintColor。
<MauiImage Update="Resources\Images\dotnet_bot.svg"  TintColor="#512BD4" BaseSize="168,208" />
0
0

尝试将色调设置为该图标

toolbar.OverflowIcon.SetTint(ContextCompat.GetColor(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity,Resource.Color.m3_ref_palette_white));
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接