快捷導(dǎo)航

淺析WPF中Popup彈出層的使用

更新時間：2024年01月11日 10:07:28 作者：老碼識途呀

這篇文章將通過一個簡單的小例子,為大家詳細介紹一下如何在WPF開發(fā)中,通過Popup實現(xiàn)鼠標點擊彈出浮動?？看翱?有需要的小伙伴可以了解下

在日常開發(fā)中，當點擊某控件時，經(jīng)常看到一些彈出框，停靠在某些頁面元素的附近，但這些又不是真正的窗口，而是頁面的一部分，那這種功能是如何實現(xiàn)的呢？今天就以一個簡單的小例子，簡述如何在WPF開發(fā)中，通過Popup實現(xiàn)鼠標點擊彈出浮動停靠窗口

什么是Popup

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

創(chuàng)建Popup

在WPF程序開發(fā)中，Popup和其他控件一樣，可以定義控件的內(nèi)容，創(chuàng)建Popup示例如下所示：

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

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

示例截圖效果如下所示：

Popup的行為

通過Popup的IsOpen屬性，來控制彈出層的顯示與隱藏，當打開或關(guān)閉 Popup 內(nèi)容窗口時，將引發(fā) Opened 和 Closed 事件。默認情況下，當IsOpen屬性為true時，將一直處于打開狀態(tài)，直到屬性變?yōu)閒alse。但是也可以通過StaysOpen屬性設(shè)置來判斷Popup是否處于focus狀態(tài)而決定是否顯示，當StaysOpen屬性為false時，如果Popup失去焦點，將會隱藏。StaysOpen默認值為true。

Popup動畫

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

<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="旋轉(zhuǎn)Popup" VerticalAlignment="Center" HorizontalAlignment="Center" Canvas.Top="40" Canvas.Left="18"></TextBlock>
	</Canvas>
</Popup>

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

定義Popup的位置

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

1. 通過PlacementTarget和Placement進行定位

PlacementTarget為Popup指定相對定位的目標對象。如果已設(shè)置 PlacementTarget 屬性，則它指定目標對象。如果未設(shè)置 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">左側(cè)</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Right">
	<TextBlock FontSize="14" Background="LightGreen">右側(cè)</TextBlock>
</Popup>

示例效果如下所示：

2. PlacementRectangle目標區(qū)域進行定位

除此之外，還可以通過PlacementRectangle設(shè)置目標區(qū)域。

目標區(qū)域示例如下所示：

<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>

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

3. 通過HorizontalOffset 和 VerticalOffset設(shè)置偏移進行定位

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

<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>

偏移示例，如下所示：