fix: flyout cannot be light dismissed by clicking outside of its content

unoplatform · Mar 25, 2020 · cb44458 · cb44458
1 parent fe12769
commit cb44458
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/Flyout/Flyout_Simple.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/Flyout/Flyout_Simple.xaml
@@ -28,6 +28,17 @@
 				</Setter.Value>
 			</Setter>
 		</Style>
+		<Style x:Key="CenteredFlyoutPresenterStyle" TargetType="FlyoutPresenter">
+			<Setter Property="Template">
+				<Setter.Value>
+					<ControlTemplate TargetType="FlyoutPresenter">
+						<ContentPresenter Content="{TemplateBinding Content}"
+										  HorizontalAlignment="Center"
+										  VerticalAlignment="Center" />
+					</ControlTemplate>
+				</Setter.Value>
+			</Setter>
+		</Style>
 	</UserControl.Resources>
 
 	<controls:SampleControl SampleDescription="Flyout tests">
@@ -100,6 +111,19 @@
 						</Button.Flyout>
 					</Button>
 
+					<Button Content="Show Flyout Centered Full"
+							Height="50"
+							Width="150">
+						<Button.Flyout>
+							<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource CenteredFlyoutPresenterStyle}">
+								<Border Background="SkyBlue"
+										Height="80"
+										Width="80">
+								</Border>
+							</Flyout>
+						</Button.Flyout>
+					</Button>
+
 					<Button Content="Show Flyout Full Overlay"
 							Height="50"
 							Width="150">

diff --git a/src/Uno.UI/UI/Xaml/Controls/Flyout/FlyoutPopupPanel.cs b/src/Uno.UI/UI/Xaml/Controls/Flyout/FlyoutPopupPanel.cs
@@ -26,6 +26,8 @@ public FlyoutBasePopupPanel(FlyoutBase flyout) : base(flyout._popup)
 		protected override FlyoutPlacementMode PopupPlacement => _flyout.Placement;
 
 		protected override FrameworkElement AnchorControl => _flyout.Target as FrameworkElement;
+
+		internal FlyoutBase Flyout => _flyout;
 	}
 }
 #endif
diff --git a/src/Uno.UI/UI/Xaml/Controls/Flyout/FlyoutPresenter.cs b/src/Uno.UI/UI/Xaml/Controls/Flyout/FlyoutPresenter.cs
@@ -1,4 +1,8 @@
-using Windows.UI.Xaml.Input;
+using Uno.UI;
+using Windows.Foundation;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
 
 namespace Windows.UI.Xaml.Controls
 {
@@ -10,8 +14,18 @@ public FlyoutPresenter()
 
 		protected override void OnPointerPressed(PointerRoutedEventArgs args)
 		{
-			// All pointer-related should be "eaten" to prevent closing
-			// the flyout when a tap is done in its content
+			if (this.GetTemplateRoot() is FrameworkElement root && this.Parent is FlyoutBasePopupPanel panel)
+			{
+				// allow flyout to be closed by clicking outside its content
+				var rootCoords = args.GetCurrentPoint(root).Position;
+
+				if (0 > rootCoords.X || rootCoords.X > root.ActualWidth ||
+					0 > rootCoords.Y || rootCoords.Y > root.ActualHeight)
+				{
+					panel.Flyout.Hide();
+				}
+			}
+
 			args.Handled = true;
 		}