Windowscommunitytoolkit: Improvements on in-app notifications

[Odonno]

• [x] Add events Opened/Opening/Closed/Closing
  
  
  
  • [x] Add details on EventArgs (user action or timeout)
  
  
• [x] Show/Hide from XAML
• [x] Ability to change animation/transition - Change animation type to fly-in (and/or allow custom animations, I could see Fade being wanted)
• [x] Ability to control animation speed
• [x] Export styles so devs don't have to copy them in their project
  
  
  
  • [x] Export default styles (MS Edge, VSCode)
  
  
  • [x] Write documentation that explain where/how to add new styles in the Toolkit
  
  
• [x] Fix bugs #1415
• [x] Options to render multiple notifications (replace, stack above or queue behind?)

cc. @cbarkerms @michael-hawker

[mdtauk]

With the animation to display the in app "toast" - could you not work with Windows.UI.Xaml.Media.Animation.Transition so the user can change the animation using the existing system transitions?

[Odonno]

@mdtauk Good idea. But what is the default transition I should use? PopupTransition (https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.animation.popupthemetransition) or EdgeUITransition (https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.animation.edgeuithemetransition)?

[Vijay-Nirmal]

A property to set the Top/Bottom spacing to show the notification little below the Top/Bottom line. The animation should look like the content is coming from Top/Bottom Line.

[michael-hawker]

@Vijay-Nirmal it could just be a singular margin property combined with a positional element like the toastr option.

[nmetulev]

You could already add margin to it, not sure if a new property is needed

[michael-hawker]

@nmetulev we should add a margin in the sample app example ;). Luckily I can test it out quick for myself now, it worked great!

I guess @Vijay-Nirmal's point though was to allow for an animation as a fly-in vs. the stretch we have now.

[Vijay-Nirmal]

@nmetulev With stretch animation, the notification doesn't look like notification when it has a margin (See the gif below). @michael-hawker got my point, the animation should be fly-in. Notification should come from Top/Bottom, not from middle

[nmetulev]

Got it, that makes more sense

[mdtauk]

@Odonno I don't know what the default should be, if the intention is for the notification to hug the edge UI, then Edge Transition makes sense, but it depends on the recommended placement is for the control, and what is flexible with distance from a known edge etc.

[Odonno]

@Vijay-Nirmal @michael-hawker Seems like you are refering to the animation. I think that's close to what @mdtauk is suggesting with animation/transition by giving devs the ability to change it.

[nmetulev]

Right now, you can change the animation by re-templating:

https://1drv.ms/v/s!AjZLNGpIZBbgr69nAMdDAruOySR-NA

[michael-hawker]

@nmetulev maybe it'd be good to show that in one of the example templates?

[nmetulev]

I created a gist for reference

[Odonno]

I tried using PopInThemeAnimation and EdgeUIThemeAnimation but it did not work as expected. I tried @nmetulev example and it works like a charm. I will create Properties for Offset and Duration of the animation based on this method.

[Raamakrishnan]

@Vijay-Nirmal The original implementation that you are referring to was built using PopupThemeTransition (cc: @Odonno) with vertical offset. It had a separate grid used as a container to show multiple notifications. As each notification was added, the Transitions were shown.
I think In-App notifications should evolve in the container based approach to better support multiple notifications.

[tibitoth]

another idea: multiple notifications stacks like in visual studio code

[Odonno]

@Raamakrishnan @totht91 Good idea. I think it should be an option for the Host container because Microsoft Edge allow multiple notifications (they are on top of each other, like playing with ZIndex) and VSCode shows them as a StackPanel.

[Raamakrishnan]

@Odonno Yes, that would be the best. Along with options to control how a new notification behaves with an existing one: replace, stack above or queue behind.

[CabuxaMapache]

@Raamakrishnan Totally agree with that, stack notifications in mobile can be a really bad idea, there must be option to control that behavior.

[nmetulev]

Looks like most items are now completed. :)

From the two that are left, I'd like to see the stacking notifications.

Not sure about the show/hide from XAML, how would that work?

[Odonno]

@nmetulev The Show/Hide from XAML won't be done. It was a request from @michael-hawker to be able to call the Show method from XAML using TriggerBehavior. But the thing is that I set an optional parameter duration = 0 and not sure why the TriggerBehavior is not able to call the method without parameter.

The only task remaining is the stacking of notifications.

[nmetulev]

Sounds good to me :)