Popup 控制元件[WPF]

小林野夫發表於2024-03-14
控制元件

什麼是 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 大小和位置。

開啟和關閉行為

當 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 內容定義的螢幕區域的預設大小的空間有限，不能為要顯示的點陣圖效果提供足夠的空間，因此在自動調整大小時，某些點陣圖效果可能會隱藏。

在內容上設定 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 的 MeasureOverride 方法時，它返回 0（零）大小。 但是，將 Popup 的 IsOpen 屬性設定為 true 時，將建立一個具有自己的視覺化樹的新視窗。 新視窗包含 Popup 的 Child 內容。 新視窗的寬度和高度不能超過螢幕寬度或高度的 75%。

Popup 控制元件保留對將其 Child 內容作為邏輯子級的引用。 建立新視窗後，Popup 的內容成為該視窗的一個視覺化子級並保留 Popup 的邏輯子級。 相反，Popup 將保留其 Child 內容的邏輯父級。

相關文章