Added sample for AppDialog

Author: jamesmcroft

assets/SampleIcons.afdesign

@@ -7,6 +7,7 @@ namespace MADE.Samples
     using MADE.Diagnostics.Logging;
     using MADE.Samples.Features.Home.Pages;
     using MADE.Samples.Infrastructure.ViewModels;
+    using MADE.UI.Views.Dialogs;
     using MADE.UI.Views.Navigation;
     using Microsoft.Extensions.DependencyInjection;
     using Windows.ApplicationModel.Activation;
@@ -52,6 +53,7 @@ private static IServiceProvider ConfigureServices(Frame rootFrame)
             Ioc.Default.ConfigureServices(
                 new ServiceCollection()
                     .AddSingleton<IMessenger>(provider => WeakReferenceMessenger.Default)
+                    .AddSingleton<IAppDialog>(provider => new AppDialog(rootFrame.Dispatcher))
                     .AddSingleton<IEventLogger, FileEventLogger>()
                     .AddSingleton<IAppDiagnostics, AppDiagnostics>()
                     .AddSingleton<INavigationService>(provider => new NavigationService(rootFrame))

samples/MADE.Samples/MADE.Samples.Shared/App.xaml.cs

@@ -0,0 +1,25 @@
+private async Task ShowAppDialogAsync()
+{
+    // This can be registered globally in a service collection and made available through dependency injection.
+    IAppDialog appDialog = new AppDialog(this.Dispatcher);
+
+    await appDialog.ShowAsync(
+        "Title",
+        "Message",
+        () => { Console.WriteLine("App dialog was dismissed!") },
+        new DialogButton(DialogButtonType.Confirm)
+        {
+            Content = "Confirm",
+            InvokeAction = button => Console.WriteLine("App dialog confirm button clicked!")
+        },
+        new DialogButton(DialogButtonType.Cancel)
+        {
+            Content = "Cancel",
+            InvokeAction = button => Console.WriteLine("App dialog cancel button clicked!")
+        },
+        new DialogButton(DialogButtonType.Neutral)
+        {
+            Content = "Help",
+            InvokeAction = button => Console.WriteLine("App dialog help button clicked!")
+        });
+}

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/AppDialog/AppDialog.png

@@ -2,10 +2,10 @@
     x:Class="MADE.Samples.Features.Samples.Pages.AppDialogPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:MADE.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:MADE.UI.Views.Navigation.Pages"
+    xmlns:samples="using:MADE.Samples.Infrastructure.Controls"
     xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     mc:Ignorable="d">
@@ -44,18 +44,42 @@
                 Grid.Row="1"
                 Margin="0,0,0,48"
                 Style="{StaticResource BaseTextBlockStyle}"
-                Text="The FilePicker is a custom-built UI element that provides a file selection user experience. The control works in a similar way to the file input element in web applications." />
+                Text="The AppDialog is a UI helper that provides a mechanism to simplify the showing of application modal dialogs." />
 
             <ScrollViewer Grid.Row="2">
                 <Grid>
-                    <!--<controls:FilePicker
-                        x:Name="FilePickerControl"
-                        Margin="0,16,0,0"
-                        AppendFiles="True"
-                        FileTypes="{x:Bind ViewModel.FilePickerTypes}"
-                        Files="{x:Bind ViewModel.FilePickerFiles}"
-                        Header="FilePicker with multiple item selection"
-                        SelectionMode="Multiple" />-->
+                    <samples:SampleControl CodeSource="AppDialog/AppDialogCode.txt" SampleName="Show a modal dialog from anywhere using a title, message, and actionable buttons">
+                        <samples:SampleControl.Sample>
+                            <StackPanel>
+                                <TextBox
+                                    Margin="0,0,0,16"
+                                    Header="Set title"
+                                    Text="{x:Bind ViewModel.AppDialogTitle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                <TextBox
+                                    Margin="0,0,0,16"
+                                    Header="Set message"
+                                    Text="{x:Bind ViewModel.AppDialogMessage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                <TextBox
+                                    Margin="0,0,0,16"
+                                    Header="Set confirm button content"
+                                    Text="{x:Bind ViewModel.AppDialogConfirmText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                <TextBox
+                                    Margin="0,0,0,16"
+                                    Header="Set cancel button content"
+                                    Text="{x:Bind ViewModel.AppDialogCancelText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                <TextBox
+                                    Margin="0,0,0,16"
+                                    Header="Set additional button content"
+                                    Text="{x:Bind ViewModel.AppDialogNeutralText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                <Button
+                                    Margin="0,0,0,16"
+                                    Command="{x:Bind ViewModel.ShowAppDialogCommand}"
+                                    Content="Show app dialog" />
+
+                                <TextBlock Text="{x:Bind ViewModel.AppDialogResponseMessage, Mode=OneWay}" />
+                            </StackPanel>
+                        </samples:SampleControl.Sample>
+                    </samples:SampleControl>
                 </Grid>
             </ScrollViewer>
 

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/AppDialog/AppDialogCode.txt

@@ -2,6 +2,7 @@ namespace MADE.Samples.Features.Samples.Pages
 {
     using CommunityToolkit.Mvvm.Messaging;
     using MADE.Samples.Features.Samples.ViewModels;
+    using MADE.UI.Views.Dialogs;
     using MADE.UI.Views.Navigation;
     using MADE.UI.Views.Navigation.Pages;
     using Microsoft.Extensions.DependencyInjection;
@@ -12,6 +13,7 @@ public AppDialogPage()
         {
             this.InitializeComponent();
             this.DataContext = new AppDialogPageViewModel(
+                App.Services.GetService<IAppDialog>(),
                 App.Services.GetService<INavigationService>(),
                 App.Services.GetService<IMessenger>());
         }

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/AppDialogPage.xaml

@@ -39,7 +39,7 @@
             <TextBlock
                 Margin="0,0,0,16"
                 Style="{StaticResource TitleTextBlockStyle}"
-                Text="FilePicker" />
+                Text="FilePicker control" />
 
             <TextBlock
                 Grid.Row="1"

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/AppDialogPage.xaml.cs

@@ -1,15 +1,111 @@
 namespace MADE.Samples.Features.Samples.ViewModels
 {
+    using System;
+    using System.Threading.Tasks;
+    using System.Windows.Input;
+    using CommunityToolkit.Mvvm.Input;
     using CommunityToolkit.Mvvm.Messaging;
+    using MADE.UI.Views.Dialogs;
+    using MADE.UI.Views.Dialogs.Buttons;
     using MADE.UI.Views.Navigation;
     using MADE.UI.Views.Navigation.ViewModels;
 
     public class AppDialogPageViewModel : PageViewModel
     {
-        public AppDialogPageViewModel(INavigationService navigationService, IMessenger messenger)
+        private readonly IAppDialog appDialog;
+        private string appDialogTitle = "Alert";
+        private string appDialogMessage = "This is an app dialog!";
+        private string appDialogConfirmText = "Confirm";
+        private string appDialogCancelText = "Cancel";
+        private string appDialogNeutralText = "Help";
+        private string appDialogResponseMessage;
+
+        public AppDialogPageViewModel(IAppDialog appDialog, INavigationService navigationService, IMessenger messenger)
             : base(navigationService, messenger)
         {
+            this.appDialog = appDialog;
+        }
+
+        public ICommand ShowAppDialogCommand => new AsyncRelayCommand(this.ShowAppDialogAsync);
+
+        public string AppDialogTitle
+        {
+            get => appDialogTitle;
+            set => SetProperty(ref appDialogTitle, value);
+        }
+
+        public string AppDialogMessage
+        {
+            get => appDialogMessage;
+            set => SetProperty(ref appDialogMessage, value);
+        }
+
+        public string AppDialogConfirmText
+        {
+            get => appDialogConfirmText;
+            set => SetProperty(ref appDialogConfirmText, value);
+        }
+
+        public string AppDialogCancelText
+        {
+            get => appDialogCancelText;
+            set => SetProperty(ref appDialogCancelText, value);
         }
 
+        public string AppDialogNeutralText
+        {
+            get => appDialogNeutralText;
+            set => SetProperty(ref appDialogNeutralText, value);
+        }
+
+        public string AppDialogResponseMessage
+        {
+            get => appDialogResponseMessage;
+            set => SetProperty(ref appDialogResponseMessage, value);
+        }
+
+        private async Task ShowAppDialogAsync()
+        {
+            await appDialog.ShowAsync(
+                AppDialogTitle,
+                AppDialogMessage,
+                OnAppDialogCancelled,
+                new DialogButton(DialogButtonType.Confirm)
+                {
+                    Content = AppDialogConfirmText,
+                    InvokeAction = button => Console.WriteLine("")
+                },
+                new DialogButton(DialogButtonType.Cancel)
+                {
+                    Content = AppDialogCancelText,
+                    InvokeAction = this.OnDialogButtonInvoked
+                },
+                new DialogButton(DialogButtonType.Neutral)
+                {
+                    Content = AppDialogNeutralText,
+                    InvokeAction = this.OnDialogButtonInvoked
+                });
+        }
+
+        private void OnDialogButtonInvoked(DialogButton button)
+        {
+            switch (button.Type)
+            {
+                case DialogButtonType.Confirm:
+                    this.AppDialogResponseMessage = "App dialog confirm button clicked!";
+                    break;
+                case DialogButtonType.Cancel:
+                    this.AppDialogResponseMessage = "App dialog cancel button clicked!";
+                    break;
+                case DialogButtonType.Neutral:
+                    this.AppDialogResponseMessage = "App dialog additional button clicked!";
+                    break;
+            }
+        }
+
+        private void OnAppDialogCancelled()
+        {
+            this.AppDialogResponseMessage = "App dialog was dismissed";
+        }
     }
 }

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/FilePickerPage.xaml

@@ -19,13 +19,12 @@
             Style="{ThemeResource SubtitleTextBlockStyle}"
             Text="{x:Bind SampleName}" />
 
-        <TextBlock
+        <Grid
             Grid.Row="1"
-            Margin="0,0,0,16"
-            Style="{ThemeResource BaseTextBlockStyle}"
-            Text="{x:Bind SampleDescription}" />
-
-        <Grid Grid.Row="2">
+            Background="#F0F0F0"
+            BorderBrush="#E9E9E9"
+            BorderThickness="2"
+            CornerRadius="8">
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
@@ -34,19 +33,25 @@
 
             <ContentPresenter
                 x:Name="SamplePresenter"
-                Margin="0,0,0,16"
+                Padding="16"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 HorizontalContentAlignment="Stretch"
-                BorderBrush="{ThemeResource SystemControlBackgroundListLowBrush}"
                 Content="{x:Bind Sample}" />
 
             <Grid
                 x:Name="SampleXamlPresenter"
                 Grid.Row="1"
-                Margin="0,0,0,16" />
+                Padding="16"
+                Background="#F9F9F9"
+                Visibility="Collapsed" />
 
-            <Grid x:Name="SampleCodePresenter" Grid.Row="2" />
+            <Grid
+                x:Name="SampleCodePresenter"
+                Grid.Row="2"
+                Padding="16"
+                Background="#F9F9F9"
+                Visibility="Collapsed" />
         </Grid>
     </Grid>
 </UserControl>

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/ViewModels/AppDialogPageViewModel.cs

@@ -160,6 +160,8 @@ private async Task GenerateSyntaxHighlightedContentFromFileAsync(Uri source, Pan
         {
             if (source != null && source.AbsolutePath.EndsWith("txt"))
             {
+                presenter.Visibility = Visibility.Visible;
+
                 var absoluteSourceUri = GetApplicationSourceUri(source);
                 var file = await StorageFile.GetFileFromApplicationUriAsync(absoluteSourceUri);
                 var content = await FileIO.ReadTextAsync(file);