Я пытаюсь изменить шаблон приложения Xamarin Forms (Flyout) по умолчанию, чтобы использовать значки дизайна материалов для значков FlyoutItem
вместо предоставленных файлов .png
. Я пытался следовать этому сообщению в блоге Джеймса Монтеманьо и пытался использовать его проект Hanselman.Forms в качестве справки... но я что-то упустил.
Примечание. На данный момент у меня нет доступа к iPhone или Mac, поэтому я просто концентрируюсь на проекте Android.
Я сделал следующие шаги:
materialdesignicons-webfont.ttf
в папку Assets и дважды проверил, что его Build Action
установлено на AndroidAsset
.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"></x:String>
<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.Forms
TabItem
- я думал, что FontFamily должен быть DynamicResource
, но, видимо, нет, потому что он работает как есть в этом проекте, но в моем случае он не работает в любом случае - значок всегда пустой (на самом деле, если я заменю Glyph
на букву A
, я получу букву «А» для значка, но это не очень полезно).
Мне не хватает какой-то глупой детали, которую я просто не вижу.
И поставьте метку, чтобы проверить настройку шрифта.
Как я сказал @ Tommy99 ниже - это отличная альтернатива, но моя цель - понять, что я упускаю из виду - в моем понимании есть пробел, который не заполнен другой реализацией. Как только я заработаю, я обязательно переработаю этот подход!
Хорошо. Давайте начнем с <Label Text = "" FontFamily = "{StaticResource MaterialFontFamily}">
, тогда этикетка выглядит нормально?
@Шоу - нет; это не так. Попытка реализовать вашу альтернативу привела меня к плохому коду глифа (см. мой опубликованный ответ). Спасибо.
Отвечает ли это на ваш вопрос? Как использовать иконки Font Awesome в проекте в качестве иконки ImageButton
Я заставил его работать.
Прежде всего, перейдите в этот репозиторий 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 = "">
</FontImageSource>
</ShellContent.Icon>
</ShellContent>
Если вы выполните все шаги - результат должен быть таким:
Если, по какой-то причине, вы хотите использовать материальные значки за пределами своей оболочки, вы можете создать метку, в которой семейство шрифтов установлено как Material
, а в качестве свойства Text
вы можете установить соответствующий код. Не забудьте включить &#x
перед кодовой точкой и всегда заканчивайте ее точкой с запятой.
Вы можете настроить цвета и значок по своему усмотрению — просто найдите в документе с кодовой точкой нужный значок и вставьте кодовую точку, которая идентифицирует этот конкретный значок.
Это, безусловно, отличная альтернатива, но моя цель - понять, что я упускаю из виду - в моем понимании есть пробел, который не заполнен другой реализацией.
@ScottBaker, пожалуйста, прочитайте dev.to/peedroca/material-font-icons-on-xamarin-forms-2a9h, если вы хотите использовать материальные шрифты. Я не думаю, что вы делаете это совершенно правильно - выберите самый простой путь, если нет альтернативы.
@ScottBaker, пожалуйста, просмотрите мой обновленный ответ.
Это еще одна другая реализация. Я понимаю, о чем вы говорите, но эта реализация должна работать... и я хочу знать, почему она не работает, а не как ее обойти.
Источник ошибки здесь:
<x:String x:Key = "IconAbout"></x:String>
Изменение этого кода символа на 󰋟
заставило все работать — один пропущенный ноль и результат — хаос. Большое спасибо @shaw и @tommy99 - попытка реализовать их ответ (и он все еще не работает) привела меня к решению. Я проголосовал за их решение/комментарии в благодарность.
Все хорошо, основное отличие для меня от моей ссылки в том, что она требует одну копию файлов шрифтов в общий проект, а не размещает их везде. Другие шаги очень похожи, так как у вас все работает.
Лучший способ избежать путаницы — определить коды глифов в статическом классе как строковые свойства и работать с их явным описательным именем вместо их значения (кода). stackoverflow.com/a/65095438/5228202
Этот блог Джеймса является старой версией, проверьте это Встроенные шрифты, которые легко реализовать.