Xamarin Forms Material 设计图标 Webfont

Question

我对 Xamarin Forms 还是很陌生，我在为我的应用程序显示 Material 设计图标时遇到问题。我一直收到带问号的盒子，但我不明白为什么。我正在使用控件模板为我的页面创建页眉和页脚。

这是屏幕上的输出： View Display

这是我的 App.xaml 代码：

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="DueMore.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="fgColor">#66169C</Color>
            <Color x:Key="bgColor">#FFFFFF</Color>
            <Color x:Key="OverDueItem">#FF1C07</Color>

            <OnPlatform x:Key="Material" x:TypeArguments="x:String">
                <On Platform="iOS" Value="Material Design Icons" />
                <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
            </OnPlatform>

            <Style TargetType="{x:Type Button}" x:Key="MaterialIcons">
                <Setter Property="FontFamily" Value="{DynamicResource Material}"/>
                <Setter Property="FontSize" Value="100"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="TextColor" Value="{DynamicResource fgColor}"/>
                <Setter Property="FontSize" Value="Large"/>
            </Style>

            <Style TargetType="NavigationPage">
                <Setter Property="BarBackgroundColor" Value="{DynamicResource bgColor}" />
                <Setter Property="BarTextColor" Value="{DynamicResource fgColor}" />
            </Style>

            <ControlTemplate x:Key="MainPageTemplate">
                <StackLayout>
                    <Grid Padding="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <ContentPresenter Grid.Row="1"
                                          Grid.RowSpan="10"
                                          Grid.Column="0"
                                          Grid.ColumnSpan="5"/>

                        <Entry Placeholder="Enter an Inbox Item"
                               HeightRequest="50"
                               Grid.Column="0"
                               Grid.ColumnSpan="3"
                               Grid.Row="9"
                               BackgroundColor="{DynamicResource bgColor}"
                               TextColor="{DynamicResource fgColor}"
                               HorizontalOptions="Fill"/>

                        <Button Text="&#xf001;"
                                Style="{StaticResource MaterialIcons}"
                                Clicked="Save_Clicked"
                                Grid.Row="9"
                                Grid.Column="3"/>

                        <Button Text="&#xf001;"
                                Style="{StaticResource MaterialIcons}"
                                Clicked="Button_Clicked"
                                Grid.Row="9"
                                Grid.Column="4"/>
                    </Grid>
                </StackLayout>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

如有任何帮助，我们将不胜感激！提前致谢！

Answer 1

在 Android 上，您需要将字体图标添加到 android 平台特定项目的资产文件夹中。在 iOS 上，您需要将字体图标添加到 iOS 项目的 Resources 文件夹中。

ControlTemplate 用法：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="App2.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
ControlTemplate="{StaticResource MainPageTemplate}"
mc:Ignorable="d">

<StackLayout>
    <!--  Place new controls here  -->
 
</StackLayout>

截图：

带有Material个设计图标的源文件，您可以从GitHub下载。 https://github.com/WendyZang/Test/tree/master/MaterialDesignIcons/App2

Xamarin Forms Material 设计图标 Webfont

Xamarin Forms Material Design Icons Webfont

xaml

xamarin

material-design-in-xaml