hello there,
I was trying to create a material design text input component. I added in the animation on focus and un-focus, however it doesn’t behave as expected.
on focus, label text should float and change color to yellow - this is working expectedly
on lose focus, if contains text, label text should float and change color to yellow - this is working expectedly
on lose focus, if doesn’t contains text, text label should move back to it’s origin position and change color to black - this is not working as expected
Any idea on how to achieve this?
Code snippets - https://drive.google.com/open?id=0BxujkUcSRVkbZzdOZkpBYWdNUmM
Uldis
June 5, 2017, 2:09pm
2
Hi Kencana,
it seems you’re missing the difference between Set
and Change
. In this case, you would need to deviate from the rest state, and only do that in one single case. Here, I’ve made changes to your MaterialTextInput.ux
to make it work as you would expect it to:
<Panel
Height="40"
Margin="0,0,0,20"
IsPassword="false"
AutoCorrectHint="Default"
AutoCapitalizationHint="None"
ActionStyle="Default"
InputHint="Default"
Value=""
ux:Class="MaterialTextInput">
<!-- properties -->
<FileImageSource ux:Property="Icon" />
<string ux:Property="PlaceholderText" />
<bool ux:Property="IsPassword" />
<string ux:Property="AutoCorrectHint" />
<string ux:Property="AutoCapitalizationHint" />
<string ux:Property="ActionStyle" />
<string ux:Property="InputHint" />
<string ux:Property="Value" />
<!-- end of properties -->
<Text
ux:Name="inputLabel"
Y="10"
FontSize="14"
Padding="0,0,0,10"
Color="#000000"
Value="{ReadProperty PlaceholderText}">
<Tapped>
<GiveFocus Target="textInput" />
</Tapped>
</Text>
<StateGroup
Transition="Exclusive"
ux:Name="stateGroup" Active="active">
<State ux:Name="active">
<Change inputLabel.FontSize="12" Delay="0.1" />
<Change inputLabel.Color="#fbc02c" />
<Change inputLabel.Alignment="Top" />
<Change inputLabel.Y="-10" Duration="0.1" Weight="1" Easing="CubicInOut" />
<Change inputBg.Visibility="Visible" Delay="0.1" />
<Change inputLine.Color="#fbc02c" Delay="0.1" />
<Change inputBg.Height="40" Duration="0.1" Weight="1" Delay="0.1" Easing="CubicInOut" />
<Change inputIcon.Opacity="1" Delay="0.2" />
</State>
<State ux:Name="inactive">
<Set inputLabel.FontSize="14" />
<Set inputLabel.Color="#000000" />
<Set inputLabel.Alignment="Bottom" />
<Set inputLabel.Y="0" />
<Set inputBg.Visibility="Hidden" />
<Set inputLine.Color="#000000" />
<Set inputBg.Height="0" />
<Set inputIcon.Opacity="0" />
</State>
</StateGroup>
<Rectangle
ux:Name="inputBg"
Width="100%"
Alignment="Bottom"
Layer="Background"
Height="0"
Visibility="Hidden">
<TextInput
ux:Name="textInput"
Alignment="Left"
Width="83%"
TextColor="#000000"
CaretColor="#fbc02c"
PlaceholderColor="#af861f"
IsPassword="{ReadProperty IsPassword}"
AutoCorrectHint="{ReadProperty AutoCorrectHint}"
AutoCapitalizationHint="{ReadProperty AutoCapitalizationHint}"
ActionStyle="{ReadProperty ActionStyle}"
InputHint="{ReadProperty InputHint}"
Value="{Property Value}">
<WhileNotFocused>
<WhileContainsText Invert="true">
<Change stateGroup.Active="inactive" />
</WhileContainsText>
</WhileNotFocused>
</TextInput>
<Image
ux:Name="inputIcon"
Opacity="0"
Source="{ReadProperty Icon}"
Width="20"
Height="20"
Margin="20,0,20,0"
Alignment="Right"/>
</Rectangle>
<Rectangle
ux:Name="inputLine"
Row="0"
Column="0"
Alignment="Bottom"
ColumnSpan="2"
Height="2"
Color="#000000">
</Rectangle>
</Panel>