在整个页面导航中指定弹出位置 [英] Specify Popup location, throughout page navigation

问题描述

您好，我在 WP8 应用中定位弹出窗口时遇到问题.

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 CenterPopup = new Popup();
LayoutRoot.Children.Add(CenterPopup);
CenterPopup = new UsercontrolElement();

此代码将使我的 UsercontrolElement 精确地出现在中间，因为它在 xaml 代码的设计视图中看起来.问题是我的 UsercontrolElement 是一个等待屏幕，我希望在后面的页面导航期间可以看到它.将 Popup 添加到 LayoutRoot 时，这是不可能的.

This code would make my UsercontrolElement appear precisely in the middle, as it looks in the design view for the xaml code. The problem is that my UsercontrolElement is a waiting screen that I want to be visible during a page navigation in the back. This is not possible when the Popup is added to the LayoutRoot.

如果我改为使弹出窗口可见并指定大小等，定位非常困难，我必须通过对 CompositTransform 的反复试验来处理用户代码中的 LandscapeOrientation.

If I instead make the popup visible and specify size and what not, the positioning is extremely hard, and I have to handle LandscapeOrientation in usercode by trial and error for CompositTransform.

因此，我想知道您是否可以使用上面的代码，但不是将元素添加到 LayoutRoot，而是将其添加到不仅是页面的根目录的地方，以便弹出窗口继续位于其预期位置.我已经说明了以下问题:

I was therefore wondering if you could use the above code but instead of adding the element to LayoutRoot, you would at it to something that is not only a root of the page such that the popup continues to have its intended position. I have illustrated the issue below:

这意味着可以从后面的代码中完成插入弹出窗口.但它独立于页面.因此，必须为每个 pageOrientation 定义旋转，并为每个弹出窗口调整旋转，这不是一个好的解决方案.编辑

This means it is possible to accomplish inserting the popup from the code behind. But it is independent of the page. Therefore one has to define the rotation for each pageOrientation, and fit the rotation for every popup, which is not a nice solution. Edit

好的，所以我尝试使用 VisualTreehelper 并这样做:

Okay so I tried to play around with the VisualTreehelper and did this:

        Border outBorder = (Border)VisualTreeHelper.GetChild(Application.Current.RootVisual, 0);
        ContentPresenter outContent = (ContentPresenter)VisualTreeHelper.GetChild(outBorder, 0);
        outContent.Content = popup;

这给出了上图中所需的效果.但是，第二个屏幕永远不会加载.那就是我有一个从不触发的loadedEvent.

This gives the Desired effect from the image above. However, the secondscreen is never loaded. That is I have a loadedEvent that is never fired.

因此，解决方案可能是使用 VisualTreeHelper 更上一层楼，但据我所知，这是页面?然后我会回到同样的问题.

The solution would therefore might be to go one step up with the VisualTreeHelper, but as far as I know this is the page? And then I would be back to the same issue.

有人有想法吗?

推荐答案

如果我理解你的问题，这可以通过自定义 PhoneApplicationFrame 的 style 来实现你的手机应用程序.

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

在 PhoneApplicationFrame 的默认样式的 ContentTemplate 中，您会找到一个托管应用页面的 ContentPresenter.在这里，您只需要在 ConcentPresenter 之上创建另一个容器来承载您的用户控件.此外，您不必在此处使用 Popup 来托管您的用户控件，我只需将其包装在另一个 Grid 中.原因是 Popup 在 WP8 中存在一些严重的性能问题.如果您将 xaml 代码放在 ContentPresenter 下方，它将始终位于页面顶部.

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>

在上面的示例中，我创建了一个名为 ShowTransitionPopup 的小动画，它在页面导航时调用 (OnNavigatingFrom).我没有专门编写代码来定位容器，因为您只需要处理一个容器，它应该很容易实现.

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.

我在这里附上了一个工作示例供您参考.通过按下页面底部的导航按钮，您将在 UI 上看到一个动画矩形淡入淡出.

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.

希望这会有所帮助！

这篇关于在整个页面导航中指定弹出位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！