Popup 控件[WPF]

什么是 Popup？

Popup 控件在相对于元素或屏幕上的点的单独窗口中显示内容。 当 Popup 可见时，IsOpen 属性设置为 true。

创建弹出项。

Popup 的内容显示在一个单独的窗口中，该窗口浮动在相关 Button 控件附近的应用程序窗口上方。

       <Button  x:Name="phonogramMapButton"
                Height="60"
                Style="{DynamicResource StartViewStyle.xaml}" 
                Grid.Column="1" 
                Grid.ColumnSpan="2"   >
           <StackPanel>
               <Label Foreground="White">日语五十音图表</Label>
               <Popup Name="popup1" 
                      IsOpen="{Binding  Mode=OneWay, Path= IsPressed,  ElementName=phonogramMapButton}">
                   <TextBox Width="1000" Height="900">sdfsdfdfsff</TextBox>
               </Popup>
           </StackPanel>
       </Button>

 当鼠标移入按钮后弹出Popup

属性说明:

AllowsTransparency:当要有动画效果的时候,该项必须设置为透明 true

PopupAnimation:表示弹出Popup的方式

Placement:表示从element哪个位置开始弹出,

HorizontalOffset:相对弹出的位置  水平偏移多少.

PlacementTarget:以那个element参考坐标 

IsOpen: 只有当IsOpen为true 才会弹出 Popup,因此要绑定一个触发条件.

 <Button  x:Name="phonogramMapButton"
          Height="60"
       
          Style="{DynamicResource StartViewStyle.xaml}" 
          Grid.Column="1" 
          Grid.ColumnSpan="2"   >
     <StackPanel>
         <Label Foreground="White">日语五十音图表</Label>
         <Popup Name="popup1" 
                AllowsTransparency="True"
                PopupAnimation="Slide"
                HorizontalOffset="-150" 
                Placement="Bottom"
                PlacementTarget="{Binding  ElementName=phonogramMapButton}"
                IsOpen="{Binding  Mode=OneWay, Path=IsMouseOver,  ElementName=phonogramMapButton}">
             <TextBox Width="600" Height="300">sdfsdfdfsff</TextBox>
         </Popup>
     </StackPanel>
 </Button>

效果

 

 

 

Popup 行为和外观

Popup 控件提供可用于自定义其行为和外观的功能。 例如，可以设置打开和关闭行为、动画和位图效果以及 Popup 大小和位置。

打开和关闭行为

当 IsOpen 属性设置为 true 时，Popup 控件显示其内容。 默认情况下，Popup 保持打开状态，直到 IsOpen 属性设置为 false。 但是，可以通过将 StaysOpen 属性设置为 false 来更改默认行为。 将此属性设置为 false 时，Popup 内容窗口具有鼠标捕获。 在 Popup 窗口外发生鼠标事件时，Popup 失去鼠标捕获，并且窗口关闭。

当打开或关闭 Popup 内容窗口时，将引发 Opened 和 Closed 事件。

动画

Popup 控件为通常与淡入和滑入之类的行为关联的动画提供内置支持。 可以通过将 PopupAnimation 属性设置为 PopupAnimation 枚举值来打开这些动画。 若要使 Popup 动画正常工作，必须将 AllowsTransparency 属性设置为 true。

还可以将 Storyboard 之类的动画应用到 Popup 控件。

不透明度和位图效果

Popup 控件的 Opacity 属性对其内容不产生任何影响。 默认情况下，Popup 内容窗口不透明。 若要创建透明的 Popup，请将 AllowsTransparency 属性设置为 true。

Popup 的内容不会继承位图效果（例如 DropShadowBitmapEffect），这样便可以直接在 Popup 控件或父窗口中的任何其他元素上进行设置。 若要使位图效果在 Popup 的内容上显示，必须在其内容上直接设置位图效果。 例如，如果 Popup 的子级是 StackPanel，请在 StackPanel 上设置位图效果。

Popup 大小

默认情况下，Popup 根据其内容自动调整大小。 由于为 Popup 内容定义的屏幕区域的默认大小的空间有限，不能为要显示的位图效果提供足够的空间，因此在自动调整大小时，某些位图效果可能会隐藏。

在内容上设置 RenderTransform 时，Popup 的内容也可能会被遮挡住。 在这种情况下，如果转换的 Popup 的内容超出了原始 Popup 的区域，则某些内容可能会隐藏。 如果位图效果或转换需要更多空间，可以在 Popup 内容周围定义一个边距，从而为该控件提供更多区域。

定义 Popup 位置

可通过设置 PlacementTarget、PlacementRectangle、Placement、HorizontalOffset 和 VerticalOffsetProperty 属性来定位 Popup。 有关详细信息，请参阅 Popup 放置行为。 当 Popup 已显示在屏幕上时，如果其父级已重新定位，则其本身不会重新定位。

自定义 Popup 放置

可以通过在希望显示 Popup 的位置指定一组相对于 PlacementTarget 的坐标，来自定义 Popup 控件的位置。

若要自定义位置，请将 Placement 属性设置为 Custom。 然后定义一个 CustomPopupPlacementCallback 委托，该委托返回 Popup 的一组可能的放置点和主轴（按优先顺序排列）。 会自动选中显示 Popup 最大部分的点。 有关示例，请参阅指定自定义 Popup 位置。

Popup 和可视化树

Popup 控件没有自己的可视化树；当调用 Popup 的 MeasureOverride 方法时，它返回 0（零）大小。 但是，将 Popup 的 IsOpen 属性设置为 true 时，将创建一个具有自己的可视化树的新窗口。 新窗口包含 Popup 的 Child 内容。 新窗口的宽度和高度不能超过屏幕宽度或高度的 75%。

Popup 控件保留对将其 Child 内容作为逻辑子级的引用。 创建新窗口后，Popup 的内容成为该窗口的一个可视化子级并保留 Popup 的逻辑子级。 相反，Popup 将保留其 Child 内容的逻辑父级。