Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
325
How to reduce the width of a field when applying the EditorStyle to a Field
posted

public void Append_RefField(int no)
{
    var item = ModelCommonData.GetInstance.Reference.FirstOrDefault(x => x.No == no);
    if (item != null)
    {
        var field = new Field()
        {
            Width                        = FieldLength.Auto,
            Name                         = $"RefData{no}",
            Label                        = $"{item.Name} ({item.Unit})",
            DataType                     = typeof(double),
            AllowEdit                    = true, 
            Format                       = Datas.RefFormat,
            EditorStyle                  = m_view.TryFindResource("Stype_MaskedEditor") as Style,
            HorizontalContentAlignment   = System.Windows.HorizontalAlignment.Center,
            VerticalContentAlignment     = System.Windows.VerticalAlignment.Center,
        };


        var fieldSettings = new FieldSettings()
        {
            AutoSizeOptions = FieldAutoSizeOptions.All,
            AllowEdit       = true, 
            AllowSorting    = false,
            AllowSummaries  = false,
            AutoSizeScope   = FieldAutoSizeScope.Default,
        };

        field.Settings = fieldSettings;
        this.m_view.U_FieldLayout.Fields.Add(field);
    }
}

<Style x:Key="Stype_MaskedEditor" TargetType="{x:Type igEditors:XamMaskedEditor}">
    <Setter Property="Mask" Value="{}{double:4.2}" />
    <Setter Property="InvalidValueBehavior" Value="RevertValue" />
    <Setter Property="AcceptsArrowKeysInEditMode" Value="False" />
    <Setter Property="ValueConstraint">
        <Setter.Value>
            <igEditors:ValueConstraint MaxInclusive="9999.99"
                                       MinInclusive="0"
                                       Nullable="True" />
        </Setter.Value>
    </Setter>
    <Setter Property="ValueToDisplayTextConverter" Value="{StaticResource RefDisplay}" />
</Style>

I created a XamMaskedEditor using the EditorStyle property of the Field. The problem is that the field's width takes up too much space when editing. Is there a way to solve this issue?

  • 0
    Offline posted

    To reduce the width of a field with EditorStyle, you can adjust the field's CSS properties. Use width or max-width in your stylesheet or inline styles. For example:

    css
    Copy code
    .field-class { width: 80%; /* Adjust as needed */ max-width: 300px; /* Set a maximum width */ }

    Apply this style to the field to control its width effectively.

  • 34810
    Verified Answer
    Offline posted

    Hello,

    I have put together a sample based on the code you provided, but I cannot seem to reproduce the behavior you are seeing. I believe there is likely a setting that you have on the XamDataGrid that I cannot see from the code you provided. Perhaps you are setting XamDataGrid.FieldLayoutSettings.AutoFitMode to “ExtendLastField” in this case? This would lead to the behavior you are seeing.

    I also do not have your ValueToDisplayTextConverter “RefDisplay”, so I am unsure what that may be doing, but I am attaching the sample I put together in an attempt to reproduce the issue. It may be helpful if you can modify this sample and send it back such that it reproduces the behavior you are seeing. Alternatively, if you have an isolated sample of your own that you can provide, I will gladly take a look at that.

    Please let me know if you have any other questions or concerns on this matter.

    XDGMaskedEditorSizingDemo.zip