InfoBar StackedNotificationsBehavior

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -519,6 +519,9 @@
       <DependentUpon>RichSuggestBoxPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="SamplePages\RichSuggestBox\SuggestionTemplateSelector.cs" />
+    <Compile Include="SamplePages\StackedNotificationsBehavior\StackedNotificationsBehavior.xaml.cs">
+      <DependentUpon>StackedNotificationsBehavior.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\TilesBrush\TilesBrushPage.xaml.cs">
       <DependentUpon>TilesBrushPage.xaml</DependentUpon>
     </Compile>
@@ -1011,6 +1014,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="SamplePages\StackedNotificationsBehavior\StackedNotificationsBehavior.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="SamplePages\TilesBrush\TilesBrushPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StackedNotificationsBehavior/StackedNotificationsBehavior.xaml

@@ -0,0 +1,30 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.StackedNotificationsBehavior"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+      mc:Ignorable="d">
+
+    <Grid>
+        <muxc:InfoBar MaxWidth="360"
+                      Margin="0,0,40,40"
+                      HorizontalAlignment="Right"
+                      VerticalAlignment="Bottom">
+            <interactivity:Interaction.Behaviors>
+                <behaviors:StackedNotificationsBehavior x:Name="stackedNotificationBehavior" />
+            </interactivity:Interaction.Behaviors>
+        </muxc:InfoBar>
+
+        <StackPanel Padding="20">
+            <TextBox x:Name="NotificationDurationTextBox"
+                     Header="Notification Duration (in ms):"
+                     Text="0" />
+            <TextBlock Margin="4,4,0,0"
+                       Text="*if duration is less or equal 0, the notification will never be dismissed" />
+        </StackPanel>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StackedNotificationsBehavior/StackedNotificationsBehavior.xaml.cs

@@ -0,0 +1,102 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.Toolkit.Uwp.UI.Behaviors;
+using System;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    public sealed partial class StackedNotificationsBehavior : Page
+    {
+        private Notification notification;
+
+        public StackedNotificationsBehavior()
+        {
+            InitializeComponent();
+            Load();
+        }
+
+        private static string GetRandomText()
+        {
+            var random = new Random();
+            var result = random.Next(1, 4);
+
+            switch (result)
+            {
+                case 1: return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin bibendum enim at tincidunt. Praesent egestas ipsum ligula, nec tincidunt lacus semper non.";
+                case 2: return "Pellentesque in risus eget leo rhoncus ultricies nec id ante.";
+                case 3: default: return "Sed quis nisi quis nunc condimentum varius id consectetur metus. Duis mauris sapien, commodo eget erat ac, efficitur iaculis magna. Morbi eu velit nec massa pharetra cursus. Fusce non quam egestas leo finibus interdum eu ac massa. Quisque nec justo leo. Aenean scelerisque placerat ultrices. Sed accumsan lorem at arcu commodo tristique.";
+            }
+        }
+
+        private void Load()
+        {
+            SampleController.Current.RegisterNewCommand(
+                "Show information notification",
+                (s, a) =>
+                {
+                    var notification = new Notification
+                    {
+                        Title = $"Notification {DateTimeOffset.Now}",
+                        Message = GetRandomText(),
+                        Duration = GetDuration(),
+                        Severity = Microsoft.UI.Xaml.Controls.InfoBarSeverity.Informational,
+                    };
+                    stackedNotificationBehavior.Show(notification);
+                });
+            SampleController.Current.RegisterNewCommand(
+                "Show error notification",
+                (s, a) =>
+                {
+                    var notification = new Notification
+                    {
+                        Title = $"Notification {DateTimeOffset.Now}",
+                        Message = GetRandomText(),
+                        Duration = GetDuration(),
+                        Severity = Microsoft.UI.Xaml.Controls.InfoBarSeverity.Error,
+                    };
+                    stackedNotificationBehavior.Show(notification);
+                });
+            SampleController.Current.RegisterNewCommand(
+                "Show notification with action",
+                (s, a) =>
+                {
+                    var notification = new Notification
+                    {
+                        Title = $"Notification {DateTimeOffset.Now}",
+                        Message = GetRandomText(),
+                        Duration = GetDuration(),
+                        Severity = Microsoft.UI.Xaml.Controls.InfoBarSeverity.Warning,
+                        ActionButton = new Button { Content = "Action" }
+                    };
+                    stackedNotificationBehavior.Show(notification);
+                });
+            SampleController.Current.RegisterNewCommand(
+                "Show notification with custom content",
+                (s, a) =>
+                {
+                    var notification = new Notification
+                    {
+                        Title = $"Notification {DateTimeOffset.Now}",
+                        Message = GetRandomText(),
+                        Duration = GetDuration(),
+                        Severity = Microsoft.UI.Xaml.Controls.InfoBarSeverity.Warning,
+                        Content = new TextBlock { Text = "Custom content" }
+                    };
+                    stackedNotificationBehavior.Show(notification);
+                });
+        }
+
+        private TimeSpan? GetDuration()
+        {
+            if(!int.TryParse(NotificationDurationTextBox.Text, out var duration) || duration <= 0)
+            {
+                return null;
+            }
+
+            return TimeSpan.FromMilliseconds(duration);
+        }
+    }
+}

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

@@ -875,6 +875,13 @@
         "Icon": "/Assets/Helpers.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/behaviors/AutoSelectBehavior.md"
       },
+      {
+        "Name": "StackedNotificationsBehavior",
+        "Type": "StackedNotificationsBehavior",
+        "Subcategory": "Status and Info",
+        "About": "The behavior to add the stacked notification behavior to the WinUI InfoBar control.",
+        "Icon": "/SamplePages/InAppNotification/InAppNotification.png"
+      },
       {
         "Name": "KeyDownTriggerBehavior",
         "Subcategory": "Systems",

Microsoft.Toolkit.Uwp.UI.Behaviors/InfoBar/Notification.cs

@@ -0,0 +1,118 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI.Xaml.Controls;
+using System;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml;
+
+namespace Microsoft.Toolkit.Uwp.UI.Behaviors
+{
+    /// <summary>
+    /// The content of a notification to display in <see cref="StackedNotificationsBehavior"/>.
+    /// The <see cref="Title"/>, <see cref="Message"/>, <see cref="Duration"/> and <see cref="Severity"/> values will
+    /// always be applied to the targeted <see cref="InfoBar"/>.
+    /// The <see cref="IsIconVisible"/>, <see cref="Content"/>, <see cref="ContentTemplate"/> and <see cref="ActionButton"/> values
+    /// will be applied only if set.
+    /// </summary>
+    public class Notification
+    {
+        private NotificationOverrides _overrides;
+        private bool _isIconVisible;
+        private object _content;
+        private DataTemplate _contentTemplate;
+        private ButtonBase _actionButton;
+
+        /// <summary>
+        /// Gets or sets the notification title.
+        /// </summary>
+        public string Title { get; set; }
+
+        /// <summary>
+        /// Gets or sets the notification message.
+        /// </summary>
+        public string Message { get; set; }
+
+        /// <summary>
+        /// Gets or sets the duration of the notification.
+        /// Set to null for persistent notification.
+        /// </summary>
+        public TimeSpan? Duration { get; set; }
+
+        /// <summary>
+        /// Gets or sets the type of the <see cref="InfoBar"/> to apply consistent status color, icon,
+        /// and assistive technology settings dependent on the criticality of the notification.
+        /// </summary>
+        public InfoBarSeverity Severity { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the icon is visible or not.
+        /// True if the icon is visible; otherwise, false. The default is true.
+        /// </summary>
+        public bool IsIconVisible
+        {
+            get => _isIconVisible;
+            set
+            {
+                _isIconVisible = value;
+                _overrides |= NotificationOverrides.Icon;
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the XAML Content that is displayed below the title and message in
+        ///  the InfoBar.
+        /// </summary>
+        public object Content
+        {
+            get => _content;
+            set
+            {
+                _content = value;
+                _overrides |= NotificationOverrides.Content;
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the data template for the <see cref="Content"/>.
+        /// </summary>
+        public DataTemplate ContentTemplate
+        {
+            get => _contentTemplate;
+            set
+            {
+                _contentTemplate = value;
+                _overrides |= NotificationOverrides.ContentTemplate;
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the action button of the InfoBar.
+        /// </summary>
+        public ButtonBase ActionButton
+        {
+            get => _actionButton;
+            set
+            {
+                _actionButton = value;
+                _overrides |= NotificationOverrides.ActionButton;
+            }
+        }
+
+        internal NotificationOverrides Overrides => _overrides;
+    }
+
+    /// <summary>
+    /// The overrides which should be set on the notification.
+    /// </summary>
+    [Flags]
+    internal enum NotificationOverrides
+    {
+        None,
+        Icon,
+        Content,
+        ContentTemplate,
+        ActionButton,
+    }
+}