使用Xamarin Forms圖標化（在Android上）

Question

我根本無法讓Iconize正常工作。 我根據此線程中的代碼（以及其他地方）創建了一個小型測試項目：

如何在Xamarin.Forms xaml頁面中更改圖標顏色？

在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的想法，它將極大地減少我花時間瀏覽圖標的時間。 我就是無法正常工作。 誰能告訴我我在做什么錯？

謝謝！ -Karen

Answer 1

字體圖標可以直接在Label 。

Image和ImageButton支持在FontImageSource定義字體圖標 ，請參見下面的使用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/src/Fonts/Plugin.Iconize.MaterialDesignIcons/MaterialDesignIconsCollection.cs Iconize字體示例；

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
    }
}

該鍵，圖標化的值項MaterialDesignIconsCollection類可轉換成的汽車屬性的語法MaterialDesign使用如搜索類/替換在文本編輯器（這里沒有顯示）。

在此示例中，將iconize-materialdesignicons.ttf字體文件放置在Android上的Assets文件夾（構建動作AndroidAsset ），iOS上的Resources文件夾（構建動作BundleResource ）和UWP上的Assets/Fonts （構建動作Content ）中。

在iOS上，將字體添加到<app>.iOS項目中的Info.plist中：

<key>UIAppFonts</key>
<array>
    <string>iconize-materialdesignicons.ttf</string>
</array>