Making an easy-to-hit TextInput

Show and Tell
1

I’ve found myself struggling with styling the TextInput and trying to make it “easy to hit”. By default, only when you click specifically inside of the editable area of the TextInput, it gets the focus and on-screen keyboard pops up.

Now, knowing that TextInput is actually a DockPanel and you dock your specific styling things inside of that, I deduced that I could specify a HitTestMode and use a <Clicked> trigger to make it behave nicely…

<TextInput HitTestMode="LocalBoundsAndChildren" Height="50" FontSize="16" ux:Name="MyInput" PlaceholderText="...">
    <Clicked>
        <GiveFocus Target="MyInput" />
    </Clicked>
    <WhileFocused>
        <Rectangle Dock="Bottom" Fill="#5184e5" Height="2" />
    </WhileFocused>
    <WhileNotFocused>
        <Rectangle Dock="Bottom" Fill="#ddd" Height="2" />
    </WhileNotFocused>
</TextInput>

And voilá, the whole height of the TextInput now accepts clicks and focuses the input.

2

To enhance Uldis’s awesome snippet, you could seperate it as a component by defining a ux:Class instead of ux:Name on the parent, like such:

<TextInput ux:Class="TI" HitTestMode="LocalBoundsAndChildren" Height="50" FontSize="16" PlaceholderText="...">
        <Clicked>
            <GiveFocus Target="this" />
        </Clicked>
        <WhileFocused>
            <Rectangle Dock="Bottom" Fill="#5184e5" Height="2" />
        </WhileFocused>
        <WhileNotFocused>
            <Rectangle Dock="Bottom" Fill="#ddd" Height="2" />
        </WhileNotFocused>
</TextInput>
3

Well done all, these examples are clean, nice, and idiomatic :slight_smile: