Иконка Shell FlyoutItem от Font Awesome

Question

Я пытаюсь использовать значки FontAwesome вFlyoutItemв качестве значка с использованиемFontImageSource. У меня был успех в Xamarin Forms со следующей настройкой, но по какой-то причине в NET MAUI это не работает (по крайней мере, в Windows?)? Я вижу элемент вкладки, но значка нет, что бы я ни пытался. Есть ли способ использовать значки Font Awesome вместо изображений png?

Пример значка, который я пытаюсь использовать: https://fontawesome.com/icons/user?s=solid&f=classic

MauiProgram.cs:

      var builder = MauiApp.CreateBuilder();
builder
  .UseSkiaSharp(true)
  .UseMauiApp<App>()
  .ConfigureFonts(fonts =>
  {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    fonts.AddFont("FW-Regular-400.otf", "FontAwesomeRegular");
    fonts.AddFont("FWBrands-Regular-400.otf", "FontAwesomeBrands");
    fonts.AddFont("FW-Solid-900.otf", "FontAwesomeSolid");
  });

Приложение.xaml:

        <!-- Desktop/Tablet-->
  <FlyoutItem Title="Home">
    <ShellContent ContentTemplate="{DataTemplate page:HomePage}">
      <ShellContent.Icon>
        <FontImageSource FontFamily="FontAwesomeSolid" Glyph="&#xf021;"/>
      </ShellContent.Icon>
    </ShellContent>
  </FlyoutItem>
  <FlyoutItem Title="Settings">
    <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}">
      <ShellContent.Icon>
        <FontImageSource FontFamily="FontAwesomeSolid" Glyph="user"/>
      </ShellContent.Icon>
    </ShellContent>
  </FlyoutItem>

Answer 1

У меня это работает, как указано ниже. Однако в настоящее время кажется, что это решение работает в NET7, но не в NET6. В NET6 значки не видны:

---

Для сети 7

Приложение.xaml:

      <?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyTool"
             xmlns:page="clr-namespace:MyTool.Pages"
             xmlns:helpers="clr-namespace:MyTool.Helpers"
             x:Class="MyTool.App">

  <Application.MainPage>
    <Shell FlyoutWidth="90" FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">

      <!-- Desktop/Tablet-->
      <FlyoutItem Title="Home" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.House}, Size=50}">
        <ShellContent ContentTemplate="{DataTemplate page:HomePage}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.House}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
      <FlyoutItem Title="Settings" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.Gear}, Size=50}">
        <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.Gear}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
    </Shell>
  </Application.MainPage>
</Application>

FontAwesomeIcons.cs: (используйте какой-либо инструмент, доступный в Интернете, для создания такого класса)

      namespace MyTool.Helpers
{
    public static class FontAwesomeIcons
    {
      public const string Space = "\u0020";
      public const string Exclamation = "\u0021";
      public const string Hashtag = "\u0023";
      public const string DollarSign = "\u0024";
      public const string Percent = "\u0025";
      public const string Asterisk = "\u002a";
      public const string Plus = "\u002b";
      public const string Hyphen = "\u002d";

      // etc
    }
 }

MauiProgram.cs:

      namespace MyTool;

public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
    var builder = MauiApp.CreateBuilder();
    builder
      .UseMauiApp<App>()
      .ConfigureFonts(fonts =>
      {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("FW-Solid-900.otf", "FontAwesomeSolid");
      });

#if DEBUG
    builder.Logging.AddDebug();
#endif

    return builder.Build();
  }
}

Answer 2

Будет добавлено в качестве ответа на значок Shell FlyoutItem от Font Awesome.

Вот один, который работает для меня. Разница с ответом @10101 и ответом, который у меня был выше, который не работал, заключается в определении статического ресурса FontIcon.
Протестировано на Net6 и Net7 (VS2022 17.4.4).

Он основан на ответе @10101 в сочетании с идеей здесь .

Шаги

• Добавлен ресурс FontIcon.
• Задайте свойство Icon для FlyoutItem (в отличие от базового ShellContent).

Ограничение: размер и цвет задаются для ресурса FontImage в определении ресурса, а не там, где он используется в определении FlyoutItem. Я не знаю, как переопределить эти свойства в FlyoutItem.

Код
Регистрация шрифта в MauiProgram.cs (сокращенно):

      public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                [...]
                // Custom fonts
                fonts.AddFont("bootstrap-icons.ttf", "Bootstrap");
            });

            [...]
            return builder.Build();
        }

FontIcon, созданный как ресурс в styles.xaml (на самом деле я создал другой файл определения ресурса с именем fonticons.xaml и добавил его в объединенный словарь ресурсов в App.xaml, но в данном случае это не важно):

      <ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <x:String x:Key="BootStrapGear">&#xf3e5;</x:String>

    <FontImage x:Key="IconGear"
        FontFamily="Bootstrap"
        Color="Black"
        Size="50"
        Glyph="{x:StaticResource BootStrapGear}"/>
</ResourceDictionary>

AppShell.xaml:

      <Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    [...]
    Shell.FlyoutBehavior="Flyout">
 
    [...]
    <FlyoutItem Title="Settings" Icon="{x:StaticResource IconGear}">
        <ShellContent
            ContentTemplate="{DataTemplate localconfigns:ConfigPage}"
            Route="ConfigPage" />
    </FlyoutItem>
</Shell>

Answer 3

Простое решение работает для меня:

          <FlyoutItem
       Title="Dalle Chalange"
       Icon="{FontImage FontFamily=fontello, 
       Glyph={x:Static FontIcons:IconFont.Compass}, 
       Color=White,
       Size=30}">
       <ShellContent
          ContentTemplate="{DataTemplate dalle_views:DashboardView}" />
</FlyoutItem>

РЕДАКТИРОВАТЬ: Вот тот же подход, но лучше:

      <FlyoutItem Title="Dalle Chalange">
    <FlyoutItem.FlyoutIcon>
        <FontImageSource
            FontFamily="fontello"
            Glyph="{x:Static FontIcons:IconFont.Compass}"
            Color="{AppThemeBinding Light={StaticResource light_onSurface}, Dark={StaticResource dark_onSurface}}"/>
    </FlyoutItem.FlyoutIcon>
    <ShellContent
        ContentTemplate="{DataTemplate dalle_views:DashboardView}" />

</FlyoutItem>