Specify Popup location, throughout page navigation

Question

Hello I have an issue with positioning a popup, in a WP8 app.

My code is that I have instantiated a popup, where the child is a usercontrol, like:

Popup          


        

Answer 1

This is not possible in Windows Phone 8. It would be possible in WinRT 8.1. The reason is that you need to go up further than the control where the navigation occurs, and that is the PhoneApplicationFrame for Windows Phone 8. Per the documentation:

Frames

A frame integrates with the Windows Phone look and feel so that it appears like any other application. Only a single frame is available to the application with no exceptions. A frame includes the following characteristics:

•Exposes properties from a hosted page such as screen orientation

•Exposes a client area where pages are rendered

•Exposes a NavigationService that facilitates navigating between pages

•Reserves space for the status bar and Application Bar

If you could go above the PhoneApplicationFrame and host multiple PhoneApplicationFrames, you could put some XAML into it that would allow you to interact with multiple Frames and place something in between the page navigations. However, you can't in Silverlight 8.0. In face, the RootFrame does not have a parent, so you can't even make any other control it's sibling.

If you're willing to build your own navigation service (which I don't recommend), you can simulate this within a single page using UserControls.

Answer 2

I am not sure but try something like this.

var activePage = (PhoneApplicationPage) RootFrame.Content;
var pageContent = (Grid) activePage.Content;

UsercontrolElement childpopup = new UsercontrolElement();

Grid.SetRowSpan(childpopup , pageContent.RowDefinitions.Count);
pageContent.Children.Add(childpopup );

Answer 3

If I understand your question correctly, this can be achieved by customizing the PhoneApplicationFrame's style of your phone application.

Inside the ContentTemplate of the default style of PhoneApplicationFrame, you will find a ContentPresenter that hosts the pages of your app. Here you simply need to create another container that hosts your usercontrol on top of this ConcentPresenter. Also you don't have to use a Popup here to host your usercontrol, I'd simply wrap it within another Grid. The reason for this is that Popup has some serious performance issues in WP8. If you have the xaml code placed below the ContentPresenter, it will always be on top of the pages.

<Style TargetType="phone:PhoneApplicationFrame">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}" />
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="BorderBrush" Value="{x:Null}" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="phone:PhoneApplicationFrame">
                <Border x:Name="ClientArea" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" d:DesignWidth="480" d:DesignHeight="800" Loaded="ClientArea_Loaded">
                    <Border.Resources>
                        <Storyboard x:Name="ShowTransitionPopup" AutoReverse="True">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="TransitionPopup">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-124"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TransitionPopup">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard> 
                    </Border.Resources>
                    <Grid>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Grid x:Name="TransitionPopup" Canvas.ZIndex="9999" Background="{StaticResource PhoneAccentBrush}" Height="240" Width="360" Opacity="0" RenderTransformOrigin="0.5,0.5" >
                            <!-- put your control here -->
                            <Grid.RenderTransform>
                                <CompositeTransform/>
                            </Grid.RenderTransform>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In the above example, I've created a little animation called ShowTransitionPopup and it is called when the pages are navigating (OnNavigatingFrom). I didn't specifically write code to position the container since there's just one container you need to handle, it should be quite easy to implement.

I've attached a working sample here for your reference. By pressing the navigation button on the bottom of the page, you will see an animated rectangle fade in and out on the UI.

Hope this helps!