Is it possible to show ContextFlyout over UIElement?

Question

Hello,

Is it possible to show ContextFlyout over UIElement? If yes please write me example code.

Answer 1

<Image>
 <Image.ContextFlyout>
 <MenuFlyout>
 <MenuFlyoutItem/>
 <MenuFlyoutItem/>
 </MenuFlyout>
 </Image.ContextFlyout>
</Image>

I believe this XAML works for most contexts. Change <Image> node to your UIElement and set other necessary properties as you need. In most cases, you don't even have to handle the RightTapped event of your UIElement; instead you handle the MenuFlyoutItem.Click event.

Answer 2

@BitSmithy , your requirement are not so much clear to me: an image with the expected result would be helpful to understand better.

Anyway, below some code show a transparent Flyout at -5, -5 relative to an UIElement.

XAML

   <Border Width="100" Height="80" Background="Black">  
   	<Border.ContextFlyout>  
   		<Flyout Opened="FlyoutBase_OnOpened">  
   			<Flyout.FlyoutPresenterStyle>  
   				<Style TargetType="FlyoutPresenter">  
   					<Setter Property="Background" Value="#55FF0000"/>  
   				</Style>  
   			</Flyout.FlyoutPresenterStyle>  
   			<Grid>  
   				<TextBlock Foreground="Red">Flyout</TextBlock>  
   			</Grid>  
   		</Flyout>  
   	</Border.ContextFlyout>  
   </Border>  

FlyoutBase_OnOpened

   private void FlyoutBase_OnOpened(object sender, object e)  
   {  
   	var flyout = (Flyout)sender;  
     
   	Point transformPoint = flyout.Target.TransformToVisual(Window.Current.Content).TransformPoint(new Point(-5, -5));  
     
   	var flyoutContent = (FrameworkElement) flyout.Content;  
     
   	var flyoutPresenter = VisualTreeHelperUtils.Parent<FlyoutPresenter>(flyoutContent);  
     
   	Popup popup = VisualTreeHelper.GetOpenPopups(Window.Current).FirstOrDefault(p => p.Child == flyoutPresenter);  
   	if (popup == null) return;  
   	popup.HorizontalOffset = transformPoint.X;  
   	popup.VerticalOffset = transformPoint.Y;  
   }  

VisualTreeHelperUtils.Parent<T>

   public static T Parent<T>(DependencyObject dependencyObject)  
   {  
   	while (true)  
   	{  
   		DependencyObject parent = VisualTreeHelper.GetParent(dependencyObject);  
   		switch (parent)  
   		{  
   			case null:  
   				return default(T);  
   			case T typedParent:  
   				return typedParent;  
   			default:  
   				dependencyObject = parent;  
   				continue;  
   		}  
   	}  
   }