UI Update: WIP #2013

shweaver-MSFT · 2018-04-24T20:47:15Z

Issue: #2012

The following controls will be updated with a more fluent and consistent default templates:

PR Checklist

Please check if your PR fulfills the following requirements:

Tested code with current supported SDKs
Docs have been added/updated which fit documentation template. (for bug fixes / features)
Sample in sample app has been added / updated (for bug fixes / features)
- Icon has been created (if new sample) following the Thumbnail Style Guide and templates
Tests for the changes have been added (for bug fixes / features) (if applicable)
Header has been added to all new source files (run build/UpdateHeaders.bat)
Contains NO breaking changes

nmetulev

Did a quick review.

If you are making changes in the actual control and not just the template, make sure to test your changes with the previous template as some developers might still use it.

Also, make sure your changes work on creators update and above

nmetulev · 2018-04-25T20:55:47Z

Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.cs

+            var tb = new TextBlock { Text = Maximum.ToString() };
+            tb.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));
+
+            _minValueText.MinWidth = tb.ActualWidth;


If someone is using the old template, this might crash - make sure these changes work with the old template

This is the one David updated. We've had some difficulties updating the controls to meet the designs while also not breaking functionality. The redlines weren't very specific about what was part of the control, and was is part of the sample page, and many of the controls had bugs to boot.

I'll test it out though :)

I added some null checks around the tooltip and min/max value textblocks code. This allows the old template to continue to work with the new logic. 👍

nmetulev · 2018-04-25T20:58:55Z

Microsoft.Toolkit.Uwp.UI.Controls/Menu/Menu.xaml

@@ -3,7 +3,56 @@
                    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
                    xmlns:local="using:Microsoft.Toolkit.Uwp.UI.Controls">

+    <AcrylicBrush x:Key="SystemControlChromeWhiteAcrylicElementBrush" 


AcrylicBrush is not available in RS2 (our min version).

Fixed.

I put the fallback color in the xaml template and placed the AcrylicBrush code in the OnApplyTemplate override with an ApiInformation type check.

Unfortunatly, as I mentioned above, adding it in OnApplyTempalate would overwrite any background the user sets.

…check

…nsure old template still works with new logic

nmetulev

The PROPERTIES header of every sample is cut of - I assume because of the grid splitter update.

nmetulev · 2018-05-01T04:44:15Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderXaml.bind

@@ -12,20 +12,17 @@
        <controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10"


The expander no longer fully collapses. For example, change the second expander direction to Down and collapse it. The expander should completely collapse into the header.

The background property should also change the background of the header when collapsed.

Issue 1 is fixed, but issue 2 conflicts with the design redlines a little bit. I did my best to compensate though. Take a look and let me know what you think.

nmetulev · 2018-05-01T04:49:06Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/GridSplitter/GridSplitter.bind

+    <Style TargetType="Border">
+        <Setter Property="BorderThickness" Value="1,1,0,0" />
+        <Setter Property="Padding" Value="16" />
+        <Setter Property="BorderBrush" Value="{StaticResource Brush-Grey-04}" />


Don't use Brush-Gray-04. Needs to be something that would work when copied to a blank app.

nmetulev · 2018-05-01T05:00:07Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu/Menu.bind

    </ResourceDictionary>
+
+    <Style TargetType="MenuFlyoutItem">


Should we add this as a Style in the toolkit? Seems to be something others would like to reuse. @michael-hawker what do you think?

I literally ripped this from the MenuFlyoutItem template in the generic.xaml for 10.0.17110.0, as it appears to be what Ani based her design on. I didn't write it, but it made it pretty easy to implement the design.

So this is a new style that shipped in RS4? @nmetulev do we need to get buy-in to ship that as part of the toolkit? If it works down-level to RS2 still, then it could be useful to add.

Hmm, great question. Let's not include it for now and we can investigate this once we merge this PR.

Sounds good

nmetulev · 2018-05-01T05:01:40Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu/Menu.bind

@@ -13,7 +13,119 @@
      <commands:NewFileCommand x:Key="NewFile" />


The two actions on this page are broken.

The actions add a an item to the view menu instead of the file menu. Can you change them so they add items to the file menu?

+1 have a 'Recent Files' type submenu maybe these can appear in. Otherwise it breaks the View interaction.

nmetulev · 2018-05-01T05:03:03Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView/OrbitViewXaml.bind

-                              MaxItemSize="@[MaxItemSize:Slider:60:50-100]"
+                              MinItemSize="@[MinItemSize:Slider:28:10-50]"
+                              MaxItemSize="@[MaxItemSize:Slider:40:40-100]"
+                              Height="400"


Why the new height?

At 400px, the math aligns to be more like the redlines. If I allow the OrbitView to scale with the container, the items won't be the correct ratio to the rest of control.

nmetulev · 2018-05-01T05:14:33Z

Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.xaml

@@ -549,13 +556,27 @@
                            <ContentControl Grid.Row="1" Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="2"
                                            x:Name="PART_ContentOverlay"
                                            Content="{TemplateBinding ContentOverlay}"
+                                            Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
+                                            MinHeight="120"


I think this minheight is messing with the collapsed state

It was. I fixed it ;)

nmetulev · 2018-05-01T05:20:05Z

Microsoft.Toolkit.Uwp.UI.Controls/Menu/Menu.cs

@@ -122,6 +123,17 @@ protected override void OnApplyTemplate()
            Loaded += Menu_Loaded;
            Unloaded += Menu_Unloaded;

+            if (ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
+            {
+                Background = new Windows.UI.Xaml.Media.AcrylicBrush()


This would overwrite any background the user sets. You might be able to use conditional XAML in the template to achieve this effect.

nmetulev · 2018-05-01T05:21:22Z

Microsoft.Toolkit.Uwp.UI.Controls/Menu/Menu.xaml

@@ -3,7 +3,56 @@
                    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
                    xmlns:local="using:Microsoft.Toolkit.Uwp.UI.Controls">

+    <AcrylicBrush x:Key="SystemControlChromeWhiteAcrylicElementBrush" 


Unfortunatly, as I mentioned above, adding it in OnApplyTempalate would overwrite any background the user sets.

nmetulev · 2018-05-01T05:23:19Z

Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.xaml


-                        <Border x:Name="OutOfRangeContentContainer"                                 
-                                Background="Transparent">
+                        <TextBlock Grid.Column="0" x:Name="MinValueText" Text="Min"/>


This is a big breaking change. Should we have a property to show the min/ax text as part of the control?

Feels like the default style should match the Slider (just with the extra thumb). This could be an alternate style though. Feel like it could just use binding to get those values, no?

…efault false

shweaver-MSFT · 2018-05-22T20:38:31Z

I should have all comments addressed, minus the RangeSelector. After much feedback and some convo with Nikola, I am going to restyle the RangeSelector to be more inline with the Slider control. This was missed in the initial design review, but seems like the best way to go.

michael-hawker · 2018-05-22T21:31:48Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderXaml.bind

          </Grid>

          <controls:Expander.ContentOverlay>
-            <Grid Background="Red" MinHeight="250">
+            <Grid Height="120">


We should stick with MinHeight here as otherwise it looks a bit strange if the expand direction is left or right.

michael-hawker · 2018-05-22T21:35:27Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu/Menu.bind

-                         Header="^Build">
-        <MenuFlyoutItem Text="Build Solution" />
-        <MenuFlyoutItem Text="Rebuild Solution" />
+        <interactivity:Interaction.Behaviors>


I like having the single item without a dropdown in the sample to show how to do this behavior. However, I can't activate it with the keyboard. So I think we also need to hook into the KeyDown event for the Enter key?

michael-hawker · 2018-05-22T21:37:06Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu/Menu.bind

@@ -13,7 +13,119 @@
      <commands:NewFileCommand x:Key="NewFile" />


+1 have a 'Recent Files' type submenu maybe these can appear in. Otherwise it breaks the View interaction.

michael-hawker · 2018-05-22T21:45:34Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationPage.xaml.cs

@@ -133,7 +140,7 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
            Shell.Current.RegisterNewCommand("Show notification with buttons (with DataTemplate)", (sender, args) =>


Hmm, I still can't dismiss this one (with DataTemplate) with the Dismiss action and the 'X' doesn't close it either.

michael-hawker · 2018-05-22T21:47:41Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationPage.xaml.cs

@@ -133,7 +140,7 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
            Shell.Current.RegisterNewCommand("Show notification with buttons (with DataTemplate)", (sender, args) =>


It also seems to ignore the Notification duration

michael-hawker · 2018-05-22T21:53:57Z

Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/TextToolbar.xaml

@@ -8,6 +8,7 @@
    </ResourceDictionary.MergedDictionaries>


Just a heads up that @IbraheemOsama's Infinite Canvas uses the TextToolbar as well I believe, so not sure how these changes effect that (if at all).

nmetulev · 2018-05-23T21:13:24Z

I noticed the range selector doesn't always update the tooltip when dragging:

…nityToolkit into ui-update

old review

azchohfi and others added 18 commits April 10, 2018 13:41

Fix crash (#1913).

f230303

Fluentized BladeView control and fixed collapsed/expanded functionality

d360443

Fluentized Expander control

1657cdc

Fluentized BladeView control and fixed collapsed/expanded functionality

121b2b8

Merge branch 'shweaver/expander' into shweaver/fluent

97d3770

Merge branch 'shweaver/bladeview' into shweaver/fluent

cf345fc

Updated GridSplitter control

3862089

Sample page tweaks

d60ac19

Merge branch 'shweaver/gridsplitter' into ui-update

fae6b47

Fluentize InAppNotifications control

3e7693b

Merge branch 'shweaver/inappnotifications' into ui-update

451e041

Updated FileMenu control template

4a43744

Merge branch 'shweaver/filemenu' into ui-update

ed4007f

Menu sample tweaks

8a8b1ce

Updated OrbitView design

b5e6d8f

Merge branch 'shweaver/orbitview' into ui-update

91ce35b

Migrating Dashoe's upated RangeSelector into the toolkit

450f3b9

Merge branch 'shweaver/rangeselector' into ui-update

d6dc69b

nmetulev requested changes Apr 25, 2018

View reviewed changes

shweaver-MSFT added 2 commits April 25, 2018 14:07

Updated TextToolbar template

e7a5e27

Merge branch 'shweaver/texttoolbar' into ui-update

a450a95

nmetulev mentioned this pull request Apr 30, 2018

Gridsplitter controls sometimes causes the pointer to disappear #2017

Open

shweaver-MSFT added 5 commits April 30, 2018 10:06

wip

eba35b0

Added border to Menu and moved AcrylicBrush to code with type safety …

7103a41

…check

Added null checks for RangeSelector tooltip and value textBlocks to e…

ad6fe28

…nsure old template still works with new logic

RadialGauge design update

c4951ff

Merge branch 'shweaver/radialgauge' into ui-update

f3673e9

nmetulev changed the base branch from master to rel/3.0.0-preview April 30, 2018 23:30

nmetulev requested changes May 1, 2018

View reviewed changes

Fix Expander to have proper height when collapsed and no content overlay

f08f683

nmetulev changed the base branch from rel/3.0.0-preview to master May 18, 2018 18:37

shweaver-MSFT added 8 commits May 18, 2018 14:02

PR fixes

70805b7

Added ShowValues property to RangeSelector for visibility toggling. D…

5296ef1

…efault false

Resetting RangeSelector default values

ac515b9

BladeView Dark Theme updates

af0fecc

Expander Dark Theme updates

af51ee8

Menu Dark Theme updates

3088c04

InAppNotification Dark Theme updates

3732e13

Merge branch 'master' into ui-update

2b98d64

michael-hawker requested changes May 22, 2018

View reviewed changes

RangeSelector Dark Theme updates. Added Background to tooltip

6986707

nmetulev added this to the 3.0 milestone May 23, 2018

RangeSelector color fixes

75b4466

shweaver-MSFT and others added 7 commits May 23, 2018 15:21

Merge branch 'master' into ui-update

5e11a42

Color updates for RadialGauge control

ce774ef

Merge branch 'master' into ui-update

2702a70

RangeSelector tooltip bug fix

66bd14f

Merge branch 'ui-update' of https://github.com/shweaver-MSFT/UWPCommu…

3d656d0

…nityToolkit into ui-update

Merge branch 'master' into ui-update

b4496e5

Merge branch 'master' into ui-update

d1fc2c4

nmetulev approved these changes May 23, 2018

View reviewed changes

nmetulev added 2 commits May 23, 2018 18:11

Merge branch 'master' into ui-update

8cc2380

Merge branch 'master' into ui-update

f98e93c

michael-hawker approved these changes May 24, 2018

View reviewed changes

michael-hawker merged commit 27e1d43 into CommunityToolkit:master May 24, 2018

shweaver-MSFT deleted the ui-update branch May 24, 2018 17:13

nmetulev mentioned this pull request Jun 6, 2018

3.0.0 has broke something in BladeView #2204

Closed

		@@ -12,20 +12,17 @@
		<controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10"

		@@ -13,7 +13,119 @@
		<commands:NewFileCommand x:Key="NewFile" />

		@@ -133,7 +140,7 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
		Shell.Current.RegisterNewCommand("Show notification with buttons (with DataTemplate)", (sender, args) =>

UI Update: WIP #2013

UI Update: WIP #2013

Conversation

shweaver-MSFT commented Apr 24, 2018 • edited by nmetulev Loading

PR Checklist

nmetulev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nmetulev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shweaver-MSFT May 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shweaver-MSFT commented May 22, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nmetulev commented May 23, 2018

shweaver-MSFT commented Apr 24, 2018 •

edited by nmetulev

Loading

shweaver-MSFT May 1, 2018 •

edited

Loading