Field frame color on focus

[Joseph Cigno]

How do I set the frame color on focus to my primary color?  I can't seem to find that purple color anywhere.  Thank

[Vidyalakshmi Mani]

Hi Joseph,

  

Thank you for contacting us. You can customize the border color of the editor when it receives focus by using the FocusedStroke property in TextInputLayoutSettings. Here’s how you can set it:  

       

<dataForm:SfDataForm x:Name="dataForm"

                             LayoutType="TextInputLayout"

                             DataObject="{Binding LoginFormInfo}">

            <dataForm:SfDataForm.TextInputLayoutSettings>

                <dataForm:TextInputLayoutSettings FocusedStroke="Green" />

            </dataForm:SfDataForm.TextInputLayoutSettings>

</dataForm:SfDataForm>

For more details, please refer to our user guide documentation: Focused-stroke-color

We've also attached a sample demonstrating this for your reference.  

If you have any further questions or need assistance, feel free to reach out.  

Regards,

Vidyalakshmi M.

Attachment: MAUIDataForm_cbbe7ae4.zip

[Mike-E]

Hi Vidyalakshmi,

Can you please provide the color setting that is for the LayoutType="Default" ?  I have been hunting this down with very little luck:

I would recommend adding a "color guide" that shows how to configure each and every color of this very comprehensive yet complex control. 👍

Thank you for any consideration and assistance,

[Arul Jenith Berkmans]

Hi Mike,

Currently, you cannot directly set the editor stroke for the DataForm editor. However, you can achieve this by using a theme key specific to the DataForm control.

Here’s a simple code snippet for applying a color to the focused editor's stroke:

<ContentPage.Resources>

      <ResourceDictionary>

          <Color x:Key="SfDataFormFocusedEditorStroke">Red</Color>

      </ResourceDictionary>

  </ContentPage.Resources>

To learn more about available theme keys and how to apply them, please refer to the Syncfusion documentation:About Keys for Syncfusion® Controls | Syncfusion®

If you have any further questions or need assistance with theme customization, feel free to reach out.

Regards,

Arul Jenith B.

[Mike-E]

Hi Arul,

Thank you very much for that!  That does work.  However, now I have a different problem. :D  Currently we are assigning colors using the AppThemeBinding.  However, I cannot seem to do this for the color and results in the error seen below:

Are you aware of how to get the above working so that AppThemeBinding can work?

Additionally, we're trying to figure out the cursor's color:

I was hoping to find it in the list of color keys you provided but do not see it listed.  Do you know if this can be customized?

Finally while I have you (last one I promise :)), we're wondering how to modify the margins/padding for the below:

Thank you very much for any further assistance you can provide.  Your support is greatl

[Arul Jenith Berkmans]

Hi Mike,

 

Query 1: How to set the AppThemeBinding for the focused stroke by default

 

Currently, it is not possible to set the AppThemeBinding directly for a specific resource key in XAML. Instead, we recommend updating the color for the resource key based on the theme change using the RequestedThemeChanged event.

 

Here is simple code example:

 

XAML:

<ContentPage.Resources>

    <ResourceDictionary>

        <Color x:Key="SfDataFormFocusedEditorStroke"></Color>

    </ResourceDictionary>

</ContentPage.Resources>

 

C#:

 

  public MainPage()

  {

      InitializeCompone

      App.Current.RequestedThemeChanged += OnAppThemeChanged;

  }

 

private void OnAppThemeChanged(object? sender, AppThemeChangedEventArgs e)

{

    // Check current theme and toggle between Light and Dark

    if (e.RequestedTheme == AppTheme.Dark)

    {

        this.Resources["SfDataFormFocusedEditorStroke"] = Colors.Green;

    }

    else

    {

        this.Resources["SfDataFormFocusedEditorStroke"] = Colors.Red;

    }

}

 

Query 2: How to change the cursor color.

 

The Entry cursor color can be changed in a platform-specific manner. Below is a snippet to demonstrate how to change the cursor color in your Entry editor.

 

 public MainPage()

 {

     InitializeComponent();

     this.nonWorkingDataForm.ItemManager = new DataFormItemManagerEditorExt();

 }

 

 

    public class DataFormItemManagerEditorExt : DataFormItemManager

    {

        public override void InitializeDataEditor(DataFormItem dataFormItem, View editor)

        {

            if (editor is Entry entry)

            {

                entry.SelectionLength = 5;

                entry.TextTransform = TextTransform.Lowercase;

                entry.VerticalTextAlignment = TextAlignment.Center;

                entry.HandlerChanged += Entry_HandlerChanged;

            }

        }

 

        private void Entry_HandlerChanged(object? sender, EventArgs e)

        {

            var entry = sender as Entry;

 

#if ANDROID

 

            if (entry.Handler != null && entry.Handler?.PlatformView is AndroidX.AppCompat.Widget.AppCompatEditText androidEntry)

            {

 

                androidEntry.TextCursorDrawable.SetTint(Colors.Red.ToPlatform());

 

            }

#elif MACCATALYST || IOS

            if (entry?.Handler != null && entry?.Handler?.PlatformView is UIKit.UITextField iOSEntry)

            {

                iOSEntry.TintColor = UIKit.UIColor.Red;

            }

#endif

        }

    }

 

Query 3: How to modify the margin and padding for dataform.

 

You can set the Margin and Padding properties directly on the DataForm as needed for your layout requirements.

 

Thank you for your understanding.

 

Regards,

Arul Jenith B.

[Mike-E]

Hi Arul,

Thank you again for your excellent support, it is greatly appreciated.  You have answered the two first questions for me, thank you for that.  For the third question, please be aware that the image I provided earlier have both Margin + Padding set to 0 and there appears to still be padding as demonstrated.  Is there another setting I should be aware of to remove the area denoted by the red rectangles?

Thank you for any further assistance you can provide.

[Arul Jenith Berkmans]

Hi Mike,

 

You can modify the default padding for data form items by handling the GenerateDataFormItem event in both TextInputLayout and Default layouts. Below is a simple code snippet to achieve this:

 

<sfdf:SfDataForm x:Name="nonWorkingDataForm"

                     DataObject="{Binding Record}"

                     BackgroundColor="White"   

             GenerateDataFormItem="nonWorkingDataForm_GenerateDataFormItem"

                 LayoutType="TextInputLayout"/>

 

 

private void nonWorkingDataForm_GenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)

{

    if (e.DataFormItem != null)

    {

e.DataFormItem.Padding = new Thickness(0, 5, 0, 5);

    }

}

 

We have also attached a sample for your reference.

Regards,

Arul Jenith B.

Attachment: DataFormSample_3d1c00cf.zip

[Mike-E]

Hi Arul,

Thank you for your continued assistance and excellent support it is greatly appreciated. The suggestion for the padding worked a bit more, but I am still seeing extra spacing.  Please see the below Xaml and code behind:

This results in the following (note the red rectangles:

Is there another property that allows the control to be flush against the sides as the Hello World Button is?

Thank you for your continued assit

[Kamalesh Periyasamy]

Hi Mike,

Query 3: Extra Padding Visible for DataForm items: 

 
For better follow-up, we have created a new thread under your account for the reported query "Unexpected Extra Padding Visible Despite Margin and Padding Set to Zero in Layout". Please use the link below to track further updates on this query. 

  

Forum Link: 197096 

  

Please let us know if there are any other concerns or queries. 

Regards, 

Kamalesh P 

[Mike-E]

Thank you very much for that, Kamalesh.  It is appreciated. 🙏