diff --git a/active/InformationBar/InformationBar.md b/active/InformationBar/InformationBar.md index f7dc898a4..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 @@ -398,6 +397,73 @@ 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 `HorizontalOrientationPadding` property gets/sets the distance between the edges +of the panel and its children, when the panel is laying out items horizontally. +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 margin attached properties + +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. + +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). + +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 + +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. 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 @@ -418,6 +484,8 @@ for more information about text localization in your notification. # API Details +## Microsoft.UI.Xaml.Controls + ```c++ enum InfoBarCloseReason { @@ -497,6 +565,34 @@ unsealed runtimeclass InfoBar : Windows.UI.Xaml.Controls.ContentControl } ``` +## Microsoft.UI.Xaml.Controls.Primitives + +```cs +[webhosthidden] +unsealed runtimeclass InfoBarPanel : Windows.UI.Xaml.Controls.Panel +{ + InfoBarPanel(); + + // HorizontalOrientationPadding property + Windows.UI.Xaml.Thickness HorizontalOrientationPadding; + static Windows.UI.Xaml.DependencyProperty HorizontalOrientationPaddingProperty{ get; }; + + // VerticalOrientationPadding property + Windows.UI.Xaml.Thickness VerticalOrientationPadding; + static Windows.UI.Xaml.DependencyProperty VerticalOrientationPaddingProperty{ 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; }; + + // 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; }; +} +``` + ## Theme Resources ### Notable Theme Resources diff --git a/active/InformationBar/images/InfoBarPanel-example.jpg b/active/InformationBar/images/InfoBarPanel-example.jpg new file mode 100644 index 000000000..04c6056e3 Binary files /dev/null and b/active/InformationBar/images/InfoBarPanel-example.jpg differ