Getting "Placement target needs to be in the visual tree" error with Flyout.ShowAt

Question

I've got an app bar button with a menu of options:

<AppBarButton x:Name="AddButton" x:Uid="AddItem" Icon="Add" RequestedTheme="Dark">
     <AppBarButton.Flyout>
         <MenuFlyout>
              <MenuFlyoutItem Label="Option 1" Click="MenuFlyoutItem_Click" Tag="option1"/>
              <MenuFlyoutItem Label="Option 2" Click="MenuFlyoutItem_Click" Tag="option2"/>
              <MenuFlyoutItem Label="Option 3" Click="MenuFlyoutItem_Click" Tag="option3"/>
         </MenuFlyout>
     </AppBarButton.Flyout>
 </AppBarButton>

The intention is that when the user picks an option, a Flyout window appears next to the button where the window allows the user to provide further information, e.g.:

<Flyout x:Name="MediaTitle">
    <Grid>
         <TextBlock Text"Title" Style="{StaticResource BaseTextBlockStyle}" />
         <TextBox x:Name="descTitle" HorizontalAlignment="Left" Margin="0,30,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="300" />
         <Button x:Name="descTitle_OK" x:Uid="OK" HorizontalAlignment="Right" Margin="0,73,0,0" VerticalAlignment="Top" Click="DescTitle_OKClick" />
    </Grid>
</Flyout>

The Flyout is defined in the page resources section.

In my code, I go:

MediaTitle.ShowAt(AddButton);

but I then get the error "Placement target needs to be in the visual tree".

Is this happening because the button is on the AppBar and not on the page "proper"? If so, is there a way to fix this?

Answer 1

It turns out that the answer is quite simple - I just needed to make sure that the app bar was visible. The flyout is then displayed near the button on the app bar.

Due to logic/code that I hadn't shown, the app bar was previously closed.