Windowscommunitytoolkit: Control to guide user

[Odonno]

I know there is some negative feedback at the moment with notification/popup control but I think it was a pretty good initiative with the first release of the W10 OS (like how to use Edge, Cortana, etc..).

I don't know precisely if it is or will be integrated in the UWP SDK but my goal is to add the controll you can see in the picture below :

If we (as a developer) can offer some guides to the user in our own application, it could be interesting to have some interesting tools at different moment :

• the FlipView (like in Word/Excel/PowerPoint Mobile) that give user a first start of the entire application
• the Popup? that give user some indication in the app in a precise scenario (like when discovering a page the first time or when a new feature has been delivered)

PS: I do not know if that control follow or not the guidelines provided by Microsoft. If not, please tell me.

[tibitoth]

I think we need to think more generic. I could accept something advanced flyout management (with behaviors or attached properties) but I would not make it tight to this use-case.

https://mareinsula.wordpress.com/2015/12/02/advanced-flyouts-for-uwp-windows-10/

[bkaankose]

Storyboarding is always a much needed thing to have. I'd like to see some kind of a attached property to show little flyouts for which control is doing what. I also prefer having advanced flyouts like @totht91 mentioned above but I do not know if advanced flyouts should being used for this purpose.

And if we are going to develop sth like this, it should be easily order managable. Nobody wants to see all hints at once. Regarding this attached properties are not looking a good option to be honest.

[deltakosh]

Hey!
We are about to open an UserVoice for idea submissions. I'll keep you posted

The plan is to use UserVoice to evaluate which controls/features to develop (based on most voted ones)

[deltakosh]

Hey @Odonno !
In order to evaluate if a feature can be added to the toolkit we created a new category on WPDEV Uservoice: https://wpdev.uservoice.com/forums/110705-universal-windows-platform?query=Control%20to%20guide%20user

Can you please create an entry for your idea? based on upvote we will be able to know if this is something we can add to the toolkit!
Thank you very much

[Odonno]

Done.

https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/17903386-control-to-guide-user

[deltakosh]

Thanks!

[Odonno]

@nmetulev Based on a recent discussion, do you think it is possible to create a custom Style for InAppNotification and using your implicit animations helper to mimic this component? (see image in first post)

[nmetulev]

We could probably just add a property on the InAppNotifications to anchor the notification to a specific element, so it shows up next to it, and that should do it

[touseefbsb]

@nmetulev the uservoice entry has already been deleted so I think this issue should also be closed. what do you think?

[Odonno]

IMO, this control is still valuable but not sure how many people would use it.

This control is still used by the Windows team. I got one these notifications recently that guided me to install the Language Community Insiders app.

[touseefbsb]

yes @Odonno the control really is useful. if windows team uses this, then I think tht should be enough proof that this will be a useful control. the more options we have the more creative ideas we can generate for the apps. so at the end every control gets used.

[nmetulev]

I think there is still an opportunity to extend the InAppNotifications to support this scenario. All it would be take is to update the style and specify an element and location (left/right/up/down). @touseefbsb, how do you feel about implementing it?

[touseefbsb]

@nmetulev are u suggesting its implementation sort of like a tooltip? Then yes I agree with you that is a simpler and more clean way to do it, we can just have a modifield inappnotification, and maybe name it control notification because it can be attached to any xaml control with a custom datatemplate, and positioning can be defined with a property as well, also maybe an optional drop shadow panel? ( but that can also be added in the datatemplate I guess) but another important feature for this in my mind is the animation, should there be some sort of optional animation ( fade, scale, etc ) which controls the appearing and disappearing of this popup? because as per fluent design roadmap it is one of those controls which should draw attention towards it with reveal, acrylic and animations etc.

[Odonno]

@touseefbsb Not sure if we can simply restyle the InAppNotification and make it look exactly like the original version. But @nmetulev is right that we will need two properties TargetElement and TargetLocation to be able to put this notification at the right place.

About the animation, I think it is only a Scale animation for the moment (the rectangle collapse and after that the little triangle collapse too). But of course, devs will want it to work with other Fluent Design style like Acrylic or Reveal and maybe other animation style.

[touseefbsb]

@Odonno yes tht is why I think it should follow the fluent design rules, specially bcz it is an interactive element in the app. it doesnt need to look exactly like original version, we just need a standard style to do the job which is generic enough for everyone to use, if we cant restyle, then we can just make a new control following some principles of the inappNotification and add other new ones as per requirements. I would also consider adding an optional Element.Sound ( as we have sound in any notification ) this sound will specially be helpful in xbox but this all depends on whether this control can be attached to any xaml control ( like a tooltip/flyout ) or will we be doing it is inappnotification way, where it is completely different control and appears on request.

[michael-hawker]

I like the idea of extending InAppNotification to do this. If you look at the new VS Code notifications, they're a bit of a hybrid of this too now. So, it could give us the option to add some more functionality to the existing InAppNotifications and add some additional style options.

[lucaasrojas]

What's the current status of this issue?

[michael-hawker]

Going to close this as the control team is adding Teaching Tip which I think covers this issue.

[SavoySchuler]

Thanks for the shoutout, @michael-hawker! TeachingTip is now available via prerelease and the drafted guidance is available here. Since this is the prerelease phase, we are still working on improvements and hunting bugs so please let me know if you have any issues or feature requests!