淺談WPF之Popup彈出層

在日常開發中，當點擊某控件時，經常看到一些彈出框，停靠在某些頁面元素的附近，但這些又不是真正的窗口，而是頁面的一部分，那這種功能是如何實現的呢？今天就以一個簡單的小例子，簡述如何在WPF開發中，通過Popup實現鼠標點擊彈出浮動停靠窗口，僅供學習分享使用，如有不足之處，還請指正。

 

什麼是Popup?

 

Popup（彈出層），Popup 控件提供一種在單獨窗口中顯示內容的方法，該窗口相對於指定元素或屏幕座標在當前應用程序窗口上浮動。  Popup控件通過IsOpen屬性控制是否可見。 當可見時，IsOpen 屬性設置爲 true，否則爲 false。

 

創建Popup

 

在WPF程序開發中，Popup和其他控件一樣，可以定義控件的內容，創建Popup示例如下所示：

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
	<StackPanel>
		<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
			<Run Text="是否狀態切換? " />
			<Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
		</TextBlock>
		<Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
			<Border BorderThickness="1">
				<TextBlock Name="myPopupText" Text="這是一段彈出內容" Background="LightBlue" Foreground="Blue" Padding="30"></TextBlock>
			</Border>
		</Popup>
	</StackPanel>
</ToggleButton>

注意：上述示例，當ToggleButton被選中時，彈出提示內容；當ToggleButton取消選中時，隱藏彈出層。主要是將Popup的IsOpen屬性和ToggleButton的IsChecked屬性進行綁定。

示例截圖效果如下所示：

 

Popup的行爲

 

通過Popup的IsOpen屬性，來控制彈出層的顯示與隱藏，當打開或關閉 Popup 內容窗口時，將引發 Opened 和 Closed 事件。默認情況下，當IsOpen屬性爲true時，將一直處於打開狀態，直到屬性變爲false。但是也可以通過StaysOpen屬性設置來判斷Popup是否處於focus狀態而決定是否顯示，當StaysOpen屬性爲false時，如果Popup失去焦點，將會隱藏。StaysOpen默認值爲true。

 

Popup動畫

 

Popup控件，默認支持淡入，滑入等動畫效果，可通過PopupAnimation屬性進行設置，並且設置AllowsTransparency爲true。除了之處默認的淡入，滑入等動畫效果外，還可以通過自定義StoryBoard來實現動畫。

<CheckBox x:Name="myCheckBox" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"></CheckBox>
<Popup Grid.Column="0" IsOpen="{Binding ElementName=myCheckBox,Path=IsChecked}" PlacementTarget="{Binding ElementName=myCheckBox}" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="50" VerticalOffset="20" Margin="10" Width="200" Height="200">
	<Canvas Width="100" Height="100" Background="DarkBlue">
		<TextBlock TextWrapping="Wrap" Foreground="White" Text="旋轉Popup" VerticalAlignment="Center" HorizontalAlignment="Center" Canvas.Top="40" Canvas.Left="18"></TextBlock>
	</Canvas>
</Popup>

上述示例，設置了Popup的兩個屬性【AllowsTransparency="True" PopupAnimation="Slide"】來實現Popup的滑入效果，如下所示：

 

定義Popup的位置

 

Popup作爲彈出層，可以相對頁面上的控件元素進行定位，也可以相關整個窗口進行定位。

 

1. 通過PlacementTarget和Placement進行定位

 

PlacementTarget爲Popup指定相對定位的目標對象。如果已設置 PlacementTarget 屬性，則它指定目標對象。 如果未設置 PlacementTarget 並且 Popup 具有父級，則父級就是目標對象。 如果沒有 PlacementTarget 值並且沒有父級，則沒有目標對象並且 Popup 相對於屏幕進行定位。Placement爲枚舉類型，常用的有Bottom，Top，Left，Right等，示例如下所示：

<Button x:Name="button1" Grid.Column="1" Width="120" Height="100" Content="目標對象"></Button>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Bottom">
	<TextBlock FontSize="14" Background="LightGreen">底部</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Top">
	<TextBlock FontSize="14" Background="LightGreen">頂部</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Left">
	<TextBlock FontSize="14" Background="LightGreen">左側</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Right">
	<TextBlock FontSize="14" Background="LightGreen">右側</TextBlock>
</Popup>

示例效果如下所示：

 

2. PlacementRectangle目標區域進行定位

 

除此之外，還可以通過PlacementRectangle設置目標區域。

目標區域示例如下所示：

<StackPanel Orientation="Horizontal" Grid.Row="1">

	<Canvas Width="200" Height="100" Background="Red">
		<Rectangle Canvas.Top="30" Canvas.Left="30" Width="50" Height="50" Stroke="White" StrokeThickness="3"/>
		<Popup IsOpen="True" PlacementRectangle="30,30,30,50">
			<TextBlock FontSize="14" Background="Yellow" Width="140" TextWrapping="Wrap" Text="這是通過PlacementRectangle定位的Popup"></TextBlock>
		</Popup>
	</Canvas>

	<Canvas Width="200" Height="100" Background="Red" Margin="30,0,0,0">
		<Rectangle Canvas.Top="30" Canvas.Left="50" Width="50" Height="50" Stroke="White" StrokeThickness="3"/>
		<Popup IsOpen="True">
			<TextBlock FontSize="14" Background="Yellow" Width="140" TextWrapping="Wrap" Text="這是沒有通過PlacementRectangle定位的Popup"></TextBlock>
		</Popup>
	</Canvas>

</StackPanel>

以上示例通過設置PlacementRectangle屬性來目標區域【目標區域並不會真的可見】。沒有設置則以父類Canvas進行停靠。如下所示

 

3. 通過HorizontalOffset 和 VerticalOffset設置偏移進行定位

 

不僅可以設置目標區域，還可以通過HorizontalOffset 和 VerticalOffset 屬性使 Popup 從目標區域偏移等。

<Canvas Width="200" Height="200" Background="Yellow" Margin="20">
  <Popup IsOpen="True" Placement="Bottom"
         HorizontalOffset="20" VerticalOffset="20">
    <TextBlock FontSize="14" Background="#42F3FD">
      This is a popup.
    </TextBlock>
  </Popup>
</Canvas>

偏移示例，如下所示：

 

參考文檔

 

在本篇文章中，主要參考官方文檔，如下所示：

1. https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/popup?view=netframeworkdesktop-4.8

以上就是淺談WPF之Popup的全部內容，關於更多詳細內容，可參考官方文檔。希望能夠一起學習，共同進步。