使用Xamarin Forms图标化（在Android上）

Question

我根本无法使Iconize正常工作。我根据该线程中的代码（以及其他地方）创建了一个小型测试项目：

How to change icon color in Xamarin.Forms xaml page?

在App.xaml.cs中：

public App()
{
    InitializeComponent();

    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.MaterialDesignIconsModule());
    MainPage = new MainPage();
}

在MainActivity.cs中：

protected override void OnCreate(Bundle savedInstanceState)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    Plugin.Iconize.Iconize.Init(Resource.Id.toolbar, Resource.Id.sliding_tabs);

    LoadApplication(new App());
}

和MainPage.xaml：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:IconizeTest"
             xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
             x:Class="IconizeTest.MainPage">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <iconize:IconImage HeightRequest="20" Icon="mdi-bus-double-decker" IconColor="Blue" WidthRequest="20" />
            <iconize:IconImage HeightRequest="20" Icon="mdi-bus-double-decker" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
            <iconize:IconButton FontSize="20" Text="mdi-bus-double-decker" TextColor="Red" WidthRequest="48" />
            <iconize:IconLabel FontSize="20" Text="mdi-bus-double-decker" TextColor="Green" VerticalTextAlignment="Center" />
            <Label Text="mdi-bus-double-decker" VerticalTextAlignment="Center" />
        </StackLayout>
    </StackLayout>
</ContentPage>

下面是仿真器中输出的图片（在我的测试设备上看起来是一样的...）：

我喜欢使用iconize的想法，它将极大地减少我花时间使用图标的时间。我就是无法正常工作。谁能告诉我我在做什么错？

谢谢！ -凯伦

Answer 1

字体图标可以直接在Label中使用。

Image和ImageButton支持在FontImageSource中定义font icons，请参见下面使用Iconize Material Design Icons的示例：

<ContentPage ...
             xmlns:fonts="clr-namespace:Fonts" 
             ...
             >
<ContentPage.Resources>
  <ResourceDictionary>
    <OnPlatform x:Key="MaterialDesignIcons" x:TypeArguments="x:String">
        <On Platform="iOS" Value="Material Design Icons" />
        <On Platform="Android" Value="iconize-materialdesignicons.ttf#Material Design Icons" />
        <On Platform="UWP" Value="Assets/Fonts/iconize-materialdesignicons.ttf#Material Design Icons" />
    </OnPlatform>
  </ResourceDictionary>
</ContentPage.Resources>
...
<Image BackgroundColor="LightGray">
    <Image.Source>
        <FontImageSource Glyph="{x:Static fonts:MaterialDesign.access_point}"
                         FontFamily="{StaticResource MaterialDesignIcons}" 
                         Color="Blue" Size="10" />
    </Image.Source>
</Image>
<ImageButton BackgroundColor="LightGray">
    <ImageButton.Source>
        <FontImageSource Glyph="{x:Static fonts:MaterialDesign.bus_double_decker}"
                         FontFamily="{StaticResource MaterialDesignIcons}" 
                         Color="Red" Size="20" />
    </ImageButton.Source>
</ImageButton>
<Label Text="{x:Static fonts:MaterialDesign.lock}" 
       FontFamily="{StaticResource MaterialDesignIcons}" 
       TextColor="Green" FontSize="20" BackgroundColor="LightGray" VerticalTextAlignment="Center" />

可以如下定义字体图标，例如Iconize中的Iconize/src/Fonts/Plugin.Iconize.MaterialDesignIcons/MaterialDesignIconsCollection.cs字体；

Icons.Add("mdi-access-point", '\uf002');
...
Icons.Add("mdi-bus-double-decker", '\uf79d');
...
Icons.Add("mdi-lock", '\uf33e');
...

因此下面的类MaterialDesign与ContentPage放置在同一程序集中：

namespace Fonts
{
    public static class MaterialDesign
    {
#pragma warning disable IDE1006 // Naming Styles
        public static string access_point => "\uf002";
        ...
        public static string bus_double_decker => "\uf79d";
        ...
        //lock is a keyword in c#, so add "@" to use it as name of property
        public static string @lock => "\uf33e";
        ...
#pragma warning restore IDE1006 // Naming Styles
    }
}

Iconize MaterialDesignIconsCollection类的键，值条目可以使用以下命令转换为MaterialDesign类的auto属性语法：在文本编辑器中搜索/替换（此处未显示）。

在此示例中，iconize-materialdesignicons.ttf字体文件被放置在Android上的Assets文件夹中（构建动作AndroidAsset），在iOS上的Resources文件夹中被放置（构建动作{{1 }}）和UWP上的BundleResource（构建操作Assets/Fonts）。

在iOS上，将字体添加到Content项目中的Info.plist：

<app>.iOS