【30】C# 制作一个提示框

很多时候我们需要做一个提示框，来给用户说明这个元素的作用，比如鼠标移动到哪个元素上面，显示一个弹出框并显示这个元素的相关介绍，想到提示内容，我们很容易想到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>

2019-01-13_191710.png

接下来，我们需要往提示里面加点内容，比如标题啥的，你可以实用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>

2019-01-13_221542.png

当你把鼠标放到按钮上的时候会出现提示框，过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>

2019-01-13_225902.png

这样我们运行的时候这个弹出框就会一直显示在那里，很显然不是我们想要的效果，我们需要的是鼠标移动到按钮上就显示提示，鼠标离开之后提示框消失，这就需要增加两个鼠标事件了，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>

2019-01-13_231446.png

好了，这两个控件我们先简单的介绍这么多，可以查看下面的参考资料进行详细了解，下次我们实现这样一个功能吧，如果实现将鼠标移动到list的某一项时，显示list这一项的内容？同样的用这两种方式实现。

参考资料

ToolTip概述
Popup概述