Sample App Fluent Design & Dark Theme #1755

WilliamABradley · 2018-01-21T03:01:05Z

Issue: #1539

Add Dark Theme to Sample App.
Add Toggle to switch between Themes on the Shell.

PR Type

What kind of change does this PR introduce?

Sample app changes

PR Checklist

Please check if your PR fulfills the following requirements:

Tested code with current supported SDKs

…to Themes.xaml.

-Inverted Greys in Dark Theme. -Fixed PropertyControl not adapting to Theme properly.

…rces into Theme Resources. -Picked some viable inverse colors of Resources for the Dark Theme.

WilliamABradley · 2018-01-22T10:33:26Z

It's a start, there are some things that need fixing, like ViewExtensions for StatusBar not accepting Theme Resources, perhaps better color choices in some areas:

…ementExtensions, HamburgerMenu, HeaderedItems, ListViewBase. -Added SampleIconBacking to MoreInfoContent.

-Replaced StaticResource with ThemeResource for all the Grey Brushes.

-Added warnings about Dark Theme to PrintHelper sample and docs.

WilliamABradley · 2018-01-24T11:22:39Z

@nmetulev take a look at my latest changes, let me know what you think.

Odonno · 2018-01-24T13:55:48Z

Just one stupid question but, is the dark too dark?

nmetulev · 2018-01-24T17:45:53Z

Here is the dark theme the Windows design team has created, could be helpful
UWP Toolkit dark theme.zip

skendrot · 2018-01-24T18:27:52Z

We'll want to test every sample with this and see what controls should be updated

skendrot

Should we update Brush-Grey-05 instead of removing it from the sample pages?

WilliamABradley · 2018-01-24T21:14:52Z

@skendrot Brush-Grey-05 was only used on about 1/6 of the samples, the rest had either ApplicationThemeBackgroundBrush or no Background at all, so I unified them, so that all samples have the same background. To change the Background, we can just change the backing in the Shell Page, so it applies to all samples. Also, I opened each sample page and made sure they looked right in Dark Theme :)

@Odonno I basically just inverted all of the current colors, the first step was just ensuring that all of the resources were ThemeResources and reacted to changes in System Theme properly. Now we can easily change the color scheme by changing the values in Themes.xaml.

WilliamABradley · 2018-01-24T21:19:21Z

@nmetulev I had an idea, instead of depending on someone's photo for the Background, why don't we just use an Acrylic brush with a Host backdrop? That way that space is filled with the User's background and we don't have to source a photo. Of course, we could have it fall back to the photo.

This could become the background in all of the samples too.

skendrot

Small review, not complete

skendrot · 2018-01-24T18:51:21Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DropShadowPanel/DropShadowPanelXaml.bind

                                  OffsetX="@[OffsetX:DoubleSlider:2.0:0.0-100.0]"
                                  OffsetY="@[OffsetY:DoubleSlider:2.0:0.0-100.0]"
-                                  Color="@[Color:Brush:Black]"
+                                  Color="@[Color:Brush:Aqua]"


This looks very weird on the light theme

It is a color that works in both Dark and Light Themes, the user can change it themselves.

I could replace the Binding with a ThemeResource?

Would it make sense to allow for theme resources in the template constructor? If we grab from application resources vs. page resources, it should be easier.

I think the black actuly looks good on dark theme

skendrot · 2018-01-24T18:52:13Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DropShadowPanel/DropShadowPanelXaml.bind

                                    Margin="20">
            <Polyline Points="0,0 50,50 50,0 0,50"
-                Stroke="Black" StrokeThickness="2"/>
+                Stroke="Black" StrokeThickness="2" />


Why so many unneeded changes like this?

CodeMaid's Auto Cleanup.

Vijay-Nirmal · 2018-01-25T04:49:51Z

Widgets or light-weight apps can reinforce their usage as utility apps by drawing acrylic edge-to-edge inside their app window.

Rendering acrylic surfaces is GPU intensive, which can increase device power consumption and shorten battery life.

Souce Acrylic material

@WilliamABradley So the question is, is this a light-weight app to use the background acrylic?

We can use background acrylic in Horizontal Tabs and in-app acrylic in extended horizontal tabs.

WilliamABradley · 2018-01-25T10:55:24Z

Nvm about background replacement, Acrylic overload!

That's better, some design adherence!

…ictionary, to maintain support for older versions of Windows 10. -Styled About Page according to recommended designs. -Fixed Titlebar in Dark Theme.

Odonno · 2018-01-25T13:12:47Z

Well. Start to look really nice.

…new SampleController Page. -SampleController uses Activator to create the Sample pages instead of a Frame, therefore, all navigating and navigated overrides had to to be replaced with local calls. -Samples without Pages (Documentation only) will now actually Navigate properly and show their docs, although there will be a void on the left side of the page currently.

WilliamABradley · 2018-01-27T03:37:13Z

I carefully ripped out all Sample Logic from the Shell Page, and added it to a new page called SampleController, as this logic should be handled separately.

This allows the Shell to be easily modified separately from the SampleController and vice versa.

Other benefits include:

Any interactions with the Sample can be cached and restored.
The UI is easier to edit (Like VisualStateManager).
Samples without Sample Pages (Documentation only) will now work.
It is cleaner and easier to understand what is going on in the code.

-Fixed SampleController Xaml Designer visibility. -Applied Background to Info Area uniformly (Transparent PropertiesControl and MarkdownTextBlock). -Broke several Visual States and functions in SampleController.

…ustom defined Background to shine through.

WilliamABradley · 2018-07-01T12:24:40Z

@nmetulev @michael-hawker Sorry I have been pretty busy lately.
I have moved the Expander button inline into the Pivot Left Header, you are welcome to try out the flow there. I'm not sure how the style should be when the Pane is expanded, so I moved it under the Title bar, like in Narrow View.

Desktop Narrow	Desktop Full

Slim Sample	Slim Properties

nmetulev · 2018-07-09T22:28:45Z

Thanks @WilliamABradley. This looks great. Just few more minor details:

theme changes should only affect sample, not app
need to add theme setting in landing page
sample header and properties panel have same background in light theme, header should be darker (similar to dark theme)
limit drag of properties pane to a certain width
expander button should be a bit lower. In narrow view it should not be the i icon but the open pane icon

nmetulev · 2018-07-31T23:38:07Z

docs/developer-tools/Analytics.md

@@ -0,0 +1,13 @@
+## Google analytics


This doc page was removed a while ago, should still be removed

nmetulev · 2018-07-31T23:40:44Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/WindowsCommunityToolkit/master/docs/developer-tools/FocusTracker.md"
      },
      {
        "Name": "Analytics",


Could you remove this sample, it should have been removed a while ago?

nmetulev · 2018-07-31T23:45:20Z

Please make sure only the sample changes the theme and not the properties pane. Otherwise, looks good

…SampleController Page.

WilliamABradley · 2018-08-01T08:57:07Z

@nmetulev Changes have been made.

nmetulev · 2018-08-01T21:26:30Z

Thanks @WilliamABradley. I noticed the Shell buttons don't have a background after the latest changes, otherwise, looks good.

old review

Initial Theming Restructure, moved Color Resources out of App.xaml in…

6172b96

…to Themes.xaml.

WilliamABradley added sample app 🖼 improvements ✨ in progress 🚧 labels Jan 21, 2018

WilliamABradley added 2 commits January 21, 2018 17:59

-Moved defined Styles in App.xaml to Styles/Generic.xaml.

5943fa8

-Inverted Greys in Dark Theme. -Fixed PropertyControl not adapting to Theme properly.

-Transitioned remaining Static defined and StaticResource color resou…

45701ca

…rces into Theme Resources. -Picked some viable inverse colors of Resources for the Dark Theme.

WilliamABradley requested a review from nmetulev January 22, 2018 10:28

WilliamABradley added 5 commits January 24, 2018 21:39

Merge branch 'master' into DarkTheme.

399793c

-Fixed Dark Theme issues with BladeView, DropShadowPanel, FrameworkEl…

0055353

…ementExtensions, HamburgerMenu, HeaderedItems, ListViewBase. -Added SampleIconBacking to MoreInfoContent.

Finished fixing Control Samples for Dark Theme.

e02196d

-Fixed Dark Theme for Samples of Notifications, Animations and Services.

e20c346

-Replaced StaticResource with ThemeResource for all the Grey Brushes.

-Fixed Dark Theme for remaining samples.

d439bb7

-Added warnings about Dark Theme to PrintHelper sample and docs.

skendrot mentioned this pull request Jan 24, 2018

RadialGauge does not show text in dark theme #1766

Closed

skendrot reviewed Jan 24, 2018

View reviewed changes

-Added ThemeInjector, a way to inject AcrylicBrushes into a ResourceD…

53912d8

…ictionary, to maintain support for older versions of Windows 10. -Styled About Page according to recommended designs. -Fixed Titlebar in Dark Theme.

WilliamABradley added 2 commits January 27, 2018 20:48

-Made it half-way through restyling the SampleController.

0470a1f

-Fixed SampleController Xaml Designer visibility. -Applied Background to Info Area uniformly (Transparent PropertiesControl and MarkdownTextBlock). -Broke several Visual States and functions in SampleController.

Removed ApplicationPageBackgroundThemeBrush from Samples to let the C…

18d6754

…ustom defined Background to shine through.

WilliamABradley added 2 commits July 1, 2018 22:21

Merge branch 'master' into DarkTheme

49d594d

Moved Expander inline into Pivot Header.

df35446

nmetulev added 3 commits July 8, 2018 18:32

Merge branch 'master' into DarkTheme

9bd679a

Merge branch 'master' into DarkTheme

dc7c907

Merge branch 'master' into DarkTheme

59be005

nmetulev modified the milestones: 3.1, 4.0 Jul 11, 2018

WilliamABradley and others added 6 commits July 29, 2018 17:44

Merge branch 'master' into DarkTheme

e52219e

Theme Switcher in Sample Page now only affects the Sample Area.

840d88c

Fixes for DataGrid Sample Page

6246597

Separated Github Logo Data into Separate Resource File.

584bc69

Documented ISampleNavigation, Removed Saturation Behaviour warning.

a5a411b

Merge branch 'master' into DarkTheme

4d8c8d9

nmetulev reviewed Jul 31, 2018

View reviewed changes

WilliamABradley added 4 commits August 1, 2018 20:34

Theme Picker now only affects the Sample Area, rather than the whole …

84f9d05

…SampleController Page.

Removed Analytics Sample.

654f64f

Fixed Github Icon being visible only once.

41091e1

Removed remaining Analytics file.

dd37f22

Merge branch 'master' into DarkTheme

375a5d0

nmetulev and others added 2 commits August 1, 2018 14:56

Merge branch 'master' into DarkTheme

333aa16

fix for sample background

122b9cb

nmetulev approved these changes Aug 1, 2018

View reviewed changes

nmetulev merged commit 7873f88 into CommunityToolkit:master Aug 1, 2018

Uh oh!

Sample App Fluent Design & Dark Theme #1755

Sample App Fluent Design & Dark Theme #1755

Uh oh!

Conversation

WilliamABradley commented Jan 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

PR Checklist

Uh oh!

WilliamABradley commented Jan 22, 2018

Uh oh!

WilliamABradley commented Jan 24, 2018

Uh oh!

Odonno commented Jan 24, 2018

Uh oh!

nmetulev commented Jan 24, 2018

Uh oh!

skendrot commented Jan 24, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skendrot left a comment

Choose a reason for hiding this comment

Uh oh!

WilliamABradley commented Jan 24, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WilliamABradley commented Jan 24, 2018

Uh oh!

skendrot left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Vijay-Nirmal commented Jan 25, 2018

Uh oh!

WilliamABradley commented Jan 25, 2018

Uh oh!

Odonno commented Jan 25, 2018

Uh oh!

WilliamABradley commented Jan 27, 2018

Uh oh!

WilliamABradley commented Jul 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nmetulev commented Jul 9, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nmetulev commented Jul 31, 2018

Uh oh!

WilliamABradley commented Aug 1, 2018

Uh oh!

nmetulev commented Aug 1, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

WilliamABradley commented Jan 21, 2018 •

edited

Loading

skendrot commented Jan 24, 2018 •

edited

Loading

WilliamABradley commented Jan 24, 2018 •

edited

Loading

WilliamABradley commented Jul 1, 2018 •

edited

Loading