Evolved Fluent Design for controls - Autumn 2018 update onwards

[mdtauk]

I'm submitting a...

Question

Will controls be updated with respect to the new guidance suggested at Build 2018, in the addition and use of shadows and depth, as well as Acrylic materials for light dismiss content? I am thinking that DropShadowPanel, Menu, and InAppNotification will need updating.

• DropShadowPanel perhaps with a Depth value, so shadows by default can be consistent with the system.
• Menu will likely be subsumed by the System Control and WinUI library

[nmetulev]

Great question. I think they should. @JustinXinLiu, thoughts on this?

[JustinXinLiu]

I'd love to get some help from you on this one @mdtauk. But keep in mind that some of the stuff here (e.g. the new Shadow API on UIElement) are still in preview for RS5.

[mdtauk]

I kind of assumed that ThemeShadow would be in RS5 release. Also the MainMenu would probably move to the Windows UI Library. As would Hamburger Menu to NavigationView.

What kind of help were you wanting @JustinXinLiu

[JustinXinLiu]

We are thinking to refine and standardize the look of feel of all our controls, taking into account the new fluent design features. It will be a long process but we can start with some key controls first and the rest will just follow. I saw your design mockups from the past and thought maybe we can work together on this. :)

[mdtauk]

Ah ok sure, is be happy to help and contribute.

If ThemeShadow makes it to RS5, then the blade view will need to use it with a Z translation to bring the blades forward and overlapping. In App Notification should also use depth and shadow, but I guess you'll have to be guided by Edge's design thoughts.

Office seems to be contributing a great deal to fluent, so finding out what the shared approach is by those maintaining the Fluent design effort should lead your efforts in bringing the community controls into visual alignment

[mdtauk]

DockPanel, Master Detail View, ScrollHeader should probably all use ThemeShadow as well - they all involve multiple panes or layered UI.

Carousel and RadialGauge, are two controls that really feel out of place on an initial view. RadialGuage feels like a Windows 7/Metro/Silverlight control, and the 3D angle on Carousel as a default doesn't really fit either.

[mdtauk]

A quick initial idea for refreshing the BladeView...

[nmetulev]

This is really cool.

The panels on the left look like they are above the panels on the right, is that intentional (feels a bit odd)?

[skendrot]

I've wanted to use the layout transformer to rotate the title of items when collapsed. These mockups are great

[Odonno]

@nmetulev Yeah. I think too. My opinion on this is that the shadow should be managed by the user by letting him decide which blade has the focus and then apply a Z-index value on each blade, the shadow starts from the focused blade.

• In default mode, I think the last opened one has the focus (or the one which received an event like Click)
• In overlay mode, the latest has the focus
• In fullscreen, well I suppose there should be only one blade opened/focused

[mdtauk]

@Odonno @nmetulev The idea is just an initial one, to serve as an initial proposal. As each blade is sequential, and the first blade is set to not collapse, it felt right that each goes below the other in the "stack". but that is just as a default.

It would/could be possible to set a Vector3 Translate value on each blade manually, if you wanted them to be above others. (Z-index does not control the ThemeShadow, that relies on Translating the UIElement on it's Z axis)

AFAIK the control does not have the concept of an "active or focused" blade. I could be wrong of course. If it does, then changing the Translate value of the active blade to be higher would give it a more pronounced shadow.

With an "Active Blade", the Translate Z value could decrease by a pixel amount both forward, and back to the other blades, to ensure the shadows appear correctly.

@skendrot The Xbox 360 blades had rotated headers, and I think it is a better use of space, especially as a blade's contents hides when it is collapsed, but depending on the length of the header, it may not be obvious it has collapsed. Using the rotated text, and 40px width of the close and expand buttons, makes it much clearer IMO.

[nmetulev]

IMO, we should try to keep things simple and avoid adding new properties. I like what you have right now and it's a very good improvement over the current implementation. The shadow should be standardized and if someone wants to change it they can modify the template. My comments was mostly about the stacking order - it feels a bit more natural if new blades are on top