Visual State Manager - Material TextField

[seanjaeger73]

I am attempting to change the border thickness on visual state Focused for the Material TextField input. This works as an inline style and even a contentview resource placed in the resourcedictionary... but if I place this in the "Styles.xaml" as key'd or unkey'd, the application crashes with the following error:

[mono-rt] [ERROR] FATAL UNHANDLED EXCEPTION: Microsoft.Maui.Controls.Xaml.XamlParseException: Position 12:37. Type converter failed: Exception has been thrown by the target of an invocation.
[mono-rt]  ---> System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
[mono-rt]  ---> Microsoft.Maui.Controls.Xaml.XamlParseException: Position 76:37. The PropertyName of TextField.BorderThicknessProperty is not BorderThickness

This is the setter I am trying to use:

    <Style TargetType="material:TextField">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList x:Name="CommonStates">
                <VisualStateGroup>
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BorderThickness" Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="BorderThickness" Value="2" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

Any help would be appreciated.

[enisn]

You're right, because the name of the BorderThicknessProperty is defined as BorderColor by mistake. I'll create an issue and fix it ina patch version

https://github.com/enisn/UraniumUI/blob/cc982f9e435626f258632060af9d30a0ab41e643/src/UraniumUI.Material/Controls/InputField.cs#L382C16-L382C27

[seanjaeger73]

I was finally able to implement the border thickness after the fix applied. Unfortunately, any thickness set greater than 1.2 or so messes up the floating label:

Is there another style that I can set to increase left padding on the floating label?

Thank you,
Sean

[enisn]

Hi, calculations doesn't include border thickness parameter, I'll add border thickness parameter to the algorithm.

Until then, as a workaround you can target to Labels inside TextField with Cascading Styling and set Padding for it:

        <Style TargetType="material:TextField">
            <Setter Property="uranium:CascadingStyle.Resources">
                <ResourceDictionary>
                    <Style TargetType="Label">
                        <Setter Property="Padding" Value="20,0,0,0" />
                    </Style>
                </ResourceDictionary>
            </Setter>
        </Style>

[seanjaeger73]

Thank you @enisn - I was able to get the border thickness to update on focus as shown in the screenshots, but now there is a large gap to the right of the label that varies textbox to textbox:

I tried a few different styles but could not find one that made any difference.

Thank you,
Seab

[enisn]

Resolved by #574

It'll be released in the next v2.8 release soon