Использование значков дизайна материалов с формами Xamarin — что мне не хватает?

Я пытаюсь изменить шаблон приложения Xamarin Forms (Flyout) по умолчанию, чтобы использовать значки дизайна материалов для значков FlyoutItem вместо предоставленных файлов .png. Я пытался следовать этому сообщению в блоге Джеймса Монтеманьо и пытался использовать его проект Hanselman.Forms в качестве справки... но я что-то упустил.

Примечание. На данный момент у меня нет доступа к iPhone или Mac, поэтому я просто концентрируюсь на проекте Android.

Я сделал следующие шаги:

  1. Импортировал файл materialdesignicons-webfont.ttf в папку Assets и дважды проверил, что его Build Action установлено на AndroidAsset.
  2. В файл App.xaml добавлено следующее:
<OnPlatform x:Key = "MaterialFontFamily" x:TypeArguments = "x:String">
   <On Platform = "Android" Value = "materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>

<x:String x:Key = "IconAbout">&#xf2fd;</x:String>
  1. Изменен AppShell.xaml, чтобы изменить значок:
<FlyoutItem Title = "About">
   <FlyoutItem.Icon>
      <FontImageSource Glyph = "{StaticResource IconAbout}"
                       FontFamily = "{StaticResource MaterialFontFamily}" 
                       Color = "Black"/>
   </FlyoutItem.Icon>
   <ShellContent Route = "AboutPage" ContentTemplate = "{DataTemplate local:AboutPage}" />
</FlyoutItem>

Это прямая копия из проекта Hanselman.FormsTabItem - я думал, что FontFamily должен быть DynamicResource, но, видимо, нет, потому что он работает как есть в этом проекте, но в моем случае он не работает в любом случае - значок всегда пустой (на самом деле, если я заменю Glyph на букву A, я получу букву «А» для значка, но это не очень полезно).

Мне не хватает какой-то глупой детали, которую я просто не вижу.

Этот блог Джеймса является старой версией, проверьте это Встроенные шрифты, которые легко реализовать.

Shaw 21.12.2020 21:23

И поставьте метку, чтобы проверить настройку шрифта.

Shaw 21.12.2020 21:24

Как я сказал @ Tommy99 ниже - это отличная альтернатива, но моя цель - понять, что я упускаю из виду - в моем понимании есть пробел, который не заполнен другой реализацией. Как только я заработаю, я обязательно переработаю этот подход!

Scott Baker 21.12.2020 21:46

Хорошо. Давайте начнем с <Label Text = "&#xf2fd;" FontFamily = "{StaticResource MaterialFontFamily}">, тогда этикетка выглядит нормально?

Shaw 21.12.2020 22:01

@Шоу - нет; это не так. Попытка реализовать вашу альтернативу привела меня к плохому коду глифа (см. мой опубликованный ответ). Спасибо.

Scott Baker 21.12.2020 22:04

Отвечает ли это на ваш вопрос? Как использовать иконки Font Awesome в проекте в качестве иконки ImageButton

Cfun 21.12.2020 23:03
4
6
4 957
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я заставил его работать.

Прежде всего, перейдите в этот репозиторий GitHub и загрузите это семейство шрифтов материала в виде файла .tff. Нажмите на файл шрифта в репозитории и загрузите MaterialIcons-Regular.ttf.

Ссылка: https://github.com/google/material-design-icons

Поместите файл .tff в общий проект.

Теперь сошлемся на шрифт в файле Assemblyinfo.cs следующим образом:

[assembly: ExportFont("MaterialIcons-Regular.ttf", Alias = "Material")]

Установите действие сборки как «встроенный ресурс» в файле .tff. Не забудьте этот шаг!

Перейдите на эту страницу https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints — чтобы просмотреть все кодовые точки материалов.

В этом случае я буду использовать значок «Добавить будильник» в качестве примера (почему бы и нет). Если вы хотите использовать значок «добавить будильник», найдите код «добавить будильник». В этом случае код для значка «Добавить будильник» — e856.

Вставьте следующий код в вашу оболочку:

      <ShellContent Title = "About"
                      ContentTemplate = "{DataTemplate local:AboutPage}"
                      >
            <ShellContent.Icon>
                <FontImageSource FontFamily = "Material"
                                 Color = "White"
                                 Glyph = "&#xe856;">
                </FontImageSource>
            </ShellContent.Icon>
            
            
        </ShellContent>

Если вы выполните все шаги - результат должен быть таким:

Если, по какой-то причине, вы хотите использовать материальные значки за пределами своей оболочки, вы можете создать метку, в которой семейство шрифтов установлено как Material, а в качестве свойства Text вы можете установить соответствующий код. Не забудьте включить &#x перед кодовой точкой и всегда заканчивайте ее точкой с запятой.

Вы можете настроить цвета и значок по своему усмотрению — просто найдите в документе с кодовой точкой нужный значок и вставьте кодовую точку, которая идентифицирует этот конкретный значок.

Это, безусловно, отличная альтернатива, но моя цель - понять, что я упускаю из виду - в моем понимании есть пробел, который не заполнен другой реализацией.

Scott Baker 21.12.2020 21:28

@ScottBaker, пожалуйста, прочитайте dev.to/peedroca/material-font-icons-on-xamarin-forms-2a9h, если вы хотите использовать материальные шрифты. Я не думаю, что вы делаете это совершенно правильно - выберите самый простой путь, если нет альтернативы.

user14090664 21.12.2020 21:32

@ScottBaker, пожалуйста, просмотрите мой обновленный ответ.

user14090664 21.12.2020 21:39

Это еще одна другая реализация. Я понимаю, о чем вы говорите, но эта реализация должна работать... и я хочу знать, почему она не работает, а не как ее обойти.

Scott Baker 21.12.2020 21:57
Ответ принят как подходящий

Источник ошибки здесь:

<x:String x:Key = "IconAbout">&#xf2fd;</x:String>

Изменение этого кода символа на &#xf02df; заставило все работать — один пропущенный ноль и результат — хаос. Большое спасибо @shaw и @tommy99 - попытка реализовать их ответ (и он все еще не работает) привела меня к решению. Я проголосовал за их решение/комментарии в благодарность.

Все хорошо, основное отличие для меня от моей ссылки в том, что она требует одну копию файлов шрифтов в общий проект, а не размещает их везде. Другие шаги очень похожи, так как у вас все работает.

Shaw 21.12.2020 22:10

Лучший способ избежать путаницы — определить коды глифов в статическом классе как строковые свойства и работать с их явным описательным именем вместо их значения (кода). stackoverflow.com/a/65095438/5228202

Cfun 21.12.2020 23:12

Другие вопросы по теме