From 3ce934e20744870d0737d44d8d6713b3c2922376 Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Thu, 19 Nov 2020 20:31:24 -0800 Subject: [PATCH 1/5] InfoBarPanel update to InfoBar control --- active/InformationBar/InformationBar.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/active/InformationBar/InformationBar.md b/active/InformationBar/InformationBar.md index f7dc898a4..bd6fff79e 100644 --- a/active/InformationBar/InformationBar.md +++ b/active/InformationBar/InformationBar.md @@ -418,6 +418,8 @@ for more information about text localization in your notification. # API Details +## Microsoft.UI.Xaml.Controls + ```c++ enum InfoBarCloseReason { @@ -497,6 +499,27 @@ unsealed runtimeclass InfoBar : Windows.UI.Xaml.Controls.ContentControl } ``` +## Microsoft.UI.Xaml.Controls.Primitives + +```cs +[webhosthidden] +unsealed runtimeclass InfoBarPanel : Windows.UI.Xaml.Controls.Panel +{ + InfoBarPanel(); + + // HorizontalMargin attached property + static Windows.UI.Xaml.DependencyProperty HorizontalMarginProperty{ get; }; + static void SetHorizontalMargin(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); + static Windows.UI.Xaml.Thickness GetHorizontalMargin(Windows.UI.Xaml.DependencyObject object); + + // VerticalMargin attached property + static Windows.UI.Xaml.DependencyProperty VerticalMarginProperty{ get; }; + static void SetVerticalMargin(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); + static Windows.UI.Xaml.Thickness GetVerticalMargin(Windows.UI.Xaml.DependencyObject object); +} + +``` + ## Theme Resources ### Notable Theme Resources From df8e2588df2997c7f488718e257fbfa52b922dc0 Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Wed, 25 Nov 2020 14:52:25 -0800 Subject: [PATCH 2/5] InfoBarPanel updates --- active/InformationBar/InformationBar.md | 81 ++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 9 deletions(-) diff --git a/active/InformationBar/InformationBar.md b/active/InformationBar/InformationBar.md index bd6fff79e..55ed9c285 100644 --- a/active/InformationBar/InformationBar.md +++ b/active/InformationBar/InformationBar.md @@ -398,6 +398,62 @@ Please view the guidance for for more information about text localization in your notification. +# InfoBarPanel class + +A layout panel that positions its children horizontally if there’s available space, +otherwise positions them vertically. This panel is intended to only be used as part +of the ControlTemplate of the InfoBar control. + +## InfoBar Padding properties + +The `PaddingInHorizontalOrientation` property gets/sets the distance between the edges +of the panel and its children, when the panel is laying out items horizontally. +The `PaddingInVerticalOrientation` property does likewise when the panel is layout out +items vertically. + +[API note: these padding properties are analogous to ex the +[StackPanel.Padding](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.StackPanel.Padding) +property.] + +## InfoBar Spacing attached properties + +The `SpacingInHorizontalOrientation` attached property gets/sets the distance between i tems +when the panel is laying out items in the horizontal orientation. Similarly +`SpacingInVerticalOrientation` for vertical layout. This property is set on the child items, +so the spacing can be different between different item pairs. + +[API note: these spacing properties are analogous to ex the +[StackLayout.Spacing](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.StackLayout.Spacing) +property, except they're attached properties so that they can be set on the panel children.] + +Note that if adjacent children both have non-zero spacing set, the values will be added +together. That is if a left child has right spacing, and a right child has left spacing, +the total spacing will be the sum of the two values. + +## InfoBarPanel example + +This example shows an InfoBarPanel with 10px of padding above and below +its children when laying out vertically, no padding otherwise. + +The children have spacing between each other that varies based on the child +and orientation. + +```xml + + + + + + + +``` + # API Notes ### Notable Properties @@ -507,17 +563,24 @@ unsealed runtimeclass InfoBarPanel : Windows.UI.Xaml.Controls.Panel { InfoBarPanel(); - // HorizontalMargin attached property - static Windows.UI.Xaml.DependencyProperty HorizontalMarginProperty{ get; }; - static void SetHorizontalMargin(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); - static Windows.UI.Xaml.Thickness GetHorizontalMargin(Windows.UI.Xaml.DependencyObject object); + // PaddingInHorizontalOrientation property + Windows.UI.Xaml.Thickness PaddingInHorizontalOrientation; + static Windows.UI.Xaml.DependencyProperty PaddingInHorizontalOrientationProperty{ get; }; - // VerticalMargin attached property - static Windows.UI.Xaml.DependencyProperty VerticalMarginProperty{ get; }; - static void SetVerticalMargin(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); - static Windows.UI.Xaml.Thickness GetVerticalMargin(Windows.UI.Xaml.DependencyObject object); -} + // PaddingInVerticalOrientation property + Windows.UI.Xaml.Thickness PaddingInVerticalOrientation; + static Windows.UI.Xaml.DependencyProperty PaddingInVerticalOrientationProperty{ get; }; + // SpacingInHorizontalOrientation attached property + static void SetSpacingInHorizontalOrientation(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); + static Windows.UI.Xaml.Thickness GetSpacingInHorizontalOrientation(Windows.UI.Xaml.DependencyObject object); + static Windows.UI.Xaml.DependencyProperty SpacingInHorizontalOrientationProperty{ get; }; + + // SpacingInVerticalOrientation attached property + static void SetSpacingInVerticalOrientation(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); + static Windows.UI.Xaml.Thickness GetSpacingInVerticalOrientation(Windows.UI.Xaml.DependencyObject object); + static Windows.UI.Xaml.DependencyProperty SpacingInVerticalOrientationProperty{ get; }; +} ``` ## Theme Resources From abf7b23273256356be9c3d7bfb4ffe895e622ce1 Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Wed, 2 Dec 2020 11:23:05 -0800 Subject: [PATCH 3/5] Updates --- active/InformationBar/InformationBar.md | 76 +++++++++++++------------ 1 file changed, 41 insertions(+), 35 deletions(-) diff --git a/active/InformationBar/InformationBar.md b/active/InformationBar/InformationBar.md index 55ed9c285..c0f7078c0 100644 --- a/active/InformationBar/InformationBar.md +++ b/active/InformationBar/InformationBar.md @@ -404,31 +404,37 @@ A layout panel that positions its children horizontally if there’s available s otherwise positions them vertically. This panel is intended to only be used as part of the ControlTemplate of the InfoBar control. -## InfoBar Padding properties +## InfoBar padding properties -The `PaddingInHorizontalOrientation` property gets/sets the distance between the edges +The `HorizontalOrientationPadding` property gets/sets the distance between the edges of the panel and its children, when the panel is laying out items horizontally. -The `PaddingInVerticalOrientation` property does likewise when the panel is layout out +The `VerticalOrientationPadding` property does likewise when the panel is laying out items vertically. [API note: these padding properties are analogous to ex the [StackPanel.Padding](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.StackPanel.Padding) property.] -## InfoBar Spacing attached properties +## InfoBar margin attached properties -The `SpacingInHorizontalOrientation` attached property gets/sets the distance between i tems -when the panel is laying out items in the horizontal orientation. Similarly -`SpacingInVerticalOrientation` for vertical layout. This property is set on the child items, -so the spacing can be different between different item pairs. +The `HorizontalOrientationMargin` attached property can be set on child elements +of an InfoBarPanel, and gets/sets an extra margin on the element. +Similarly +`VerticalOrientationMargin` for vertical layout. -[API note: these spacing properties are analogous to ex the -[StackLayout.Spacing](https://docs.microsoft.com/uwp/api/Microsoft.UI.Xaml.Controls.StackLayout.Spacing) -property, except they're attached properties so that they can be set on the panel children.] +These attached margin properties are applied on an element in addition to the +element's [Margin](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement.Margin) +property. For example if a child element's Margin is 2 and its +InfoBarPanel.HorizontalOrientationMargin property is 3, it will have an effective margin +of 5 (when the panel is in its horizontal layout). -Note that if adjacent children both have non-zero spacing set, the values will be added -together. That is if a left child has right spacing, and a right child has left spacing, -the total spacing will be the sum of the two values. +The leading and trailing margins are ignored however. +For example, in horizontal layout, the HorizontalOrientationMargin.Left +is ignored on the first child, and the +HorizontalOrientationMargin.Right is ignored on the last child. +This applies to the first/last child that are not collapsed (that take up layout space). +For example, if the first child is collapsed, it's the +HorizontalOrientationMargin.Left of the _second_ child that is ignored. ## InfoBarPanel example @@ -439,18 +445,18 @@ The children have spacing between each other that varies based on the child and orientation. ```xml - + + InfoBarPanel.HorizontalOrientationMargin='0,10,0,0' + InfoBarPanel.VerticalOrientationMargin='0,10,0,0' /> + InfoBarPanel.HorizontalOrientationMargin='8,10,0,0' + InfoBarPanel.VerticalOrientationMargin='0,4,0,0' /> + InfoBarPanel.HorizontalOrientationMargin='12,8,0,0' + InfoBarPanel.VerticalOrientationMargin='0,12,0,0' /> ``` @@ -563,23 +569,23 @@ unsealed runtimeclass InfoBarPanel : Windows.UI.Xaml.Controls.Panel { InfoBarPanel(); - // PaddingInHorizontalOrientation property - Windows.UI.Xaml.Thickness PaddingInHorizontalOrientation; - static Windows.UI.Xaml.DependencyProperty PaddingInHorizontalOrientationProperty{ get; }; + // HorizontalOrientationPadding property + Windows.UI.Xaml.Thickness HorizontalOrientationPadding; + static Windows.UI.Xaml.DependencyProperty HorizontalOrientationPaddingProperty{ get; }; - // PaddingInVerticalOrientation property - Windows.UI.Xaml.Thickness PaddingInVerticalOrientation; - static Windows.UI.Xaml.DependencyProperty PaddingInVerticalOrientationProperty{ get; }; + // VerticalOrientationPadding property + Windows.UI.Xaml.Thickness VerticalOrientationPadding; + static Windows.UI.Xaml.DependencyProperty VerticalOrientationPaddingProperty{ get; }; - // SpacingInHorizontalOrientation attached property - static void SetSpacingInHorizontalOrientation(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); - static Windows.UI.Xaml.Thickness GetSpacingInHorizontalOrientation(Windows.UI.Xaml.DependencyObject object); - static Windows.UI.Xaml.DependencyProperty SpacingInHorizontalOrientationProperty{ get; }; + // HorizontalOrientationMargin attached property + static void SetHorizontalOrientationMargin(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); + static Windows.UI.Xaml.Thickness GetHorizontalOrientationMargin(Windows.UI.Xaml.DependencyObject object); + static Windows.UI.Xaml.DependencyProperty HorizontalOrientationMarginProperty{ get; }; - // SpacingInVerticalOrientation attached property - static void SetSpacingInVerticalOrientation(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); - static Windows.UI.Xaml.Thickness GetSpacingInVerticalOrientation(Windows.UI.Xaml.DependencyObject object); - static Windows.UI.Xaml.DependencyProperty SpacingInVerticalOrientationProperty{ get; }; + // VerticalOrientationMargin attached property + static void SetVerticalOrientationMargin(Windows.UI.Xaml.DependencyObject object, Windows.UI.Xaml.Thickness value); + static Windows.UI.Xaml.Thickness GetVerticalOrientationMargin(Windows.UI.Xaml.DependencyObject object); + static Windows.UI.Xaml.DependencyProperty VerticalOrientationMarginProperty{ get; }; } ``` From bf8ea1ad5638b03615fc72f26859317218e96c41 Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Wed, 16 Dec 2020 17:11:11 -0800 Subject: [PATCH 4/5] InfoBarPanel updates --- active/InformationBar/InformationBar.md | 38 ++++++++++++++----------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/active/InformationBar/InformationBar.md b/active/InformationBar/InformationBar.md index c0f7078c0..2c2da8e6f 100644 --- a/active/InformationBar/InformationBar.md +++ b/active/InformationBar/InformationBar.md @@ -1,7 +1,6 @@ # Background > This spec corresponds to [issue 913](https://github.com/microsoft/microsoft-ui-xaml/issues/913) on the WinUI repo. - Users should be informed about essential status changes that occur on an app level. These status changes affect the app as a whole and can be either critical or informational. Critical status changes like lost internet connectivity are directly impactful to app functionality while @@ -438,28 +437,33 @@ HorizontalOrientationMargin.Left of the _second_ child that is ignored. ## InfoBarPanel example -This example shows an InfoBarPanel with 10px of padding above and below -its children when laying out vertically, no padding otherwise. +This example shows an InfoBarPanel with 5px of padding above and below +its children when laying out horizontally, no padding otherwise. The children have spacing between each other that varies based on the child -and orientation. +and orientation. The second child (the green rectangle) won't have it its margin +applied if the first child (the red rectangle) is collapsed. ```xml - - - - - - - + + + + + + + + + + + ``` +![InfoBarPanel example](images/InfoBarPanel-example.jpg) + # API Notes ### Notable Properties From 9edf4465da1612b6a64e164c93610379e5ca30cc Mon Sep 17 00:00:00 2001 From: MikeHillberg <18429489+MikeHillberg@users.noreply.github.com> Date: Wed, 16 Dec 2020 17:11:32 -0800 Subject: [PATCH 5/5] Image --- .../images/InfoBarPanel-example.jpg | Bin 0 -> 3675 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 active/InformationBar/images/InfoBarPanel-example.jpg diff --git a/active/InformationBar/images/InfoBarPanel-example.jpg b/active/InformationBar/images/InfoBarPanel-example.jpg new file mode 100644 index 0000000000000000000000000000000000000000..04c6056e30a246bc4b1a0fecea66e7472827bee7 GIT binary patch literal 3675 zcmeAS@N?(olHy`uVBq!ia0y~yVA27y&vCE;N!gT0Pawru9OUlAu=R!Wmn`^bXxmQnnEhjyrYHyxM;<{&#Wtuichl`1Y z>0Y-rGx%C{SL0C3+2fWhsoU4-=&XraSDlma>g%q+mYuWui#bl^#YRR%Y>oMTWf4x`f%+;DX z&H-hwPaQh6>glfIY|G--OS{fk{nMg-!JBJSTU$d5QL`T!;Xl5EMo<_^j z(VA(r3LR~fjJBRe+oOZF;cWVo0oWJ%e}b59$?r3Vm>53f!+SKKZq$;qwCqMmdKI;Vst08G&?$N&HU literal 0 HcmV?d00001