Home > Silverlight > Customizing tooltip

Customizing tooltip

November 20, 2008 Leave a comment Go to comments

This post shows how to customize the tooltip in silverlight toolkit charts

we need to add references to Microsoft.Windows.Controls.DataVisualization as well as Microsoft.Windows.Controls.DataVisualization dll’s

Grab the Template from the toolkit source
the only change I made was to replace the Tooltip content

original

<ToolTipService.ToolTip>
 <StackPanel>
  <ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
  <ContentControl Content=”{TemplateBinding FormattedRatio}” />
 </StackPanel>
</ToolTipService.ToolTip>

chart_std_tooltip

modified

<ToolTipService.ToolTip>
 <StackPanel Orientation=”Horizontal”>
  <ContentControl Content=”{TemplateBinding IndependentValue }” />
                <TextBlock Text=” – “></TextBlock>
                <ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
                <TextBlock Text=” – “></TextBlock>
                <ContentControl Content=”{TemplateBinding FormattedRatio}” />
 </StackPanel>
</ToolTipService.ToolTip>

chart_custom_tooltip

The chart itself  is declared along with the style as following

<charting:Chart x:Name=”chart1″ >
            <charting:Chart.StylePalette>
                <datavis:StylePalette>
                    <Style TargetType=”charting:PieDataPoint”>                       
                        <Setter Property=”Background”
                                Value=”blue” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”red” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”green” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”yellow” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                </datavis:StylePalette>
            </charting:Chart.StylePalette>
            <charting:Chart.Series>
                <charting:PieSeries  IndependentValueBinding=”{Binding Key}”
                                    DependentValueBinding=”{Binding Path=Value}”>                   
                </charting:PieSeries>
            </charting:Chart.Series>
        </charting:Chart>

you can download the source here

About these ads
Categories: Silverlight Tags:

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: