What element to use if I only need an placement target element

I want to show a flyout at a specific place. I want to specify a placement target element in XAML, but I want to make sure I am using the "lightest" element possible, given that I don't want that element to ever be visible or interacted with.

Is there a "recommended" or "correct" element to use? If not, what would be the "lightest" element to use? Or am I overthinking this and should just use a button?


ANSWERS:


I want to show a flyout at a specific place.

The place of FrameworkElements are based on the panel that you are using to hold them. If you want to show your flyout based on a FrameworkElement being placed in a specific place, you can use Canvas to position your FrameworkElement.

I want to specify a placement target element in XAML, but I want to make sure I am using the "lightest" element possible.

Flyout.ShowAt takes FrameworkElement as it's placement target. So I think the "lightest" element would be an empty custom FrameworkElement like below:

public class MyElement:FrameworkElement
{
}

And you can put it into XAML and use Canvas to position it:

<Page
  x:Class="PopupSample.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:PopupSample"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

<Canvas>
    <Button Name="btnClick" Canvas.Left="50" Canvas.Top="500" Click="btnClick_Click">Click Me</Button>
    <local:MyElement x:Name="myEle" Canvas.Left="100" Canvas.Top="100"></local:MyElement>
</Canvas>

Code-Behind:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void btnClick_Click(object sender, RoutedEventArgs e)
    {
        Flyout flyout = new Flyout();
        TextBlock tbContent = new TextBlock
        {
            Text= "this is a flyout content"
        };
        flyout.Content = tbContent;
        flyout.ShowAt(myEle);
    }
}

Grid is a pretty light element, it's just a simple Panel-derived class without any child elements. Button is a Control, meaning it has a template which will create many child elements that make up its visual appearance.

Are you saying you want to use a dummy element just for the purpose of specifying the position of the flyout which you will show programmatically? If you want to avoid the element altogether, then maybe a Popup would be a better choice.



 MORE:


 ? Moving items in UWP
 ? UserControl throwing: Element is already the child of another element
 ? UWP/WinRT: How to use VisualState Triggers to change the styling of all controls of a certain type?
 ? UWP/WinRT: How to use VisualState Triggers to change the styling of all controls of a certain type?
 ? UWP/WinRT: How to use VisualState Triggers to change the styling of all controls of a certain type?
 ? UWP/WinRT: How to use VisualState Triggers to change the styling of all controls of a certain type?
 ? Adaptive trigger doesn't work in a user control
 ? UWP/WinRT: How to move a button when the window is resized into a new position?
 ? UWP/WinRT: Is it possible to change a Style using an AdaptiveTrigger?
 ? How to clear the date bound to a CalendarDatePicker if certain conditions occur in UWP?