很多時候我們需要做一個提示框,來給用戶說明這個元素的作用,比如鼠標移動到哪個元素上面,顯示一個彈出框並顯示這個元素的相關介紹,想到提示內容,我們很容易想到toolip和Popup,接下來就來分別是用一下這兩個控件。
ToolTip
首先,新建一個wpf項目,然後我們在主窗口裏面放入一個button,設置這個button的tooltip值,即是需要提示的內容,這個實現起來很簡單吧。
<Window x:Class="PopupTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PopupTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Content="ToolTip" HorizontalAlignment="Left" Height="31" Margin="39,32,0,0" VerticalAlignment="Top" Width="131" ToolTip="這是一個button"></Button>
</Grid>
</Window>
接下來,我們需要往提示裏面加點內容,比如標題啥的,你可以實用xaml對象來實現。
<Window x:Class="PopupTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PopupTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Content="ToolTip" HorizontalAlignment="Left" Height="31" Margin="39,32,0,0" VerticalAlignment="Top" Width="131">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock>標題</TextBlock>
<TextBlock>這是一個button</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
</Window>
當你把鼠標放到按鈕上的時候會出現提示框,過5s之後,提示就會消失了,如果想要改變顯示的時間又該怎麼辦呢?那麼就要用到ToolTipService
屬性了,這裏有三個屬性需要了解下: InitialShowDelay
鼠標移動上去到顯示提示框出現之間的時間,BetweenShowDelay
當第二個工具提示在沒有延遲的情況下顯示時,兩個工具提示的顯示之間的最大時間,ShowDuration
工具提示保持可見的時間。
<Window x:Class="PopupTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PopupTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Content="ToolTip" HorizontalAlignment="Left" Height="31" Margin="39,32,0,0" VerticalAlignment="Top" Width="131" ToolTipService.InitialShowDelay="1000" ToolTipService.ShowDuration="3000" ToolTipService.BetweenShowDelay="2000">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock>標題</TextBlock>
<TextBlock>這是一個button</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
</Window>
Popup
你也可以採用Popup這個控件來做一個提示框的效果。什麼是Popup控件?簡單的來說就是彈出窗口,MSDN的解釋是Popup控件通過當前的應用程序窗口相對於指定的元素或屏幕座標浮動的單獨窗口中顯示內容。
<Button Height="31" Margin="206,32,456.333,0" VerticalAlignment="Top" Width="131">
<StackPanel>
<Popup>
<TextBlock>這是一個button</TextBlock>
</Popup>
</StackPanel>
</Button>
Popup不會像ToolTip一樣自動彈出來,如果要顯示需要設置Isopen="true"
,上面的這種寫法有個問題,這個button的內容相當於已經設置爲Popup如果你要在button裏面加上文字可以這樣改寫。將Popup拿到button外面,設置'PlacementTarget'屬性,作用於你需要的控件上。
<Button Name="btnpopup" Height="31" Margin="206,32,456.333,0" VerticalAlignment="Top" Width="131"></Button>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=btnpopup}">
<TextBlock Background="#FFFCFBFB">這是一個button</TextBlock>
</Popup>
這樣我們運行的時候這個彈出框就會一直顯示在那裏,很顯然不是我們想要的效果,我們需要的是鼠標移動到按鈕上就顯示提示,鼠標離開之後提示框消失,這就需要增加兩個鼠標事件了,MouseEnter
以及MouseLeave
事件。
<Button Name="btnpopup" Height="31" Margin="206,32,456.333,0" VerticalAlignment="Top" Width="131" MouseEnter="btnpopup_MouseEnter" MouseLeave="btnpopup_MouseLeave">
</Button>
<Popup Name="popupname" PlacementTarget="{Binding ElementName=btnpopup}">
<TextBlock Background="#FFFCFBFB">這是一個button</TextBlock>
</Popup>
private void btnpopup_MouseEnter(object sender, MouseEventArgs e)
{
popupname.IsOpen = true;
}
private void btnpopup_MouseLeave(object sender, MouseEventArgs e)
{
popupname.IsOpen = false;
}
這個時候就有點我們想要的效果了,運行我們發現這個彈出框顯示在按鈕的下方了,我們想要改變一下它的位置,讓它顯示到右邊去,這個時候要設置方位的屬性了,Placement=right
,placement有好幾個值,各代表着不同位置設置,有興趣的查看一下官方文檔。
<Popup Name="popupname" PlacementTarget="{Binding ElementName=btnpopup}" Placement="Right">
<TextBlock Background="#FFFCFBFB">這是一個button</TextBlock>
</Popup>
好了,這兩個控件我們先簡單的介紹這麼多,可以查看下面的參考資料進行詳細瞭解,下次我們實現這樣一個功能吧,如果實現將鼠標移動到list的某一項時,顯示list這一項的內容?同樣的用這兩種方式實現。