Float Labels and Text help Material Design


how I can do this?


-Float Label

-Text Help

-Style Inputs Errors

video extracted from: https://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields


Great question, making a float label should be easy in UX. Have a look at this example:

<App Theme="Basic">
    <StackPanel Alignment="VerticalCenter" Width="75%" >
            <TextEdit ux:Name="_textEdit" >
                <StateGroup Active="idle" ux:Name="_stategroup" >
                    <State ux:Name="idle" />
                    <State ux:Name="active" >
                        <Move Target="_placeholder" RelativeTo="Size" Y="-1" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
                        <Change Target="_placeholder.TextColor" Value="#f00" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
                    <Change _stategroup.Active="active" />
                    <WhileContainsText >
                        <Change _stategroup.Active="active" />
            <Text ux:Name="_placeholder" Value="Placeholder" TextColor="#555" />
        <Rectangle Layer="Background">
            <Stroke Offset="2">
                <SolidColor Color="#000" />

I hope this helps :slight_smile:

Do you have an example for what you mean by Text Help and Style Inputs Errors?

Probably there are API changes to fuse.

@Sanket: yes, that snippet shows deprecated code.

You might find this repository useful: Fuse.MaterialDesign