Question

I want to create a WPF tooltip containing a label for the header of the tooltip and then a textblock containing more detailed text. I’ve created the following style in a resource dictionary:

<Style x:Key="AppToolTip"
   TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true" />    
<Setter Property="Template">
        <Setter.Value>

            <ControlTemplate TargetType="ToolTip">
                <StackPanel>
                    <Label Content="{TemplateBinding Content}" FontWeight="Bold" Background="Blue" Foreground="White">

                    </Label>
                    <TextBlock Padding="10" TextWrapping="WrapWithOverflow" Width="200">

                    </TextBlock>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value></Setter>
</Style>

And can successfully apply this style to a button like so and have the tooltip header appear:

<Button.ToolTip>
<ToolTip Style="{DynamicResource PalletToolTip}">
                    <Binding Source="{x:Static ResStrings.New}"/>
                </ToolTip>
</Button.ToolTip>

What i’m stuck on is how can i set the content of the extra descriptive text from the usage above ? I’m already data binding to the Content property when showing the tooltip header.
Anyone who’s read Adam Nathan’s WPF Unleashed book will recognise that i’m using his example tooltip XAML but in his case, he’s used hard coded strings for the content of the label and textblock. I want to create something that’s more reusable and hence want to use data binding to achieve the same effect.

Answer 1

I would inherit a HeaderedToolTip class from ToolTip and add a Header property. I would specify the template for that control much as you’ve done. Then I would be able to use it like so:

<Button>
    <Button.ToolTip>
        <HeaderedToolTip Header="My Title" Content="My Content"/>
    </Button.ToolTip>
</Button>

Or, with bindings:

<Button>
    <Button.ToolTip>
        <HeaderedToolTip Header="{Binding ToolTipTitle}" Content="{Binding ToolTipText}"/>
    </Button.ToolTip>
</Button>