Stroke position does not move according to TextView bottom pos

How-to Discussions
1

I am struggling to figure out how to make the stroke (line) underneath the TextView to follow along as the content of the TextView grows. It can be seen from the following video:

The following is my main ux (you can ignore the icon by commenting it out).

<Grid RowCount="1" ColumnCount="2">
	<Rectangle Row="0" Column="0" Alignment="TopRight">
		<mob.IconAccount Font="Icon" />
	</Rectangle>
	<Rectangle Row="0" Column="1">
		<mob.MDTextInput TargetField="_placeholder"></mob.MDTextInput>
		<mob.RegularLabel ux:Name="_placeholder" Value="Username"/>
		<mob.MDTextInputLine ux:Name="_line" />
	</Rectangle>
</Grid>

The following is my mob components.
mob.MDTextInput

<TextView ux:Class="mob.MDTextInput" Font="Regular" FontSize="14">
    <Text ux:Dependency="TargetField" />

    <StateGroup Active="idle" ux:Name="_stategroup">
        <State ux:Name="idle" />
        <State ux:Name="active">
            <Move Target="TargetField" RelativeTo="Local" Y="-20" X="-0.01" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
            <Change TargetField.TextColor="#b8b8b8" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
            <Change TargetField.FontSize="12" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
        </State>
    </StateGroup>
    <WhileFocused>
        <Change _stategroup.Active="active" />
    </WhileFocused>
    <WhileNotFocused>
        <WhileContainsText>
            <Change _stategroup.Active="active" />
        </WhileContainsText>
    </WhileNotFocused>
</TextView>

mob.RegularLabel

<Text ux:Class="mob.RegularLabel" Color="#484848" Font="Regular" FontSize="14" />

mob.MDTextInputLine

<Rectangle ux:Class="mob.MDTextInputLine" MaxHeight="2" LineColor="#33cc99" Offset="0,12">
    <string ux:Property="LineColor" />
    <Stroke Width="2" Color="{ReadProperty LineColor}" />
</Rectangle>

I am not sure why it cannot keep up with the TextView field.

2

Hi,

that is so because you’re putting everything inside Rectangles without a good reason.

If you change a part of the upper snippet to this:

<DockPanel Row="0" Column="1">
	<mob.MDTextInputLine ux:Name="_line" Dock="Bottom" />
	<mob.MDTextInput TargetField="_placeholder"></mob.MDTextInput>
	<mob.RegularLabel ux:Name="_placeholder" Value="Username"/>
</DockPanel>

then the line sticks to the bottom of the input just fine. I don’t think the change alone achieves exactly what you’re after, but I hope you can fix the rest by yourself.

The Layout section in our docs explains all the layout basics, do give it and its sub-sections a read!

3

Hi Uldis. Thanks for the tip. I ended up using Height or MinHeight and TextWrapping=“Wrap” for the TextView. I think wrapping was the issue.