Style a TextIput

How-to Discussions
1

Hi,

I’d like to customise the text inputs in my app, for example remove the bottom stroke, how do I do this ?

2

The best way I found is using “TextEdit” then create a Class from it.

Here is the basic style of TextInput as found here : https://gist.github.com/kusma/f6094c3d55127c07fec2

    <TextInput
        ux:Name="_textInput"
        TextColor="0,0,0,1"
        Padding="0,0,0,16"
        Margin="8,8,8,8"
        FontSize="16"
        Font="RobotoRegular"
        >

        <Panel Layer="Background">
            <Rectangle Alignment="Bottom" Height="1" Margin="0,8,0,8" ux:Name="_dividerRect">
                <SolidColor ux:Name="_textInputDivider" Color="{Resource CLine}" />
            </Rectangle>
        </Panel>

        <ResourceBinding Target="_changeTextInputDividerFill1.Value" Key="C700" />
        <ResourceBinding Target="_changeTextInputDividerFill2.Value" Key="C700" />

        <WhileDisabled>
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInput.TextColor" Value="{Resource CLine}" />
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CLine}" />
        </WhileDisabled>

        <WhileFocusWithin>
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CFillFore}" ux:Name="_changeTextInputDividerFill1" />
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
        </WhileFocusWithin>

        <!-- do we really need this bit? -->
        <WhilePressed>
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CFillFore}" ux:Name="_changeTextInputDividerFill2" />
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
        </WhilePressed>

        <WhileFalse ux:Name="_placeholderText">
            <Text Width="100%" Height="100%"
                  TextAlignment="{Property _textInput.TextAlignment}" TextWrapping="{Property _textInput.TextWrapping}"
                  LineSpacing="{Property _textInput.LineSpacing}"
                  Font="{Property _textInput.Font}" FontSize="{Property _textInput.FontSize}"
                  Value="{Property _textInput.PlaceholderText}" TextColor="{Property _textInput.PlaceholderColor}" />
        </WhileFalse>

        <WhileContainsText>
            <Change _placeholderText.Value="true" />
            <Nothing Duration="0.05" />
        </WhileContainsText>

    </TextInput>
3

Yes, using TextEdit to create styled text inputs is the intended solution. TextEdit is meant to be a basic editor without any decoration (this also means no placeholder).