Автор: Мэхеш Чанд (Mahesh Chand)

У каждого элемента управления в WPF есть свойство Tooltip, к которому можно обращаться из XAML или используемого кода. В этой статье показывается, как создать причудливую подсказку в XAML и WPF.

У каждого элемента управления в WPF есть свойство Tooltip, к которому можно обращаться из XAML или используемого кода. Свойство Tooltip может содержать все виды элементов управления, такие как прямоугольник, текстовый блок или панель. Другими словами, в качестве подсказки для элемента управления можно отобразить другое окно с любым количеством элементов управления.

Следующий код создает простую подсказку для элемента управления кнопки.

<Button Width="100" Height="30">Нажми меня
            <Button.ToolTip>
                <ToolTip>Это текст подсказки для элемента управления кнопки. Меня
                    Можно щелкнуть, если хочется, но это ни к чему не приведет.
                </ToolTip>
            </Button.ToolTip>
        </Button>

Результат выглядит, как показано на рис. 1.

Рис. 1. Простая подсказка

Как я уже говорил, свойство Tooltip может содержать любое число элементов управления. Например, в следующем коде подсказка для кнопки содержит элемент управления StackPanel с двумя дочерними элементами управления StackPanel. Первый элемент управления StackPanel содержит изображение и текстовый блок, а второй элемент управления StackPanel содержит текстовый блок большего размера. Результат выглядит так, как показано на рис. 2, представляя собой причудливую подсказку.

<Button Width="100" Height="30">Нажми меня
            <Button.ToolTip>
                <StackPanel Background="Honeydew" Height="200" Width="200">
                    <StackPanel Background="BurlyWood" Height="30" Width="200" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" >
                        <Image VerticalAlignment="Top"  Width="30" Height="30" Source="C:\Projects\XAML\FancyTooltip\FancyTooltip\samp.png" Name="image1" />
                        <TextBlock FontFamily="Aharoni" FontSize="24" FontWeight="Bold" Foreground="Black" TextWrapping="Wrap" VerticalAlignment="Top" Height="30" HorizontalAlignment="Right" Width="143">
                            <Run FontFamily="Andalus" FontSize="18" FontWeight="Normal" Text="Привет! Оригинальная подсказка"/>
                        </TextBlock>
                    </StackPanel>
                  
                    <StackPanel Background="BurlyWood" Height="30" Width="200" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" >
                        <TextBlock TextWrapping="Wrap" Foreground="#FFF9F4F4" TextAlignment="Center" Background="{x:Null}" HorizontalAlignment="Right" VerticalAlignment="Top" Width="181" Height="98">
                          <Run FontFamily="Verdana" FontSize="11" FontWeight="Normal" Foreground="#FF151514"
                               Text="Отформатируйте свою подсказку нужным образом, и вставьте в нее любое изображение, текст или другие элементы управления.
                               Кроме того, можно добавить в эту подсказку дополнительные элементы, чтобы изменить ее внешний вид."/>
                        </TextBlock>
                    </StackPanel>
                </StackPanel>
            </Button.ToolTip>
        </Button>

Рис. 2. Причудливая подсказка

С помощью этого подхода можно создавать подсказки с произвольным внешним видом.

Примечание. В приведенном выше коде можно изменить источник файла изображения, меняя следующий код:  Source="C:\Projects\XAML\FancyTooltip\FancyTooltip\samp.png"