Xamarin.Forms：如何使用标签和字体图标创建“禁止”标志？答案

【问题标题】：Xamarin.Forms: how to to create a "prohibited" sign with labels and font icons?Xamarin.Forms：如何使用标签和字体图标创建“禁止”标志？
【发布时间】：2017-09-06 01:36:36
【问题描述】：

我开发了一个 Xamarin.Forms 应用程序，我正在寻找一个图标，让我可以显示活动是否免费强>...

由于我没有在 FontAwesome、Ionicons 或 Material 等常用字体图标中找到任何内容，因此我决定创建一个带有标签的“自定义”图标。

为此，我选择了：

对于付费活动：细圈中的“€”符号
对于免费活动：“€”符号被反斜杠 (“\”) 围成一个细圈

第一种情况没有问题：

<Grid Margin="1,0"
      ColumnSpacing="0"
      RowSpacing="0"
      HeightRequest="14"
      >
    <Label 
        Text="{ x:Static local:FontAwesomeFont.CircleThin }"
        Style="{ StaticResource FontIcon }" 
        HorizontalTextAlignment="Center"
        VerticalTextAlignment="Center"
        Opacity="1"
        FontSize="14"
        TextColor="{  DynamicResource BaseTextColor }" />
    <Label 
        Text="{ x:Static local:FontAwesomeFont.Euro }"
        FontSize="8"
        Style="{ StaticResource FontIcon }"
        HorizontalTextAlignment="Center"                                                                                 
        VerticalTextAlignment="Center"
        TextColor="{ DynamicResource BaseTextColor }" />
</Grid>

但是第二种情况比较困难，因为iOS和Android的渲染是有区别的：

<Grid Margin="1,0"
      ColumnSpacing="0"
      RowSpacing="0"
      HeightRequest="14"
      >
    <Label 
        Text="{ x:Static local:FontAwesomeFont.CircleThin }"
        Style="{ StaticResource FontIcon }" 
        HorizontalTextAlignment="Center"
        VerticalTextAlignment="Center"
        Opacity="1"
        FontSize="14"
        TextColor="{  DynamicResource BaseTextColor }" />
    <!-- Backslash -->              
    <Label 
        Text="\" 
        Style="{ StaticResource FontIcon }" 
        HorizontalTextAlignment="Center"
        VerticalTextAlignment="Center"
        Rotation="-22"
        TextColor="{  DynamicResource BaseTextColor }"
        FontAttributes="Bold"
        >
        <Label.FontSize>
            <artina:OnOrientationDouble>
                <OnPlatform x:TypeArguments="x:Double">
                    <On Platform="iOS">13</On>
                    <On Platform="Android">12</On>
                </OnPlatform>
        </Label.FontSize>
        <Label.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android">0,0,0,0.5</On>
                <On Platform="iOS">0.5,0,0,1.5</On>
            </OnPlatform>
        </Label.Margin>
    </Label>                
    <Label 
        Text="{ x:Static local:FontAwesomeFont.Euro }"
        FontSize="8"
        Style="{ StaticResource FontIcon }"
        HorizontalTextAlignment="Center"                                                                                 
        VerticalTextAlignment="Center"
        TextColor="{ DynamicResource BaseTextColor }" />
</Grid>

这样，我得到一个正确但不完美的结果：

在 Android 上：

（“Gratuit”代表免费图标）

在 iOS 上：

（“Gratuit”代表免费图标）

另外，如果我需要为这个图标使用更大的尺寸，我必须重新定义反斜杠的每个参数。

有没有更简洁的方法来实现这一点？

【问题讨论】：

标签： xamarin.ios xamarin.android xamarin.forms icons label

【解决方案1】：

这个解决方案看起来很容易出错，而且对于系统来说可能太重了。这么小的图标需要大量的布局和渲染调用。您应该做的是使用SkiaSharp 创建一个自定义控件并自己处理绘图。 Here'a a great article 来自 Xamarin，概述了如何开始使用该库。

此外，这里还有一系列附加指南，涵盖了实现图标所需的所有内容（绘制圆圈、文本和线条）：

Using SkiaSharp in Xamarin.Forms

【讨论】：