Tooltip control with multiple Content properties

Question

I am designing my own tooltip in SilverLight 5 and need to pass several values to it when displaying it.

Here is the Style:

   <Style x:Key="TooltipStyle" TargetType="ToolTip">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Border BorderBrush="Blue" BorderThickness="2" Background="White">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <StackPanel Orientation="Horizontal">

                                <TextBlock Text="Var Number: "></TextBlock>

                                <ContentPresenter x:Name="Content1"
                                              Content="{TemplateBinding Content}" 
                                              HorizontalAlignment="Center" 
                                              VerticalAlignment="Center"/>
                            </StackPanel>

                            <StackPanel Grid.Row="1">
                                <TextBlock Text="Last Update Date: " />

                                <ContentPresenter x:Name="Content2"
                                                  Content="{TemplateBinding Content}" 
                                                  HorizontalAlignment="Center" 
                                                  VerticalAlignment="Center"/>

                            </StackPanel>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I am applying the style like so:

                    var customTooltip = new ToolTip
                    {
                        Style = (Style)Resources["TooltipStyle"],
                        Content = questions.Number[c]
                    };

                    ToolTipService.SetToolTip(textbox, customTooltip);

There is only one 'Content' property there, but I need to pass something to 'Content2' as well. (Please note the content is gathered as we do a 'for' loop.)

So the image that comes up, instead of having one variable, can have both the Var Number and the Last Update Date. Reputation too low to post image, here is the final look of the tooltip to give you an idea: http://imgur.com/HYBbXMN

So that's the situation.

Now I am wondering if I can expose a second Content property? Or perhaps there is a smarter and better way to style the tooltip to meet my needs?

Please note this example requires two values (or 'Content') to be displayed but tooltip will expand to require more.

I will appreciate any ideas.

Answer 1

So to make it easier on ya, personally I just leverage things already available for that type of thing. Like for example using Tag to piggy back that sort of thing into the template.

An example (with some additions for setters and stuff you'll probably want to omit or change) like;

<Style x:Key="NiftyToolTipStyle" TargetType="ToolTip">
        <Setter Property="FontFamily" Value="{StaticResource FontFamily}" />
        <Setter Property="FontSize" Value="{StaticResource FontSize}" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="White" />
        <Setter Property="Padding" Value="3" />
        <Setter Property="BorderThickness" Value="1,2" />
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Border x:Name="Root"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="1"
                            Padding="{TemplateBinding Padding}"
                            Cursor="{TemplateBinding Cursor}">
                            <Border.Effect>
                                <DropShadowEffect Opacity="0.35" ShadowDepth="3" />
                            </Border.Effect>
                            <TextBlock>
                                 <Run Text="{TemplateBinding Tag, StringFormat='Var Number: \{\0}'}"/>
                                 <LineBreak/>
                                 <Run Text="{TemplateBinding Content, StringFormat='Last Update Date: \{\0}'}"/>
                            </TextBlock>
                            <!--
                            <ContentPresenter Margin="{TemplateBinding Padding}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Cursor="{TemplateBinding Cursor}" />
                            -->
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>        
    </Style>

This way you can just pass in one value to Content and another to Tag and you're good. You could also easily do other stuff, there's multiple options. Hope this helps, Cheers