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

问题描述

您好我有一个定位弹出，在WP8的应用程序的问题。

我的代码是我实例化一个弹出窗口，那里的孩子是一个用户控件，这样的：

 弹出CenterPopup =新的弹出窗口（）; 
 LayoutRoot.Children.Add（CenterPopup）; 
 CenterPopup =新UsercontrolElement（）; 
  

此代码将使我的 UsercontrolElement 显示精确在中间，因为它看起来在为XAML代码设计视图。问题是，我的 UsercontrolElement 是我想在后面的页面导航过程中是可见的等待画面。当弹出加到LayoutRoot这是不可能的。

如果我代替使弹出可见并指定大小和没有什么，定位是极其困难的，我必须通过试验和错误的CompositTransform处理LandscapeOrientation的用户代码。

我因此想，如果你可以使用上面的代码，但不是添加元素LayoutRoot，你会在它的东西，不仅是在网页的根部，使得在弹出继续具有其预定的位置。
我已经说明了这个问题如下：

这意味着它是能够实现从代码插入弹出的后面。但它是独立于页面。因此人们必须定义每个pageOrientation的旋转，并且适合的旋转的每个弹出，这不是一个很好的解决方案。
修改

好了，所以我试着玩的VisualTreehelper，做这样的：

 边境outBorder =（境）VisualTreeHelper.GetChild（Application.Current.RootVisu​​al，0）; 
 ContentPresenter outContent =（ContentPresenter）VisualTreeHelper.GetChild（outBorder，0）; 
 outContent.Content =弹出; 
  

这给出了从上面的图像期望的效果。然而，secondscreen从未加载。这是我有一个永远不会解雇一个loadedEvent。

该解决方案将因此可能会多走了一步了与VisualTreeHelper，但据我所知，这是页？然后我会回到相同的问题。

任何人有一个idea`？

解决方案

如果我正确地理解你的问题，这可以通过自定义 PhoneApplicationFrame 的风格的手机应用程序来实现。

在的ContentTemplate 的 PhoneApplicationFrame 的默认样式，你会发现一个 ContentPresenter 承载您的应用程序的页面。在这里，你只需要在承载上这 ConcentPresenter 顶部的用户控件另一个容器。你也不必使用弹出这里承载您的用户控件，我只是在另一个电网。这样做的原因是，弹出在WP8的一些严重的性能问题。如果你有放在 ContentPresenter ，它总是会在页面的顶部。

<$ P $下面的XAML代码p> <风格的TargetType =电话：PhoneApplicationFrame>
< setter属性=IsTabStopVALUE =FALSE/>
< setter属性=前景VALUE ={StaticResource的PhoneForegroundBrush}/>
< setter属性=字号VALUE ={StaticResource的PhoneFontSizeNormal}/>
< setter属性=的FontFamilyVALUE ={StaticResource的PhoneFontFamilyNormal}/>
< setter属性=的Horizo​​ntalAlignmentVALUE =弹力/>
< setter属性=VerticalAlignmentVALUE =弹力/>
< setter属性=Horizo​​ntalContentAlignmentVALUE =弹力/>
< setter属性=VerticalContentAlignmentVALUE =弹力/>
< setter属性=背景值=透明/>
< setter属性=了borderThicknessVALUE =0/>
< setter属性=BorderBrushVALUE ={X：空}/>
< setter属性=填充VALUE =0/>
< setter属性=模板>
< Setter.Value>
<的ControlTemplate的TargetType =电话：PhoneApplicationFrame>
< BORDER X：NAME =ClientArea的Horizo​​ntalAlignment ={TemplateBinding的Horizo​​ntalAlignment}VerticalAlignment ={TemplateBinding VerticalAlignment}后台={TemplateBinding背景}BorderBrush ={TemplateBinding BorderBrush}了borderThickness ={ TemplateBinding了borderThickness}D：DesignWidth =480D：DesignHeight =800加载=ClientArea_Loaded>
< Border.Resources>
<情节提要X：NAME =ShowTransitionPopup自动翻转=真>
< D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.RenderTransform）（CompositeTransform.TranslateX）。Storyboard.TargetName =TransitionPopup>
< EasingDoubleKeyFrame KeyTime =0值= - 124/>
将; EasingDoubleKeyFrame KeyTime =0：0：0.6值=0/>
< / DoubleAnimationUsingKeyFrames>
< D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =TransitionPopup>
< EasingDoubleKeyFrame KeyTime =0值=0/>
将; EasingDoubleKeyFrame KeyTime =0：0：0.6值=1/>
< / DoubleAnimationUsingKeyFrames>
< /故事板>
< /Border.Resources>
<网格和GT;
< ContentPresenter的Horizo​​ntalAlignment ={TemplateBinding Horizo​​ntalContentAlignment}VerticalAlignment ={TemplateBinding VerticalContentAlignment}保证金={TemplateBinding填充}CONTENT ={TemplateBinding内容}的ContentTemplate ={TemplateBinding的ContentTemplate}/>
<电网X：NAME =TransitionPopupCanvas.ZIndex =9999背景={S​​taticResource的PhoneAccentBrush}HEIGHT =240WIDTH =360不透明度=0RenderTransformOrigin =0.5,0.5 >
<！ - 在这里把你的控制 - >
< Grid.RenderTransform>
< CompositeTransform />
< /Grid.RenderTransform>
< /网格和GT;
< /网格和GT;
< /边框>
< /控件模板>
< /Setter.Value>
< /二传手>
< /样式和GT;


在上面的例子中，我创建了一个名为小动画 ShowTransitionPopup 并在页面导航它被称为（ OnNavigatingFrom ）。我没有专门编写代码来定位容器，因为那里只是你需要处理，它应该是很容易实现的一个容器。

我已经附加了一个工作样品这里供大家参考。通过按页面底部的导航按钮，你会看到进出的UI动画矩形褪色。

希望这有助于！

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();

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.

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.

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:

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

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;

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.

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.

Anyone has an idea`?

解决方案

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!

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