New Animations to create PopUp effect

[Vijay-Nirmal]

I came across this question in StackOverflow. It seems it is very difficult to create a PopUp effect. I have answered his question but it is only for selection changed. It would be nice if we create an animation for PopUp effect when PointerOver. It would be cool addition to Fluent Design Language

1. PopUp should overlay all other controls
2. PopUp should have DropShadow effect to show depth.
3. PopUp should have two modes. One is for PointerOver and another is for manual(using Start())
4. PopUp should have groups(Like RadioButton). When one item PopUp, old PopUp item should PopOut.
5. Option to darken all controls except PopUp item.

There are many use cases for this. If we keep this for Hamburger Menu Items then it would look cool. I think it is a must feature for Fluent Design Language.

[JohnnyWestlake]

The most difficult thing here is the Z-Indexing, I can't think of a way to do that generically that will also cover most use-cases (and stop itself getting cropped by over-eager ScrollContentPresenters and whatnot)

We can of course make a limited use-case version but that's less exciting.

In the case of Fluent Design Language though, I think reveal highlights are nicer anyway (perhaps coupled with some subtle internal zooming or motion)

[Vijay-Nirmal]

@JohnnyWestlake
What about duplicating ContentPresenters and overlay the new item in front of original?

We can of course make a limited use-case version but that's less exciting.

Agree, Because mostly developers will use this in ListView or GridView.

I think reveal highlights are nicer anyway

This effect in Hamburger Menu Items is an example.

[touseefbsb]

yeah popup in navigation menu or even Pivot headers will be very effective and user friendly and will make fluent design even more attractive for the user and for the developer. we should definitely make a generic animation for this purpose.

[nmetulev]

Not sure what I think about this one. For example, as @JohnnyWestlake has pointed out, fluent design defines light as one way to focus on items and draw attention, not pop up. It's a cool animation, but not sure if its something that needs to come with the toolkit, vs developers consciously building it for their apps where it makes sense for them.

[Odonno]

@nmetulev From what I read/saw, Reveal experience will not only be limited to Light but they are working to bring Depth too.

Moreover, I can see there is a sample in the UI Dev labs. Chec kthe source code here https://github.com/Microsoft/WindowsUIDevLabs/tree/831b879459e83dede4249a909612c7c2d29b3f64/SampleGallery/Samples/SDK%2014393/LayerVisual

[touseefbsb]

@Odonno I know that I am no expert but I haven't been able to use much of the samples on dev ui labs because majority of them use a custom control composition image and I cant even find its Style XAML file. So I don't know how I can apply same effects to my use case of grid View and listview scenarios with data templates which have more than just images. Also the Layer Visual also uses just grids and rectangles to show the effect and not any gridview so once again this samples isn't as helpful as it appears to be

[Odonno]

@touseefbsb I checked the samples and I found this particular one. It looks closely to what you expect and I know it does not use ListView/GridView. I don't see why it would not work but I suppose you can reuse the work by creating Scale animation and by handling PointerEntered and PointerExited events.

[touseefbsb]

it will work but it will not scale the entire grdiviewItemm because of the boundaries it has which was the original problem from the first place. it only scales the content within the gridviewItem, and that scaling remains within the item and the item itself doesn't scale

[Vijay-Nirmal]

@nmetulev Developer can use this animation in other places also Like to show a large Image in Carousel or in AdaptiveGridView and in many other places. Even it can be used to notify user Like "before Click this You should Click that(that item should PopUp to highlight that item)".

As for As I know the PopUp effect is a very basic effect. So it can be used in many cases.

[touseefbsb]

I agree with @Vijay-Nirmal if its generic it will be very useful in a lot of use cases

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[touseefbsb]

actually we are still waiting for this feature to be included in uwp community toolkit

[Odonno]

@touseefbsb But it seems we need help to figure out how to make this animation work.

[Vijay-Nirmal]

@Odonno Is it possible to copy the element to a flyout and scale the size of it?

[touseefbsb]

@Odonno Yes I know community together should contribute to make this animation work. I posted this question a while ago because I thought it will help everyone, but so far I havent been able to come up with an ideal solution.

[Odonno]

@Vijay-Nirmal Maybe. Would have preferred a native 3D animation.

[Vijay-Nirmal]

@Odonno "native 3D animation" 😲 Is it possible in UWP?

[nmetulev]

I have to admit, I am not convinced this fits in the toolkit. @Vijay-Nirmal answer on SO is perfectly reasonable for anyone that wants to do this. The toolkit should continue enabling developers to build cool experiences such as this by providing tools and helpers (such as the AnimationSet api used in the answer or the new composition XAML helpers in #1567), but leave specific implementation like this up to each developer.

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 7 days if there is no activity.