feat: add CloseOnMaskToClose

demo/Ursa.Demo/Pages/DialogDemo.axaml

@@ -23,58 +23,89 @@
                         OnContent="Window" />
                     <ToggleSwitch
                         Content="Global/Local"
-                        IsVisible="{Binding !#overlay.IsChecked}"
                         IsChecked="{Binding IsGlobal}"
+                        IsVisible="{Binding !#overlay.IsChecked}"
                         OffContent="Local"
                         OnContent="Global" />
                     <ToggleSwitch
                         Content="Modal/Regular"
-                        IsVisible="{Binding !#overlay.IsChecked}"
                         IsChecked="{Binding IsModal}"
+                        IsVisible="{Binding !#overlay.IsChecked}"
                         OffContent="Regular"
                         OnContent="Modal" />
+                    <ToggleSwitch
+                        Content="ClickOnMaskToClose"
+                        IsChecked="{Binding CanCloseMaskToClose}"
+                        OffContent="No"
+                        OnContent="Yes" />
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Buttons" />
                         <ComboBox ItemsSource="{Binding Buttons}" SelectedItem="{Binding SelectedButton}" />
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Mode" />
-                        <ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}"/>
+                        <ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}" />
                     </StackPanel>
-                    <Button Content="Show Dialog" Command="{Binding ShowDialogCommand}" />
+                    <Button Command="{Binding ShowDialogCommand}" Content="Show Dialog" />
                     <TextBlock>
-                        <Run Text="Default Result: "></Run>
+                        <Run Text="Default Result: " />
-                        <Run Text="{Binding DefaultResult}"/>
+                        <Run Text="{Binding DefaultResult}" />
                     </TextBlock>
                     <TextBlock>
-                        <Run Text="Dialog Date: "></Run>
+                        <Run Text="Dialog Date: " />
-                        <Run Text="{Binding Date}"/>
+                        <Run Text="{Binding Date}" />
                     </TextBlock>
                 </StackPanel>
             </TabItem>
             <TabItem Header="Custom">
                 <StackPanel>
-                    <ToggleSwitch Content="Window/Overlay" OffContent="Overlay" OnContent="Window" IsChecked="{Binding IsWindow}" Name="overlay2" />
+                    <ToggleSwitch
-                    <ToggleSwitch Content="Global/Local" IsVisible="{Binding !#overlay2.IsChecked}" OffContent="Local" OnContent="Global" IsChecked="{Binding IsGlobal}" />
+                        Name="overlay2"
-                    <ToggleSwitch Content="Modal/Regular" OffContent="Regular" OnContent="Modal" IsChecked="{Binding IsModal}" />
+                        Content="Window/Overlay"
-                    <Button Content="Show Dialog" Command="{Binding ShowCustomDialogCommand}" />
+                        IsChecked="{Binding IsWindow}"
+                        OffContent="Overlay"
+                        OnContent="Window" />
+                    <ToggleSwitch
+                        Content="Global/Local"
+                        IsChecked="{Binding IsGlobal}"
+                        IsVisible="{Binding !#overlay2.IsChecked}"
+                        OffContent="Local"
+                        OnContent="Global" />
+                    <ToggleSwitch
+                        Content="Modal/Regular"
+                        IsChecked="{Binding IsModal}"
+                        OffContent="Regular"
+                        OnContent="Modal" />
+                    <ToggleSwitch
+                        Content="ClickOnMaskToClose"
+                        IsChecked="{Binding CanCloseMaskToClose}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <Button Command="{Binding ShowCustomDialogCommand}" Content="Show Dialog" />
                     <TextBlock>
-                        <Run Text="Custom Result: "></Run>
+                        <Run Text="Custom Result: " />
-                        <Run Text="{Binding Result}"/>
+                        <Run Text="{Binding Result}" />
                     </TextBlock>
                     <TextBlock>
-                        <Run Text="Dialog Date: "></Run>
+                        <Run Text="Dialog Date: " />
-                        <Run Text="{Binding Date}"/>
+                        <Run Text="{Binding Date}" />
                     </TextBlock>
                 </StackPanel>
             </TabItem>
         </TabControl>
         <Grid Grid.Column="1">
-            <Border ClipToBounds="True" CornerRadius="20" BorderThickness="1" BorderBrush="{DynamicResource SemiGrey1}">
+            <Border
+                BorderBrush="{DynamicResource SemiGrey1}"
+                BorderThickness="1"
+                ClipToBounds="True"
+                CornerRadius="20">
                 <u:OverlayDialogHost HostId="LocalHost">
                     <u:OverlayDialogHost.DialogDataTemplates>
                         <DataTemplate DataType="x:String">
-                            <TextBlock Text="{Binding Path=.}" Foreground="Red" Margin="24 24 48 24"></TextBlock>
+                            <TextBlock
+                                Margin="24,24,48,24"
+                                Foreground="Red"
+                                Text="{Binding Path=.}" />
                         </DataTemplate>
                     </u:OverlayDialogHost.DialogDataTemplates>
                 </u:OverlayDialogHost>

demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs

@@ -55,6 +55,13 @@ public class DialogDemoViewModel: ObservableObject
         set => SetProperty(ref _isModal, value);
     }
     
+    private bool _canCloseMaskToClose;
+    public bool CanCloseMaskToClose
+    {
+        get => _canCloseMaskToClose;
+        set => SetProperty(ref _canCloseMaskToClose, value);
+    }
+
     private DialogResult? _defaultResult;
     public DialogResult? DefaultResult
     {
@@ -110,7 +117,8 @@ public class DialogDemoViewModel: ObservableObject
                     {
                         Title = "Please select a date",
                         Mode = SelectedMode,
-                        Buttons = SelectedButton
+                        Buttons = SelectedButton,
+                        CanClickOnMaskToClose = CanCloseMaskToClose,
                     }
                 );
                 Date = vm.Date;
@@ -155,7 +163,10 @@ public class DialogDemoViewModel: ObservableObject
             if (IsModal)
             {
                 Result = await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
-                    vm, IsGlobal ? null : "LocalHost");
+                    vm, IsGlobal ? null : "LocalHost", options: new OverlayDialogOptions()
+                    {
+                        CanClickOnMaskToClose = CanCloseMaskToClose,
+                    });
                 Date = vm.Date;
             }
             else

src/Ursa/Controls/Dialog/DialogControl.cs

@@ -135,4 +135,16 @@ public class DialogControl: ContentControl
     {
         PseudoClasses.Set(PC_Modal, modal);
     }
+
+    public void Close()
+    {
+        if (this.DataContext is IDialogContext context)
+        {
+            context.Close();
+        }
+        else
+        {
+            DialogControlClosing?.Invoke(this, DialogResult.None);
+        }
+    }
 }

src/Ursa/Controls/Dialog/OverlayDialogHost.cs

@@ -32,7 +32,9 @@ public class OverlayDialogHost : Canvas
         set => SetValue(OverlayMaskBrushProperty, value);
     }
 
-    private Border CreateOverlayMask() => new()
+    private Border CreateOverlayMask(bool canCloseOnClick)
+    {
+        Border border = new()
         {
             HorizontalAlignment = HorizontalAlignment.Stretch,
             VerticalAlignment = VerticalAlignment.Stretch,
@@ -41,6 +43,23 @@ public class OverlayDialogHost : Canvas
             [!BackgroundProperty] = this[!OverlayMaskBrushProperty],
             IsVisible = true,
         };
+        if (canCloseOnClick)
+        {
+            border.AddHandler(PointerReleasedEvent, ClickBorderToCloseDialog);
+        }
+        return border;
+    }
+
+    private void ClickBorderToCloseDialog(object sender, PointerReleasedEventArgs e)
+    {
+        if (sender is Border border)
+        {
+            int i = _masks.IndexOf(border);
+            DialogControl dialog = _modalDialogs[i];
+            dialog.Close();
+            border.RemoveHandler(PointerReleasedEvent, ClickBorderToCloseDialog);
+        }
+    }
 
     protected sealed override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
@@ -138,7 +157,7 @@ public class OverlayDialogHost : Canvas
     /// <param name="control"></param>
     internal void AddModalDialog(DialogControl control)
     {
-        var mask = CreateOverlayMask();
+        var mask = CreateOverlayMask(control.CanClickOnMaskToClose);
         _masks.Add(mask);
         _modalDialogs.Add(control);
         control.SetAsModal(true);