2017-09-05 47 views
0

我开发一个Xamarin.Forms应用,我正在寻找一个图标让我显示如果事件是免费或不 ...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> 

但它更DIFF icult在第二种情况下,因为有渲染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上:

Android screenshot

( “Gratuit” 表示免费图标)

  • 在iOS上:

iOS screenshot

( “Gratuit” 代表无图标)

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

有没有更简单的方法来实现这个目标?

回答

0

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

此外,这里就是你需要实现的图标(画一个圆圈,文字和线)涵盖了额外的指南的集合:

Using SkiaSharp in Xamarin.Forms

相关问题