WPF - Show popup over its parent element

Question

I have a Popup element inside a Grid element which is shorter than the Popup (the Popup is larger than the Grid). When the Popup is open, it is showing cut by the Grid's limits.

Tried to set the ChildTransitions:

<Popup.ChildTransitions>
    <TransitionCollection>
        <PopupThemeTransition />
    </TransitionCollection>
</Popup.ChildTransitions>

And the Popup can be entirely shown meanwhile the transition effect, but then it's cut again. I really need the Popup inside the Grid, it's for a custom UserControl.

Can the Popup be seen over its parent element in any way? It's for a Windows Store App project.

Thank you!

Answer 1

Try this :below code works for me

<Page
x:Class="App14.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App14"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
mc:Ignorable="d">
<Grid Height="100" Width="100" Background="Red">
    <!--dont set height width to popup here -->
    <Popup x:Name="Popup" IsOpen="True" >            
        <Border Height="200" Width="200" Background="RoyalBlue">
           <!--popup children here-->                                                       
        </Border>
    </Popup>
</Grid>

You can use HorizontalOffset and VerticalOffset property of popup to set the horizontal and vertical distance between the target origin and the popup.