14、XAML Popup

1、Popup Fundamentals：

基本的 Popup。

Popup 是一个通过 child 属性承载内容（UIElements ）的容器,并且显示在当前窗口的顶部。但是 Popup 本书并不是一个

UIElement 并且没有默认的 visual 模版。它是依靠开发者设置其中的内容。可以通过设置 Popup 的 HorizontalOffset 和

VerticalOffset 的值或者 Canvas.Left / Canvas.Top 附加属性明确的放到窗口上面。设置 Offset 值会使 Popup 参照它的

父容器控件进行偏离。

设置 Popup 的 IsOpen 属性为 false 或 true 使其进行隐藏和显示。

        <Grid >
                 //打开 Popup
                <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked" />
            
            <Popup VerticalOffset="10" HorizontalOffset="200" x:Name="StandardPopup">
                <Border BorderThickness="2"  Width="200" Height="200">
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center" />

                       // 隐藏 Popup
                        <Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" />
                    </StackPanel>
                </Border>
            </Popup>
        </Grid>

2、Popup as 'Flyout' :

Popup 控件也可以包含 'flyout' 动画效果,比如在应用中作为一个 AppBar 或者设置面板的弹出菜单、弹出输入框等。所有

这些弹出动画，只需要包含一句属性设置： IsLightDismissEnable 的为 true 即可。

这个 IsLightDismissedEnabled 属性结合一些 animation 过度可以帮助完成一些特效。并且开发人员有责任把 Popup 控件

跟你准则放到合适的位置。

1) Show Popup (with light dismiss):

页面的 xaml :

// 控制 Popup 弹出的按钮
 <Button Content="Show Popup (with light dismiss)" 
Click="ShowPopupLightDismissClicked" />

//弹出的 Popup
 <Popup x:Name="LightDismissSimplePopup" HorizontalOffset="200" VerticalOffset="10" 
                             IsLightDismissEnabled="True">
                <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
                                     BorderThickness="2"
                                     Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 
                                     Width="200" Height="200">
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="Simple Popup" FontSize="24.667" 
                                  HorizontalAlignment="Center" />
                        <Button Content="Close" Click="ClosePopupClicked" 
                                  HorizontalAlignment="Center" />
                    </StackPanel>
                </Border>
  </Popup>

弹出按钮的 C# 单击事件:

  private void ShowPopupLightDismissClicked(object sender, RoutedEventArgs e)
        {
            if (!LightDismissSimplePopup.IsOpen) { LightDismissSimplePopup.IsOpen = true; }
        }

2) Show Popup (with light dismiss and animations) ：

本示例和 1）中类似，就是在 xaml 中 Popup 控件（LightDismissSimplePopup）增加了 PopupThemeTransition属性,使其弹出时, 有个向上淡入的效果 :

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

3) Show Popup (simulating Settings) :

这个 Popup 控件和 2) 的区别是增加的 PaneThemeTransition 效果(像设置面板类似, 从窗口右侧滑入) :

//加入到 1） 中的 Popup 中  
<Popup.ChildTransitions>
                    <TransitionCollection>
                        <PaneThemeTransition />
                    </TransitionCollection>
  </Popup.ChildTransitions>

并且通过在按钮单击的事件中,设置其水平方向参照窗口的宽度进行设置, 其按钮单击事件的 C# 代码为:

   private void ShowPopupSettingsClicked(object sender, RoutedEventArgs e)
        {
            if (!SettingsAnimatedPopup.IsOpen) 
            {
                 RootPopupBorder.Width = 646;
                
                 // Window.Current.Bounds : 获取应用程序窗口的高度和宽度的值，作为 Rect 值。
                    SettingsAnimatedPopup.HorizontalOffset = Window.Current.Bounds.Width - 646;

                SettingsAnimatedPopup.IsOpen = true; 
            }
        }

显示效果: