Достаточно часто в наших приложениях нам требуется создавать всплывающие подсказки. В Silverlight для этого существует класс ToolTip.

С помощью этого класса мы можем достаточно легко создавать такие подсказки:

<Button Content="Click me!" Width="100" Height="100">
  <ToolTipService.ToolTip>
    <ToolTip Width="100" Height="100">
      <TextBlock Text="123"/>
    </ToolTip>
  </ToolTipService.ToolTip>
</Button>

Как видно, код достаточно прост и лаконичен. Однако, подсказки, которые мы видим при этом могут показаться скучными.

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

<Button Content="Click me!" Width="100" Height="100">
  <ToolTipService.ToolTip>
    <ToolTip Width="100" Height="100">
      <ToolTip.Template>
        <ControlTemplate TargetType="ToolTip">
          <Border CornerRadius="5" Background="Red">
            <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
          </Border>
        </ControlTemplate>
      </ToolTip.Template>

      <TextBlock Text="123"/>
    </ToolTip>
  </ToolTipService.ToolTip>
</Button>

Теперь наша подсказка стала более привлекательной.

Понятно, что определять ControlTemplate каждый раз для каждой подсказки дело неблагодарное, поэтому определим подсказки стиль.

<Button Content="Click me!" Width="100" Height="100">
  <ToolTipService.ToolTip>
    <ToolTip Width="100" Height="100">
      <ToolTip.Style>
        <Style TargetType="ToolTip">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="ToolTip">
                <Border CornerRadius="5" Background="Red">
                  <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                </Border>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ToolTip.Style>

      <TextBlock Text="123"/>
    </ToolTip>
  </ToolTipService.ToolTip>
</Button>

После этого можно вынести этот стиль в ресурсы и использовать его многократно.

<UserControl.Resources>
  <Style x:Key="TooltipStyle" TargetType="ToolTip">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ToolTip">
          <Border CornerRadius="5" Background="Red">
            <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</UserControl.Resources>

<!-- .... --->

<Button Content="Click me!" Width="100" Height="100">
  <ToolTipService.ToolTip>
    <ToolTip Width="100" Height="100" >
      <TextBlock Text="123"/>
    </ToolTip>
  </ToolTipService.ToolTip>
</Button>

Теперь наша подсказка стала более приятной визуально.

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