淺析WPF中Popup彈出層的使用
在日常開發(fā)中，當點擊某控件時，經(jīng)?？吹揭恍棾隹?，停靠在某些頁面元素的附近，但這些又不是真正的窗口，而是頁面的一部分，那這種功能是如何實現(xiàn)的呢？今天就以一個簡單的小例子，簡述如何在WPF開發(fā)中，通過Popup實現(xiàn)鼠標點擊彈出浮動?？看翱?/strong>
什么是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進行?？俊Ｈ缦滤?/p>
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>偏移示例，如下所示：
以上就是淺析WPF中Popup彈出層的使用的詳細內(nèi)容，更多關(guān)于WPF Popup彈出層的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
C#中DataSet,DataTable,DataView的區(qū)別與用法
這篇文章介紹了C#中DataSet,DataTable,DataView的區(qū)別與用法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了C#實現(xiàn)嵌套循環(huán)的相關(guān)知識,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
Java在嵌套類型這里提供的特性比較多，假設(shè)：Java的字節(jié)碼只支持靜態(tài)嵌套類，內(nèi)部類、局部內(nèi)部類和匿名局部內(nèi)部類都是編譯器提供的語法糖，這個假設(shè)目前沒法驗證（看不懂字節(jié)碼），本文先來看一下C#是如何為我們提供的這種語法糖2013-11-11
利用C#實現(xiàn)Window系統(tǒng)桌面鎖定效果
在實際開發(fā)中,我們有時需要實現(xiàn)類似"屏幕鎖定"的效果,C# 作為一門強大的桌面應(yīng)用開發(fā)語言,結(jié)合 Windows API 可以輕松實現(xiàn)這一功能,所以本文將通過調(diào)用 SetForegroundWindow 和 GetForegroundWindow 兩個核心方法,實現(xiàn)一個簡易但實用的屏幕鎖定程序,需要的朋友可以參考下2025-05-05
基于WPF實現(xiàn)帶蒙版的MessageBox消息提示框
這篇文章主要介紹了如何利用WPF實現(xiàn)帶蒙版的MessageBox消息提示框，文中的示例代碼講解詳細，對我們學(xué)習(xí)或工作有一定幫助，需要的可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了C#端口掃描器的編寫方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了C#如何實現(xiàn)自定義一個比較通用的返回值對象，然后使用泛型來傳遞需要return的數(shù)據(jù)。文中的示例代碼講解詳細，感興趣的可以了解一下2022-09-09
本文詳細講解了.Net?Core框架下C#實現(xiàn)多文件打包壓縮的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細介紹了DevExpress GridView自動滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Unity中的RegisterPlugins實用案例深入解析
這篇文章主要為大家介紹了Unity中的RegisterPlugins實用案例深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05