1. Home
  2. Forum
  3. Xamarin.Forms
  4. Set FontFamily in SfDataform

Set FontFamily in SfDataform

Hello Syncfusion-Team,


in my xamarin.forms application I have a dataform generated for a modal class. But I cant figure out how to change the FontFamily for group label, editor label and also the label of the inputs. I know that I can change the FontSize of these elements by adding a custom AutoGeneratingDataFormItem function containing:

e.DataFormItem.EditorFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));
e.DataFormItem.LabelFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));
e.DataFormGroupItem.LabelFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));


But how do I change the FontFamily?


5 Replies 1 reply marked as answer
MS Muniappan Subramanian Syncfusion Team June 30, 2021 07:46 AM UTC

Hi Patrick,  
 
Thank you for using Syncfusion products. 
 
We checked your requirement “Set FontFamily in SfDataform”. You can achieve your requirement by using HintLabelStyle, HelperLabelStyle, ValidationLabelStyle in DataFormItem. We’ve prepared the sample for the same. Please find the link below for the sample,  
 
Code Snippet: 
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e) 
{ 
    if (e.DataFormItem != null) 
    { 
        e.DataFormItem.HintLabelStyle = new LabelStyle() { FontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf#Lobster-Regular", "Assets/Fonts/Lobster-Regular.ttf#Lobster"), FontSize = 10 }; 
        e.DataFormItem.HelperLabelStyle = new LabelStyle() { FontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf#Lobster-Regular", "Assets/Fonts/Lobster-Regular.ttf#Lobster"), FontSize = 10 }; 
        e.DataFormItem.ValidationLabelStyle = new LabelStyle() { FontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf#Lobster-Regular", "Assets/Fonts/Lobster-Regular.ttf#Lobster"), FontSize = 10 }; 
    } 
} 
 
public class DataFormLayoutManagerExt : DataFormLayoutManager 
{ 
    public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm) 
    { 
    } 
    protected override View GenerateViewForGroupHeader(DataFormGroupItem dataFormGroupItem) 
    { 
        Label label = new Label(); 
        label.FontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf#Lobster-Regular", "Assets/Fonts/Lobster-Regular.ttf#Lobster"); 
        label.Text = "ContactInfo"; 
        label.FontSize = 20; 
        return label; 
    } 
} 
 
 
Please find the output for the same, 
 
 
Please refer below UG link to know more details about font customization in SfDataForm, 
 
We hope that this helps you, kindly revert us if you have any concern.  
 
Regards, 
Muniappan S. 


PD Patrick Derichs replied to Muniappan Subramanian July 1, 2021 03:28 PM UTC

Thank you fopr you response. But unfortunately my problem is not solved yet. To show you from what I come from, here is a picture of the previous state.


old_state.PNG

Using you suggestions I managed to configure the GroupNames a I which. I'll use Comic Sans as demo in the new screenshot a the desired FontFamily. Using the TextInputLayout for the whole DataForm was not possible due to the checkbox, which does not supported. Therfore I set the Lyout of all other elements. Which still not behaving as desired it the actual text "Hello World" in the text-input field and the Label of the Checkbox input.

The usage of the TextInputLayout changes the design a little, but this if acceptable, maybe except for the CheckBox Label, which, beside the FontFamily does not quite match to the rest of the design. But I'll figure this out after having tzhe FontFamily in line.

current_state.PNG



MS Muniappan Subramanian Syncfusion Team July 2, 2021 12:32 PM UTC

Hi Patrick,  
 
Thank you for the update. 
 
We checked your requirement “Setting font family for "Hello World" in the text-input field and the Label of the Checkbox input”. You can achieve your requirement by customizing the label and editor in the DataForm. We’ve prepared the sample for the same. Please find the link below for the sample,  
 
Code Snippet: 
 
dataForm.RegisterEditor("Text", new CustomTextEditor(dataForm)); 
dataForm.RegisterEditor("Name", "Text"); 
  
public class CustomTextEditor : DataFormTextEditor 
{ 
    public CustomTextEditor(SfDataForm dataForm) : base(dataForm) 
    { 
    } 
    protected override void OnInitializeView(DataFormItem dataFormItem, Entry view) 
    { 
        if (dataFormItem.Name == "Name") 
        { 
            view.FontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf#Lobster-Regular", "Assets/Fonts/Lobster-Regular.ttf#Lobster"); 
        } 
 
        base.OnInitializeView(dataFormItem, view); 
    } 
} 
 
protected override View GenerateViewForLabel(DataFormItem dataFormItem) 
{ 
    if (dataFormItem != null && dataFormItem.Name == "CheckMe") 
    { 
        Label label = new Label(); 
        label.FontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf#Lobster-Regular", "Assets/Fonts/Lobster-Regular.ttf#Lobster"); 
        label.Text = "Check Me"; 
        label.FontSize = 10; 
        return label; 
    } 
 
    return base.GenerateViewForLabel(dataFormItem); 
} 
 
 
Please find the output for the same, 
 
 
Please refer below UG links to know more details about customization in SfDataForm, 
 
We hope that this helps you, kindly revert us if you have any concern.  
 
Regards, 
Muniappan S. 


Marked as answer
PD Patrick Derichs replied to Muniappan Subramanian July 6, 2021 08:03 AM UTC

Thank you very much. This suggestion in combination with the first one solved my issue.


MS Muniappan Subramanian Syncfusion Team July 6, 2021 10:53 AM UTC

Hi Patrick, 
 
Thank you for the update. 
 
We are glad that our solution meets your requirement. Please let us know if you need any further update. As always, we are happy to help you out. 
 
Regards, 
Muniappan S. 


Loader.
Up arrow icon