SfSegmentItem FontIcon not recognized

[Administrator]

Hi,

I'm using "Material Design Icons" everywhere in my application, and it works inside all my custom controls (Buttons, SfTabItem Header, etc...)

The only place where it doesn't work is in the SfSegmentedControl (in SfSegmentItem FontIcon).

I've tried to set the ItemSource in Xaml :

<buttons:SfSegmentedControl.ItemsSource>

<generic:List x:TypeArguments="buttons:SfSegmentItem">

<buttons:SfSegmentItem FontIconFontColor="{DynamicResource DynamicPrimaryTextColor}"

   FontIconFontFamily="MaterialIconFont"

   FontIconFontSize="16"

   IconFont="{x:Static res:MaterialIcons.ViewList}" />

<buttons:SfSegmentItem FontIconFontColor="{DynamicResource DynamicPrimaryTextColor}"

   FontIconFontFamily="MaterialIconFont"

   FontIconFontSize="16"

   IconFont="{x:Static res:MaterialIcons.Clock}" />

</generic:List>

</buttons:SfSegmentedControl.ItemsSource>

And I've tried to set the ItemSource in code-behind :

List<SfSegmentItem> list = new List<SfSegmentItem>()

{

new SfSegmentItem()

{

IconFont = MaterialIcons.ViewList,

FontIconFontFamily = "MaterialIconFont",

FontIconFontColor = (Color)App.Current.Resources["DynamicPrimaryTextColor"],

FontIconFontSize = 16,

},

new SfSegmentItem()

{

IconFont = MaterialIcons.Clock,

FontIconFontFamily = "MaterialIconFont",

FontIconFontColor = (Color)App.Current.Resources["DynamicPrimaryTextColor"],

FontIconFontSize = 16,

}

};

sfSegmentedCtrl.ItemsSource = new ObservableCollection<SfSegmentItem>(list);

None of theim are working, it show a "X" icon (as it were missing ?) and I'm pretty sure of my Font (I use it everywhere in my app) and the FontValues (used in another button).

My ttf file is set as "EmbeddedResources" and Xamarin.Forms "Crossplatform manner exported" :

[assembly: ExportFont("materialdesignicons-webfont.ttf", Alias = "MaterialIconFont")]

Can you explain what goes wrong with FontIcons in Segmented Controls ?

Did I miss something ?

Thanks in advance,

Jérôme

Attachment: Screenshot_20200921095656_93b96671.zip

[Sakthivel Palaniyappan]

Hi Jerome,

Greetings from Syncfusion.

We have analyzed your query and currently we don’t have Embedded font support in our SfSegmentControl and we have provided embedded font support in our upcoming Volume 3, 2020 main release, which will be available on end of September 2020.  Meanwhile we suggest to use add the font file in each platform to resolve the reported issue as like below code snippet.

XAML:

 

 

<ContentPage.Resources> 

    <ResourceDictionary> 

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

    </ResourceDictionary> 

</ContentPage.Resources> 

 

<ContentPage.Content> 

    <StackLayout VerticalOptions="Center"> 

        <buttons:SfSegmentedControl  DisplayMode="Image" VerticalOptions="Center" HorizontalOptions="Center"> 

            <buttons:SfSegmentedControl.ItemsSource> 

                <generic:List x:TypeArguments="buttons:SfSegmentItem"> 

                    <buttons:SfSegmentItem FontIconFontColor="Green" 

                                                                                                        FontIconFontFamily="{StaticResource controlfontfamily}" 

                                                                                                        FontIconFontSize="20"  

                                                                                                        IconFont="&#xf036;" /> 

                    <buttons:SfSegmentItem FontIconFontColor="Green" 

                                                                                                        FontIconFontFamily="{StaticResource controlfontfamily}" 

                                                                                                        FontIconFontSize="20" 

                                                                                                        IconFont="&#xf032;" /> 

                    <buttons:SfSegmentItem FontIconFontColor="Green" 

                                                                                                        FontIconFontFamily="{StaticResource controlfontfamily}" 

                                                                                                        FontIconFontSize="20"  

                                                                                                        IconFont="&#xf121;" /> 

                </generic:List> 

            </buttons:SfSegmentedControl.ItemsSource> 

        </buttons:SfSegmentedControl> 

 

    </StackLayout> 

</ContentPage.Content> 

Screenshot:


We have created sample based on this and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SegementSample-498896306.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P. 

[Administrator]

Ok, thanks for your answer.

What I don't understand, is that the Xamarin.Forms [assembly: ExportFont("materialdesignicons-webfont.ttf", Alias = "MaterialIconFont")] is doing the "native things" behind the scene (add font to info.plist, Platform native embedded Assets/Resource, etc.), so normally they would be invoked by SfComponents.

I will not wait for your update cause I have to deliver... but I'm impatient for the update.

Thanks,

Jérôme

[Sakthivel Palaniyappan]

Hi Jerome,

We can achieve your requirement by using custom views in our SfSegmentControl as like below code snippet.

C#:

 

public class ViewModel 

    { 

        public ObservableCollection<View> ViewItems { get; set; } 

 

        public ViewModel() 

        { 

            ViewItems = new ObservableCollection<View> 

        { 

            new Item1(), 

             new Item2(), 

        }; 

        } 

    } 

XAML:

 

   <buttons:SfSegmentedControl 

        BorderColor="Transparent"   

        HeightRequest="80"  

        HorizontalOptions="Center" 

        x:Name="segmentedControl" 

        VisibleSegmentsCount="2" 

        Color="Transparent" 

        ItemsSource="{Binding ViewItems}" 

        SegmentPadding="30"> 

            <buttons:SfSegmentedControl.BindingContext> 

                <local:ViewModel/> 

            </buttons:SfSegmentedControl.BindingContext> 

        </buttons:SfSegmentedControl> 

We have created sample based on this, please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/EmbeddedFontsSample-1249790622.zip

Please follow the below link for more details about custom views in SfSegmentControl.

UG link: https://help.syncfusion.com/xamarin/segmented-control/populating-data-source#custom-views


Regards,
Sakthivel P. 

[Sakthivel Palaniyappan]

Hi Jerome,

We are glad to announce that our Essential Studio 2020 Volume 3 release v18.3.0.35 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,
Sakthivel P.     

[Emil]

is this still not possible? using as EmbededResource?

Beside that using list of view in Viewmodel, it would be great to have possibility to use ItemTemplate

[Ruba Shanmugam]

Hi Emil,

In our Volume 3, 2020 release, we already included EmbededResource support. We have prepared a sample for your reference, which you can find in the attachment.

Please let us know if you have any other details.

Regards,

Ruba Shanmugam

Attachment: FontEmbedded_SfSegmentedControl_59de2510.zip