Microsoft-ui-xaml: Question: Is possible to implement with current version of the NavigationView like the Microsoft Store Style in Build 2017?

Created on 16 Oct 2020  路  4Comments  路  Source: microsoft/microsoft-ui-xaml


I would like to implement like that way, because for NavigationView with PaneDisplayMode set to Top, I prefer hidding some itens and show others instead the current Hierarchical behavior and honestly, I love how the animations and items respond in each context. Sorry if have any documentation with code sample, but I tried to search and I didn't find it, just only a sample in the presentation in the Build 2017 at 37:04 in the video below. Thanks for the attention.

https://www.youtube.com/watch?v=olNj4l0vxQU&feature=youtu.be&t=2205

image

area-NavigationView question team-Controls

All 4 comments

@marck7jr simply setting the navigation view's PaneDisplayMode to top will give the layout that is being presented in the youtube clip you linked. If you are concerned with the over flow menu, which is when there are too many items to show in your navigation view and we end up showing a more button with the rest of the items in a drop down, you can see that store also does this at the 38:33 minute mark in that video.

Hierarchical navigation view only occurs when your navigation view items contain other navigation view items, so to avoid that look just avoid that scenario.

If your trying to get the affect where the items change when the home item is selected, I believe store is achieving that by changing the navigation view's item source when the home button is clicked to a different collection.

I'm going to close the question, but if this didn't answer it feel free to post again and I'll reopen.

Thanks @StephenLPeters I suspected that the implementation would be like this, but I was worried about the animations that, how I said, they are so good, but I think that with the implicit animations I can do something similar. So again, thanks for support.

Thats right, I think that store acheived these animations using implicit animations. Unfortunately I think it would be hard to dig up the specific implementation used in this demo... :/

Was this page helpful?
0 / 5 - 0 ratings