Segmented Control with Icon Images and ExportFont

[Mauro Da Silva]

Hi,

I'm using the new ExportFont attribute that was recently introduced in Xamarin forms. However, I cannot get the SegmentedControl to show the Icons I have in my ttf file. When I specify the font to use, the Segmented control says it cannot find the font.

Does the segmented control support fonts using the new ExportFont attribute?

Thanks

[Anandraj Selvam]

Hi Mauro Da Silva,  

  

Greetings from Syncfusion.  

  

We have checked the reported query and currently we have a support to display the icon only when added the font files based on the platform specific as per in below code snippet  

  

<buttons:SfSegmentedControl x:Name="segmentedControl"  

                                     Margin="10,0" 

                                     CornerRadius="15" 

                                     SelectedIndex="1" 

                                     ItemsSource = "{Binding ImageTextCollection}" 

                                     DisplayMode="ImageWithText" 

                                     VisibleSegmentsCount="3" 

                                     > 

            <buttons:SfSegmentedControl.FontIconFontFamily> 

                <OnPlatform Android="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" 

                                        iOS="Font Awesome 5 Free Solid"/> 

            buttons:SfSegmentedControl.FontIconFontFamily> 

        buttons:SfSegmentedControl> 

 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-121809153  

  

Embedded settings of ttf/otf with ExportFont is not supported. Similar issue has been faced in Image control for that they suggested the workaround to add font files with platform specific as mentioned in below comments  

  

https://github.com/xamarin/Xamarin.Forms/issues/9463#issuecomment-613685368  

 

  

So, please check our provided sample and ensure whether your requirement has been achieved or not.  

  

Regards, 

Anand Raj S. 

[Mauro Da Silva]

Thanks for the reply. Do you know if there is anyway to use PNG/SVG for the icon?

[Suyamburaja Jayakumar]

Hi Mauro Da Silva, 

 

We have achieved your requirement by using the custom view, With the help of SkiaSharp, we can draw the SVG path and make it as View by using SKCanvasView as per in below code snippet. 

 

XAML: 

<buttons:SfSegmentedControl 

        BorderColor="Black"  

        HeightRequest="80" 

        HorizontalOptions="Center" 

        x:Name="segmentedControl" 

        VisibleSegmentsCount="2" 

        BackgroundColor="Transparent" 

        ItemsSource="{Binding ViewItems}" 

        SegmentPadding="5"> 

        </buttons:SfSegmentedControl> 

 

ViewModel: 

public class ViewModel 

    { 

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

 

        public ViewModel() 

        { 

            Label label = new Label() 

            { 

                Text = "Text", 

                FontSize = 20, 

                VerticalTextAlignment = TextAlignment.Center, 

                HorizontalTextAlignment = TextAlignment.Center, 

                TextColor = Color.Black, 

            }; 

 

            Icon icon = new Icon(); 

 

            ViewItems = new ObservableCollection<View>(); 

            ViewItems.Add(label); 

            ViewItems.Add(icon); 

        } 

    } 

 

C#: 

    public class Icon : Frame 

    {  

        private readonly SKCanvasView canvasView = new SKCanvasView(); 

 

        public Icon() 

        { 

            Padding = new Thickness(0); 

            BackgroundColor = Color.Transparent; 

            HasShadow = false; 

            Content = canvasView; 

            canvasView.PaintSurface += CanvasViewOnPaintSurface; 

        } 

 

        private static void RedrawCanvas(BindableObject bindable, object oldvalue, object newvalue) 

        { 

            Icon svgIcon = bindable as Icon; 

            svgIcon?.canvasView.InvalidateSurface(); 

        } 

 

        private void CanvasViewOnPaintSurface(object sender, SKPaintSurfaceEventArgs args) 

        { 

            SKCanvas canvas = args.Surface.Canvas; 

            canvas.Clear(); 

 

            if (string.IsNullOrEmpty("SimpleSample.level2.svg")) 

                return; 

 

            using (Stream stream = GetType().Assembly.GetManifestResourceStream("SimpleSample.level2.svg")) 

            { 

                SKSvg svg = new SKSvg(); 

                svg.Load(stream); 

 

                SKImageInfo info = args.Info; 

                canvas.Translate(info.Width / 2f, info.Height / 2f); 

 

                SKRect bounds = svg.ViewBox; 

                float xRatio = info.Width / bounds.Width; 

                float yRatio = info.Height / bounds.Height; 

 

                float ratio = Math.Min(xRatio, yRatio); 

 

                canvas.Scale(ratio); 

                canvas.Translate(-bounds.MidX, -bounds.MidY); 

 

                canvas.DrawPicture(svg.Picture); 

            } 

        } 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/155002-761431259.zip  

 

Please let us know if you require further assistance.  

 

Regards, 

Suyamburaja J.