Using a custom ToolTip in Silverlight charting

This has been done plenty of places before – in itself, it isn’t too complicated. However, it provides the set up for my next blog post, so I figured I would write this out separately.

I’m using the charting tools from the Silverlight toolkit. In general, they are solid – easy to use and attractive. However, its not always so simple if you need to customize things beyond a simple binding expression. In this post, I will explain how to create a custom ToolTip for data in a LineSeries.

By default, Silverlight displays the numeric value of the bound data as the ToolTip. Like this:

Silverlight Charting - Default ToolTip

This is nice – but not what we want. We want to expand this to display more detailed information. Within Silverlight, setting a ToolTip is usually pretty easy:

XAML:

<TextBlock Name="MyTextBlock" Text="SomeText">
  <ToolTipService.SetToolTip>
    <ToolTip>Hello From My ToolTip!</ToolTip>
  </ToolTipService.SetToolTip>
</TextBlock>

Code:

TextBlock text = new TextBlock()
{
  Name = "MyTextBlock",
  Text = "SomeText",
};
ToolTipService.SetToolTip(text, "Hello From My ToolTip!");

Unfortunately, it isn’t quite as easy for charting. The ToolTip is buried in the ControlTemplate of the DataPointStyle of the LineSeries. So, you need to create a new style with that template, and update the ToolTip there. You can get the full default style from the toolkit source code or from Expression Blend. Below is the default style for the ControlTemplate, with the altered ToolTip:

<ControlTemplate x:Key="ModifiedToolTipTemplate" TargetType="charting:LineDataPoint">
    <Grid x:Name="Root" Opacity="0">
        <ToolTipService.ToolTip>
            <ContentControl Content="{Binding Converter={StaticResource MyDataConverter}}"/>
        </ToolTipService.ToolTip>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverHighlight">
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.24"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="Selected">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionHighlight">
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.18"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="RevealStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Shown">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Hidden">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/>
        <Ellipse RenderTransformOrigin="0.661,0.321">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.681,0.308">
                    <GradientStop Color="#00FFFFFF"/>
                    <GradientStop Color="#FF3D3A3A" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
        <Ellipse x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
    </Grid>
</ControlTemplate>

Then, apply this template to a LineDataPoint style:

<Style x:Key="ModifiedDataPointStyle" TargetType="charting:LineDataPoint">
    <Setter Property="Background" Value="Blue" />
    <Setter Property="Width" Value="8" />
    <Setter Property="Height" Value="8" />
    <Setter Property="Template" Value="{StaticResource ModifiedToolTipTemplate}" />
</Style>

Finally, apply that to your LineSeries:

<charting:LineSeries Name="MySeries" DataPointStyle="{StaticResource ModifiedDataPointStyle}" />

…and that’s it! You can put whatever you want in the custom ToolTip – I use a Silverlight data converter to take the bound value and create a custom TextBlock. The end result looks like this:

Custom ToolTip

Advertisements

About deekosoft
I do a lot of development. This is where I talk about it.

2 Responses to Using a custom ToolTip in Silverlight charting

  1. Pingback: Styling Silverlight Charts with automatic colors « deekodev

  2. Ethan says:

    Could I have more information like C# source code and others to figure out how you bind the data of the bounded data and custom toolbox to the chart?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: