feat(drawer): IsLightDismissEnabled

doc/controls/DrawerControl.md

@@ -56,6 +56,7 @@ DrawerDepth|double?|Get or sets the depth (width or height depending on the `Ope
 EdgeSwipeDetectionLength|double?|Gets or sets the length (width or height depending on the `OpenDirection`) of the area allowed for opening swipe gesture. <br/>note: By default, this value is null allowing the drawer to be swiped open from anywhere. Setting a positive value will enforce the edge swipe for opening.
 FitToDrawerContent|bool=true|Get or sets a value that indicates whether the drawer will fit to content and aligned to the edge or stretch to fill the control when `DrawerDepth` is null.
 IsGestureEnabled|bool=`true`|Get or sets a value that indicates whether the user can interact with the control using gesture.
+IsLightDismissEnabled|bool=`true`|Gets or sets a value that indicates whether the drawer can be light-dismissed.
 IsOpen|bool|Gets or sets a value that specifies whether the drawer is open.
 LightDismissOverlayBackground|Brush|Gets or sets the brush used to paint the light dismiss overlay.
 OpenDirection|DrawerOpenDirection=Right|Gets or sets the direction in which the drawer opens toward. <br/>note: The position of the drawer when opened is the opposite of this value.
@@ -118,7 +119,9 @@ DrawerDepth|OpenPaneLength
 EdgeSwipeDetectionLength|utu:DrawerControlBehavior.EdgeSwipeDetectionLength
 FitToDrawerContent|utu:DrawerControlBehavior.FitToDrawerContent
 IsGestureEnabled|utu:DrawerControlBehavior.IsGestureEnabled
+IsLightDismissEnabled|utu:DrawerControlBehavior.IsLightDismissEnabled
 IsOpen|IsPaneOpen
 LightDismissOverlayBackground|utu:DrawerControlBehavior.LightDismissOverlayBackground
 OpenDirection|utu:DrawerControlBehavior.OpenDirection
+
 > Content and DrawerContent are populated with those of NavigationView.

doc/controls/DrawerFlyoutPresenter.md

@@ -21,12 +21,14 @@ xmlns:utu="using:Uno.Toolkit.UI"
     <Setter Property="utu:DrawerFlyoutPresenter.DrawerLength" Value="0.66*" />
     <Setter Property="utu:DrawerFlyoutPresenter.LightDismissOverlayBackground" Value="#80808080" />
     <Setter Property="utu:DrawerFlyoutPresenter.IsGestureEnabled" Value="True" />
+    <Setter Property="utu:DrawerFlyoutPresenter.IsLightDismissEnabled" Value="True" />
 </Style>
 <!-- and/or -->
 <utu:DrawerFlyoutPresenter OpenDirection="Up"
                            DrawerLength="0.66*"
                            LightDismissOverlayBackground="#80808080"
-                           IsGestureEnabled="True" />
+                           IsGestureEnabled="True"
+                           IsLightDismissEnabled="True" />
 ```
 
 > [!IMPORTANT]
@@ -51,7 +53,8 @@ xmlns:utu="using:Uno.Toolkit.UI"
                 <utu:DrawerFlyoutPresenter OpenDirection="{TemplateBinding utu:DrawerFlyoutPresenter.OpenDirection}"
                                             DrawerLength="{TemplateBinding utu:DrawerFlyoutPresenter.DrawerLength}"
                                             LightDismissOverlayBackground="{TemplateBinding utu:DrawerFlyoutPresenter.LightDismissOverlayBackground}"
-                                            IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}" />
+                                            IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}"
+                                            IsLightDismissEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsLightDismissEnabled}" />
             </ControlTemplate>
         </Setter.Value>
     </Setter>
@@ -66,6 +69,7 @@ OpenDirection|DrawerOpenDirection=`Up`|Gets or sets the direction in which the d
 DrawerLength|GridLength=`0.66*`|Get or sets the length (width or height depending on the `OpenDirection`) of the drawer.\*
 LightDismissOverlayBackground|Brush|Gets or sets the brush used to paint the light dismiss overlay. The default value is `#80808080` (from the default style).
 IsGestureEnabled|bool=`true`|Get or sets a value that indicates whether the user can interact with the control using gesture.
+IsLightDismissEnabled|bool=`true`|Gets or sets a value that indicates whether the drawer flyout can be light-dismissed.
 
 notes:
 

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerControlSamplePage.xaml

@@ -30,6 +30,7 @@
 													   IsOpen="{Binding ElementName=OptionIsOpen, Path=IsChecked, Mode=TwoWay}"
 													   OpenDirection="{Binding ElementName=OptionOpenDirection, Path=SelectedItem}"
 													   IsGestureEnabled="{Binding ElementName=OptionIsGestureEnabled, Path=IsChecked}"
+													   IsLightDismissEnabled="{Binding ElementName=OptionIsLightDismissEnabled, Path=IsChecked}"
 													   FitToDrawerContent="{Binding ElementName=OptionFitToDrawerContent, Path=IsChecked}"
 													   MinHeight="300">
 
@@ -73,6 +74,9 @@
 										<ToggleButton x:Name="OptionIsGestureEnabled"
 													  Content="IsGestureEnabled"
 													  IsChecked="True" />
+										<ToggleButton x:Name="OptionIsLightDismissEnabled"
+													  Content="IsLightDismissEnabled"
+													  IsChecked="True" />
 										<TextBlock>
 											<Run Text="EdgeSwipeDetectionLength:" />
 											<Run Text="{Binding ElementName=SampleDrawerControl, Path=EdgeSwipeDetectionLength,TargetNullValue='(null)'}" />

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutSamplePage.xaml

@@ -29,7 +29,8 @@
 												   OpenDirection="{TemplateBinding utu:DrawerFlyoutPresenter.OpenDirection}"
 												   DrawerLength="{TemplateBinding utu:DrawerFlyoutPresenter.DrawerLength}"
 												   LightDismissOverlayBackground="{TemplateBinding utu:DrawerFlyoutPresenter.LightDismissOverlayBackground}"
-												   IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}" />
+												   IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}"
+												   IsLightDismissEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsLightDismissEnabled}" />
 					</ControlTemplate>
 				</Setter.Value>
 			</Setter>
@@ -201,6 +202,23 @@
 										</Flyout>
 									</Button.Flyout>
 								</Button>
+								<Button Content="No LightDismiss Drawer">
+									<Button.Flyout>
+										<Flyout Placement="Full">
+											<Flyout.FlyoutPresenterStyle>
+												<Style BasedOn="{StaticResource DrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
+													<Setter Property="utu:DrawerFlyoutPresenter.IsLightDismissEnabled" Value="False" />
+												</Style>
+											</Flyout.FlyoutPresenterStyle>
+											<Border utu:SafeArea.Insets="All" Padding="16,16,0,0">
+												<StackPanel Padding="8">
+													<TextBlock Text="text" />
+													<Button Content="button" />
+												</StackPanel>
+											</Border>
+										</Flyout>
+									</Button.Flyout>
+								</Button>
 							</StackPanel>
 
 						</StackPanel>

src/Uno.Toolkit.UI/Behaviors/DrawerControlBehavior.cs

@@ -22,7 +22,7 @@ namespace Uno.Toolkit.UI
 	/// when it is nested inside another control like <see cref="SplitView"/> or <see cref="NavigationView"/>.
 	/// </summary>
 	/// <example>
-	/// Usage exmaple:
+	/// Usage example:
 	/// <code>
 	/// &lt;muxc:NavigationView
 	///   behaviors:DrawerControlBehavior.LightDismissOverlayBackground=&quot;SkyBlue&quot;
@@ -103,6 +103,20 @@ public static class DrawerControlBehavior
 		[DynamicDependency(nameof(GetIsGestureEnabled))]
 		public static void SetIsGestureEnabled(DependencyObject obj, bool value) => obj.SetValue(IsGestureEnabledProperty, value);
 
+		#endregion
+		#region DependencyProperty: IsLightDismissEnabled = true
+
+		public static DependencyProperty IsLightDismissEnabledProperty { [DynamicDependency(nameof(GetIsLightDismissEnabled))] get; } = DependencyProperty.RegisterAttached(
+			"IsLightDismissEnabled",
+			typeof(bool),
+			typeof(DrawerControlBehavior),
+			new PropertyMetadata(DrawerControl.DefaultValues.IsLightDismissEnabled));
+
+		[DynamicDependency(nameof(SetIsLightDismissEnabled))]
+		public static bool GetIsLightDismissEnabled(DependencyObject obj) => (bool)obj.GetValue(IsLightDismissEnabledProperty);
+		[DynamicDependency(nameof(GetIsLightDismissEnabled))]
+		public static void SetIsLightDismissEnabled(DependencyObject obj, bool value) => obj.SetValue(IsLightDismissEnabledProperty, value);
+
 		#endregion
 		#region DependencyProperty: FitToDrawerContent = true
 

src/Uno.Toolkit.UI/Controls/DrawerControl/DrawerControl.Enhanced.xaml

@@ -48,6 +48,8 @@
 				Value="50" />
 		<Setter Property="utu:DrawerControlBehavior.IsGestureEnabled"
 				Value="True" />
+		<Setter Property="utu:DrawerControlBehavior.IsLightDismissEnabled"
+				Value="True" />
 		<Setter Property="utu:DrawerControlBehavior.FitToDrawerContent"
 				Value="False" />
 
@@ -65,6 +67,7 @@
 									   LightDismissOverlayBackground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(utu:DrawerControlBehavior.LightDismissOverlayBackground)}"
 									   EdgeSwipeDetectionLength="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(utu:DrawerControlBehavior.EdgeSwipeDetectionLength)}"
 									   IsGestureEnabled="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(utu:DrawerControlBehavior.IsGestureEnabled)}"
+									   IsLightDismissEnabled="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(utu:DrawerControlBehavior.IsLightDismissEnabled)}"
 									   FitToDrawerContent="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(utu:DrawerControlBehavior.FitToDrawerContent)}"
 									   Background="{TemplateBinding Background}">
 						<utu:DrawerControl.Content>
@@ -113,6 +116,8 @@
 				Value="50" />
 		<Setter Property="utu:DrawerControlBehavior.IsGestureEnabled"
 				Value="True" />
+		<Setter Property="utu:DrawerControlBehavior.IsLightDismissEnabled"
+				Value="True" />
 		<Setter Property="utu:DrawerControlBehavior.FitToDrawerContent"
 				Value="False" />
 
@@ -149,6 +154,7 @@
 									   utu:DrawerControlBehavior.LightDismissOverlayBackground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(utu:DrawerControlBehavior.LightDismissOverlayBackground)}"
 									   utu:DrawerControlBehavior.EdgeSwipeDetectionLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(utu:DrawerControlBehavior.EdgeSwipeDetectionLength)}"
 									   utu:DrawerControlBehavior.IsGestureEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(utu:DrawerControlBehavior.IsGestureEnabled)}"
+									   utu:DrawerControlBehavior.IsLightDismissEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(utu:DrawerControlBehavior.IsLightDismissEnabled)}"
 									   utu:DrawerControlBehavior.FitToDrawerContent="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(utu:DrawerControlBehavior.FitToDrawerContent)}"
 									   Style="{StaticResource DrawerSplitViewStyle}">
 

src/Uno.Toolkit.UI/Controls/DrawerControl/DrawerControl.Properties.cs

@@ -31,11 +31,13 @@ public partial class DrawerControl
 		 * LightDismissOverlayBackground: ...
 		 * EdgeSwipeDetectionLength: The length (width or height depending on the OpenDirection) of the area allowed for opening swipe gesture.
 		 * IsGestureEnabled: Used to en/disable swipe gesture.
+		 * IsLightDismissEnabled: Used to en/disable light-dismiss.
 		 */
 
 		internal static class DefaultValues
 		{
 			public const bool IsGestureEnabled = true;
+			public const bool IsLightDismissEnabled = true;
 			public const bool FitToDrawerContent = true;
 		}
 
@@ -211,6 +213,24 @@ public bool IsGestureEnabled
 			set => SetValue(IsGestureEnabledProperty, value);
 		}
 
+		#endregion
+		#region DependencyProperty: IsLightDismissEnabled = true
+
+		public static DependencyProperty IsLightDismissEnabledProperty { get; } = DependencyProperty.Register(
+			nameof(IsLightDismissEnabled),
+			typeof(bool),
+			typeof(DrawerControl),
+			new PropertyMetadata(DefaultValues.IsLightDismissEnabled));
+
+		/// <summary>
+		/// Gets or sets a value that indicates whether the drawer can be light-dismissed.
+		/// </summary>
+		public bool IsLightDismissEnabled
+		{
+			get => (bool)GetValue(IsLightDismissEnabledProperty);
+			set => SetValue(IsLightDismissEnabledProperty, value);
+		}
+
 		#endregion
 
 		private static void OnDrawerDepthChanged(DependencyObject control, DependencyPropertyChangedEventArgs e) => ((DrawerControl)control).OnDrawerDepthChanged(e);

src/Uno.Toolkit.UI/Controls/DrawerControl/DrawerControl.cs

@@ -272,6 +272,8 @@ private void OnSizeChanged(object sender, SizeChangedEventArgs e)
 
 		private void OnLightDismissOverlayTapped(object sender, TappedRoutedEventArgs e)
 		{
+			if (!IsLightDismissEnabled) return;
+
 			StopRunningAnimation();
 			UpdateIsOpen(false);
 		}

src/Uno.Toolkit.UI/Controls/DrawerFlyout/DrawerFlyoutPresenter.Properties.cs

@@ -23,6 +23,7 @@ internal static class DefaultValues
 			public static readonly GridLength DrawerLength = new GridLength(0.66, GridUnitType.Star);
 			public const DrawerOpenDirection OpenDirection = DrawerOpenDirection.Up;
 			public const bool IsGestureEnabled = true;
+			public const bool IsLightDismissEnabled = true;
 		}
 
 		#region DependencyProperty: [Private] IsOpen
@@ -150,6 +151,29 @@ public bool IsGestureEnabled
 		[DynamicDependency(nameof(GetIsGestureEnabled))]
 		public static void SetIsGestureEnabled(DependencyObject obj, bool value) => obj.SetValue(IsGestureEnabledProperty, value);
 
+		#endregion
+		#region DependencyProperty: IsLightDismissEnabled = true
+
+		public static DependencyProperty IsLightDismissEnabledProperty { [DynamicDependency(nameof(GetIsGestureEnabled))] get; } = DependencyProperty.RegisterAttached(
+			nameof(IsLightDismissEnabled),
+			typeof(bool),
+			typeof(DrawerFlyoutPresenter),
+			new PropertyMetadata(DefaultValues.IsLightDismissEnabled));
+
+		/// <summary>
+		/// Gets or sets a value that indicates whether the drawer flyout can be light-dismissed.
+		/// </summary>
+		public bool IsLightDismissEnabled
+		{
+			get => (bool)GetValue(IsLightDismissEnabledProperty);
+			set => SetValue(IsLightDismissEnabledProperty, value);
+		}
+
+		[DynamicDependency(nameof(SetIsLightDismissEnabled))]
+		public static bool GetIsLightDismissEnabled(DependencyObject obj) => (bool)obj.GetValue(IsLightDismissEnabledProperty);
+		[DynamicDependency(nameof(GetIsLightDismissEnabled))]
+		public static void SetIsLightDismissEnabled(DependencyObject obj, bool value) => obj.SetValue(IsLightDismissEnabledProperty, value);
+
 		#endregion
 
 		private static void OnDrawerLengthChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) => (sender as DrawerFlyoutPresenter)?.OnDrawerLengthChanged(e);

src/Uno.Toolkit.UI/Controls/DrawerFlyout/DrawerFlyoutPresenter.cs

@@ -252,6 +252,8 @@ private void OnManipulationCompleted(object sender, ManipulationCompletedRoutedE
 
 		private void OnLightDismissOverlayTapped(object sender, TappedRoutedEventArgs e)
 		{
+			if (!IsLightDismissEnabled) return;
+
 			StopRunningAnimation();
 			UpdateIsOpen(false);
 		}

src/Uno.Toolkit.UI/Controls/DrawerFlyout/DrawerFlyoutPresenter.xaml

@@ -73,7 +73,8 @@
 											   OpenDirection="{TemplateBinding utu:DrawerFlyoutPresenter.OpenDirection}"
 											   DrawerLength="{TemplateBinding utu:DrawerFlyoutPresenter.DrawerLength}"
 											   LightDismissOverlayBackground="{TemplateBinding utu:DrawerFlyoutPresenter.LightDismissOverlayBackground}"
-											   IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}" />
+											   IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}"
+											   IsLightDismissEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsLightDismissEnabled}" />
 				</ControlTemplate>
 			</Setter.Value>
 		</Setter>