Элементы управления в WPF. Всплывающие подсказки ToolTip и Popup

Часто, в приложениях, при наведении указателя мыши на какой-либо элемент управления, можно увидеть всплывающую подсказку, содержащую какой-либо поясняющий текст или даже изображение. Всплывающие подсказки ToolTip и Popup в WPF служат именно для этих целей. Рассмотрим работу этих элементов управления.

Всплывающие подсказки ToolTip и Popup

Элемент ToolTip

Элемент ToolTip представляет собой всплывающую подсказку, которая автоматическим появляется через некоторое время над элементом управления.  Все элементы, являющиеся наследниками класса FrameworkElement содержат специальное свойство ToolTip, которое используется для отображения всплывающей подсказки. Рассмотрим следующий пример:

<Window x:Class="WpfApp5.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:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button Content="Кнопка" ToolTip="Это подсказка для кнопки"/>
    </StackPanel>
</Window>

Здесь мы указали в качестве значения свойства ToolTip для кнопки обычную строку. Запустите приложение и наведите курсор мыши на кнопку. Через некоторое время вы увидите подсказку:При необходимости, мы можем произвести настройку подсказки, используя в качестве значения для свойства ToolTip не строки, а уже полноценного объекта типа ToolTip у которого определены следующие свойства:

Для отслеживания состояния объекта ToolTip определены следующие события:

public event System.Windows.RoutedEventHandler Opened;

public event System.Windows.RoutedEventHandler Closed;

Изменим код кнопки следующим образом:

<Button Content="Кнопка">
    <Button.ToolTip>
        <ToolTip Background="LightBlue"
                 Placement="Center">
            Подсказка для кнопки
        </ToolTip>
    </Button.ToolTip>
</Button>

Теперь наша подсказка будет светло-голубого цвета и появится по центру кнопки:

Свойство Content у ToolTip определено как object, поэтому мы можем отображать во всплывающей подсказке, в принципе, любые объекты. Например, покажем в подсказке картинку. Для этого добавьте в проект любое изображение, например:

В свойствах файла установим значение «Всегда копировать»:

Теперь перепишем наш пример следующим образом:

<Button Content="Кнопка">
    <Button.ToolTip>
        <ToolTip Background="LightBlue">
            <ToolTip.Content>
                <Image Source="/picture.png"/> 
            </ToolTip.Content>
        </ToolTip>
    </Button.ToolTip>
</Button>

Запустим приложение и посмотрим на результат:

Элемент Popup

Элемент Popup похож на ToolTip, однако, объекты этого типа не появляются автоматически и мы сами управляем открытием и закрытием всплывающего окна. Класс Popup предоставляет нам следующие дополнительные свойства, по сравнению с ToolTip:

Рассмотрим следующий пример использования Popup:

<TextBlock MouseMove="TextBlock_MouseMove" >Наведи курсор мыши, чтобы увидеть кнопку</TextBlock>

<Popup x:Name="popup" StaysOpen="False">
    <Popup.Child>
        <Button Content="Кнопка" Click="Button_Click"/>
    </Popup.Child>
</Popup>

Первый элемент управления — обычный текстовый блок TextBlock при наведении курсора мыши на который будет появляться кнопка. Для этого у TextBlock определен обработчик события MouseMove:

private void TextBlock_MouseMove(object sender, MouseEventArgs e)
{
    popup.IsOpen = true;
}

Второй элемент — непосредственно сам Popup в свойстве Child которого мы разместили элемент Button:

<Popup x:Name="popup" StaysOpen="False">
    <Popup.Child>
        <Button Content="Кнопка" Click="Button_Click"/>
    </Popup.Child>
</Popup>

По умолчанию, свойство StaysOpen у Popup равно true, то есть подсказка после появления не исчезает. Чтобы этого не происходило, мы установили это свойство в значение false.

Клик по кнопке будет закрывать подсказку. Для этого у элемента Button определено событие Click:

private void Button_Click(object sender, RoutedEventArgs e)
{
    popup.IsOpen = false;
}

Запустите приложение и наведите курсор мыши на текстовый блок — вы увидите кнопку, клик по которой закроет Popup.

Служба ToolTipService

Для показа всплывающих подсказок мы также можем использовать службу (сервис) ToolTipService, которая предоставляет как свойства, похожие на свойства у ToolTip, так и свои собственные присоединяемые свойства:

Воспользуемся этими свойствами для отображения всплывающей подсказки:

<Button Content="Кнопка с подсказкой"
        ToolTipService.InitialShowDelay="2000"
        ToolTipService.ShowDuration="5000"
        ToolTipService.ToolTip="Подсказка будет показываться 5 секунд"/>

Здесь мы, используя присоединяемые свойства ToolTipService, создаем всплывающую подсказку, которая появится через 2 секунды после наведения курсора мыши на кнопку и будет показываться в течение пяти секунд.

Итого

Для показа всплывающих подсказок для элементов управления в WPF могут использоваться элементы ToolTip и Popup. При этом, ToolTip показывается автоматически, а отображением Popup управляем мы. Также мы можем использовать службу ToolTipService, которая предоставляет нам дополнительные присоединяемые свойства, с помощью которых мы можем регулировать время показа подсказки.