Review generated pages redlines and guidance as per design team requests

[mvegaca]

Action Plan:

• [x] Adapt NavView
• [x] Adapt Blank page
• [x] Adapt WebView
• [x] Adapt Media Player
• [x] Adapt Master/Detail
• [x] Adapt Telerik DataGrid
• [x] Adapt Datagrid
• [x] Adapt Settings
• [x] Adapt Chart
• [x] Adapt Tabbed
• [x] Adapt Map
• [x] Adapt Image Gallery
• [x] Adapt Ink Pages
• [x] Adapt Camera

[ralarcon]

Moving to backlog to better plan when to do this review (we don't have explicit request from design team to do a full the design review)

[crutkas]

we're literally doing this right now.

[sibille]

We got a design review from the fluent team and will adapt the NavView and pages accordingly:

• NavView:
  • Align title with back button
  • Give possiblity to customize header by page
• Blank page:
  • Change margins to 24 l/r margin
• WebView
  • Hide title
• Media Player
  • Hide title
• Master/Detail
  • Hide NavView Title
  • Add title to master list (14px bold)
  • Content area margin 52 px 
  • Change master lists background color 
  • Change master and detail styles 
• Telerik DataGrid
  • Change margins to 24 l/r margin
• Datagrid
  • Change margins to 12 l/r margins
  • Change background color
  • Show gridlines
• Settings
  • Change margins to 24 px l/r margin
  • Changed text and radio button styles 
• Chart
  • Change margins to 24 px l/r margin
• Tabbed
  • Change margins to 24 px l/r margin
  • Change pivot tab header style
• Map
  • Hide title
• Image Gallery
  • Change margins to 24px l/r margin
  • Change picture size
• Ink Pages
  • Custom header with separate ink toolbar and command bar with white background 
• Camera
  • Hide title
• Adaptive GridView
  • Change margins to 24px l/r margin
  • Change background color of items

You can see design and implementation details in this PoC project. FluentDesignReview.zip

To hide/customize the NavView Header depending on the selected page we use a custom NavViewHeaderBehaviour.

Also updated action plan in the first comment of this issue.

[crutkas]

great job on the alignment!

[mdtauk]

It is good to see there is some effort to bring more consistency to Windows apps, even in a (semi)external toolkit of controls, templates etc.

It would be neat if the Fluent Design teams could make these red-lines and other specific guidance publicly available online in as much detail as Google does with its Material Design system. There are docs, and some toolkits (even if many are out of date) but they are not presented in an ideal way for those designers who are not as code and programming focused.

[crutkas]

@mdtauk great feedback.

[sibille]

We're facing an issue in the NavViewHeaderBehaviour with CodeBehind. X:Bind is not working in the DataTemplate when HeaderContext is set to a Page.

Possible workarounds would be:

• Bind to a HelperClass
• Not setting HeaderContext and use binding instead of x:bind.

I've attached a solution where you can see the problem and the workaround: App1.zip

• App1_XBind_Page: This project shows the problem, binding seems to work fine, but value is not shown.
• App1_XBind_Helper: Solution 1: Bind to a HelperClass
• App1_Binding: Solution 2: Use Binding instead of xBind
• App1_ContentPresenter: This project shows what we suspect is the underlying problem, a ContentPresenter with Content bound to a page does not resolve bindings in ContentTemplatecorrectly, a ContentPresenter with content bound to another class does.

[sibille]

Scheme Activation Page texts are not aligned with the header

[sibille]

Verified in dev-nightly: Templates version: 0.19.18318.2 Wizard version: 0.19.18318.1