ability to close a dialog by clicking away. fixes #238

Author: ButchersBoy

MainDemo.Wpf/Dialogs.xaml

@@ -147,8 +147,9 @@
                            Grid.Column="3" Margin="8 0 8 0"
                            >SAMPLE 4: Dialog managed from view model using IsOpen and custom commands (ignoring the provided routed commands).</TextBlock>
                 <materialDesign:DialogHost Grid.Column="3" Grid.Row="1"  HorizontalAlignment="Center" VerticalAlignment="Center"
-                                IsOpen="{Binding IsSample4DialogOpen}"
-                                DialogContent="{Binding Sample4Content}">
+                                           IsOpen="{Binding IsSample4DialogOpen}"
+                                           DialogContent="{Binding Sample4Content}"
+                                           CloseOnClickAway="True">
                     <Border BorderThickness="1" BorderBrush="{DynamicResource PrimaryHueMidBrush}"
                             MinWidth="256" MinHeight="256" ClipToBounds="True">
                         <Button HorizontalAlignment="Center" VerticalAlignment="Center"

MaterialDesignThemes.Wpf/DialogHost.cs

@@ -36,12 +36,14 @@ public enum DialogHostOpenDialogCommandDataContextSource
 
     [TemplatePart(Name = PopupPartName, Type = typeof(Popup))]
     [TemplatePart(Name = PopupPartName, Type = typeof(ContentControl))]
+    [TemplatePart(Name = ContentCoverGridName, Type = typeof(Grid))]
     [TemplateVisualState(GroupName = "PopupStates", Name = OpenStateName)]
     [TemplateVisualState(GroupName = "PopupStates", Name = ClosedStateName)]
     public class DialogHost : ContentControl
     {
         public const string PopupPartName = "PART_Popup";
         public const string PopupContentPartName = "PART_PopupContentElement";
+        public const string ContentCoverGridName = "PART_ContentCoverGrid";
         public const string OpenStateName = "Open";
         public const string ClosedStateName = "Closed";
 
@@ -62,6 +64,7 @@ public class DialogHost : ContentControl
 
         private Popup _popup;
         private ContentControl _popupContentControl;
+        private Grid _contentCoverGrid;
         private DialogSession _session;
         private DialogOpenedEventHandler _attachedDialogOpenedEventHandler;
         private DialogClosingEventHandler _attachedDialogClosingEventHandler;        
@@ -330,10 +333,41 @@ public DialogHostOpenDialogCommandDataContextSource OpenDialogCommandDataContext
             set { SetValue(OpenDialogCommandDataContextSourceProperty, value); }
         }
 
+        public static readonly DependencyProperty CloseOnClickAwayProperty = DependencyProperty.Register(
+            "CloseOnClickAway", typeof (bool), typeof (DialogHost), new PropertyMetadata(default(bool)));
+
+        /// <summary>
+        /// Indicates whether the dialog will close if the user clicks off the dialog, on the obscured background.
+        /// </summary>
+        public bool CloseOnClickAway
+        {
+            get { return (bool) GetValue(CloseOnClickAwayProperty); }
+            set { SetValue(CloseOnClickAwayProperty, value); }
+        }
+
+        public static readonly DependencyProperty CloseOnClickAwayParameterProperty = DependencyProperty.Register(
+            "CloseOnClickAwayParameter", typeof (object), typeof (DialogHost), new PropertyMetadata(default(object)));
+
+        /// <summary>
+        /// Parameter to provide to close handlers if an close due to click away is instigated.
+        /// </summary>
+        public object CloseOnClickAwayParameter
+        {
+            get { return (object) GetValue(CloseOnClickAwayParameterProperty); }
+            set { SetValue(CloseOnClickAwayParameterProperty, value); }
+        }
+
         public override void OnApplyTemplate()
         {
+            if (_contentCoverGrid != null)
+                _contentCoverGrid.MouseLeftButtonUp -= ContentCoverGridOnMouseLeftButtonUp;
+
             _popup = GetTemplateChild(PopupPartName) as Popup;
             _popupContentControl = GetTemplateChild(PopupContentPartName) as ContentControl;
+            _contentCoverGrid = GetTemplateChild(ContentCoverGridName) as Grid;
+
+            if (_contentCoverGrid != null)
+                _contentCoverGrid.MouseLeftButtonUp += ContentCoverGridOnMouseLeftButtonUp;
 
             VisualStateManager.GoToState(this, SelectState(), false);
 
@@ -486,6 +520,12 @@ protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
             base.OnPreviewMouseDown(e);
         }
 
+        private void ContentCoverGridOnMouseLeftButtonUp(object sender, MouseButtonEventArgs mouseButtonEventArgs)
+        {
+            if (CloseOnClickAway)
+                Close(CloseOnClickAwayParameter);
+        }
+
         private void OpenDialogHandler(object sender, ExecutedRoutedEventArgs executedRoutedEventArgs)
         {
             if (executedRoutedEventArgs.Handled) return;

MaterialDesignThemes.Wpf/Themes/Generic.xaml

@@ -478,7 +478,7 @@
                                             <BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="IsOpen">
                                                 <DiscreteBooleanKeyFrame Value="True" KeyTime="0" />
                                             </BooleanAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Opacity">
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentCoverGrid" Storyboard.TargetProperty="Opacity">
                                                 <EasingDoubleKeyFrame Value="0" KeyTime="0" />
                                                 <EasingDoubleKeyFrame Value="0.56" KeyTime="0:0:0.3">
                                                     <EasingDoubleKeyFrame.EasingFunction>
@@ -518,7 +518,7 @@
                                                 <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0" />
                                                 <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0.3" />
                                             </BooleanAnimationUsingKeyFrames>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Opacity">
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentCoverGrid" Storyboard.TargetProperty="Opacity">
                                                 <EasingDoubleKeyFrame Value="0.56" KeyTime="0" />
                                                 <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.3">
                                                     <EasingDoubleKeyFrame.EasingFunction>
@@ -561,7 +561,7 @@
                                         <BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="IsOpen">
                                             <DiscreteBooleanKeyFrame Value="True" KeyTime="0" />
                                         </BooleanAnimationUsingKeyFrames>
-                                        <DoubleAnimation Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Opacity"
+                                        <DoubleAnimation Storyboard.TargetName="PART_ContentCoverGrid" Storyboard.TargetProperty="Opacity"
                                                          Duration="0"
                                                          To=".56" />
                                         <DoubleAnimation Storyboard.TargetName="PART_PopupContentElement" Storyboard.TargetProperty="Opacity"
@@ -631,11 +631,12 @@
                                     x:Name="ContentPresenter" Opacity="1"                    
                                     Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
                         </AdornerDecorator>
-                        <Grid x:Name="ContentGrid" Background="Black" Opacity="0" IsHitTestVisible="False" Focusable="False" />
+                        <Grid x:Name="PART_ContentCoverGrid" Background="Black" Opacity="0" IsHitTestVisible="False" Focusable="False" />
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsOpen" Value="True">
                             <Setter TargetName="ContentPresenter" Property="IsEnabled" Value="False" />
+                            <Setter TargetName="PART_ContentCoverGrid" Property="IsHitTestVisible" Value="True" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>