Windowscommunitytoolkit: Animated Headered TextBox

[sonnemaf]

I would like to add a AnimatedHeaderedTextBox control to the Toolkit. Are you interested?
I can add only a style + behavior or create a custom control for it. What do you prefer?

See:
https://reflectionit.nl/blog/2017/xaml-animated-headered-textbox-style
https://reflectionit.nl/blog/2017/xaml-animated-headered-textbox-style-part-2

There are 9 UserVoice votes for it: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/34571071-animated-headered-textbox

[nmetulev]

This seems like a duplicate of #424. This scenario is very cool but IMO it doesn't fit in the toolkit as a control. I'd optimize for building helpers to enable developers to build cool animation scenarios like this vs building complete styles. Thoughts on this @JustinXinLiu?

[Vijay-Nirmal]

@nmetulev We can have a HeaderedTextBox control with a property to turn on/off the animation.

[JustinXinLiu]

The TextBox control has already got a Header and HeaderTemplate. But I wonder if we should start thinking about creating extended controls for enabling additional features.

Imagine a ToolkitTextBox that would allow you to do this, a ToolkitTextBlock would allow you to fade/offset/scale new/old text, and a ToolkitButton with animated shadow and icon support...

Behaviors and attached properties can make something happen, but when they are not part of the control, it's hard to discover and also hard to write.

[sonnemaf]

Must the HeaderedTextBox/ToolkitTextBoxhave it's own custom template or use the default TextBox template?

How would you implement the animation in the control? My current implementation uses Style/Template with an extra VisualStateGroup named HeaderStates with states Empty and NotEmpty.

Extending the TextBox, TextBlock, Button controls might cause a maintenance problem when the templates of these controls change.

[touseefbsb]

@JustinXinLiu I love the idea of ToolkitButton with animated shadow and icon support, a big encouragement for fluent design in my opinion :)

[JustinXinLiu]

@sonnemaf Keep in mind that in some cases, you might need to consider adding the ability to change the font size of the header in two different states too. So I wouldn't recommend using RenderTransform here since it's hard to control the position and size of the _same_ element.

I would create two header TextBlocks and let the Connected Animation API to handle the transition. You will also get the new curved motion for free.

But if you want to do this now, you will have to write it in code as the toolkit's xaml version only works with Pages.

[sonnemaf]

@JustinXinLiu I understand why I shouldn't use a RenderTransform animation in a Visual State. I would have to code a connected animation in the ToolboxTextBox class. But this would block the possibility to modify the animation in a custom template. Is that bad?

[JustinXinLiu]

Given it's already a very specific animation scenario, I wouldn't worry about that too much. However, if you want to make it customizable, you can try using the connected animation markups in XAML so if people don't want it, they can just get rid of it from XAML.

[Kyaa-dost]

@sonnemaf is this still applicable to the toolkit?

[mdtauk]

This does feel like it is stepping on the toes of Material Design.

If something like this was introduced, maybe there should be a holistic approach for all headers on all controls?

[sonnemaf]

@mdtauk I agree with this. It should be a solution for all input controls.

@Kyaa-dost I don't think we should add this to the toolkit. It is a niche thing. Fluent Design doesn't have any guidelines for this. Maybe we can better close this issue.

[Kyaa-dost]

Thanks for the insight @mdtauk and @sonnemaf!