Putting the legend in the chart

[Gary Blakely]

I googled up an article by Manol Donev on "RadChart with ChartLegend as a ToolTip".  It shows how to accomplich this declaratively.  I need to do things in code because many decisions are not made until run time.  I'm new to the telerik software and although I was able to remove the legend with code would it be possible to get a clue as to how to accomplish the rest of this in code?  The declarative example in the August 21, 2009 article are pasted below.
Thanks,
Gary

<telerik:RadChart x:Name="RadChart1">
    <telerik:RadChart.DefaultView>
        <chart:ChartDefaultView>
            <chart:ChartDefaultView.ChartLegend>
                <chart:ChartLegend Visibility="Collapsed" />
            </chart:ChartDefaultView.ChartLegend>
            <chart:ChartDefaultView.ChartArea>
                <chart:ChartArea LegendName="TooltipLegend" />
            </chart:ChartDefaultView.ChartArea>
        </chart:ChartDefaultView>
    </telerik:RadChart.DefaultView>
    <ToolTipService.ToolTip>
        <ToolTip Background="Black" Style="{StaticResource CustomToolTipStyle}">
            <ToolTip.Content>
                <chart:ChartLegend x:Name="TooltipLegend" Background="Black" Height="200" Width="150" />
            </ToolTip.Content>
        </ToolTip>
    </ToolTipService.ToolTip>
</telerik:RadChart>

 

That’s basically everything needed to achieve the desired functionality!

We will only tweak the default tooltip template to add some nice rounded corners like this:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    Title="Window1">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Style x:Key="CustomToolTipStyle" TargetType="ToolTip">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToolTip">
                            <Border x:Name="Root" CornerRadius="10" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="#FFFFFFFF" 
                                    BorderBrush="{TemplateBinding BorderBrush}">
                                <Border BorderBrush="#FFFFFFFF" 
                                        BorderThickness="1" 
                                        CornerRadius="8" 
                                        Background="{TemplateBinding Background}" 
                                        Padding="{TemplateBinding Padding}">
                                    <Border.Resources>
                                        <Storyboard x:Key="Visible State" />
                                        <Storyboard x:Key="Normal State" />
                                    </Border.Resources>
                                    <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                      Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" />
                                </Border>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <telerik:RadChart x:Name="RadChart1">
            <telerik:RadChart.DefaultView>
                <chart:ChartDefaultView>
                    <chart:ChartDefaultView.ChartLegend>
                        <chart:ChartLegend Visibility="Collapsed" />
                    </chart:ChartDefaultView.ChartLegend>
                    <chart:ChartDefaultView.ChartArea>
                        <chart:ChartArea LegendName="TooltipLegend" />
                    </chart:ChartDefaultView.ChartArea>
                </chart:ChartDefaultView>
            </telerik:RadChart.DefaultView>
            <ToolTipService.ToolTip>
                <ToolTip Background="Black" Style="{StaticResource CustomToolTipStyle}">
                    <ToolTip.Content>
                        <chart:ChartLegend x:Name="TooltipLegend" Background="Black" Height="200" Width="150" />
                    </ToolTip.Content>
                </ToolTip>
            </ToolTipService.ToolTip>
        </telerik:RadChart>

    </Grid>
</Window>

[Giuseppe]

Hello Gary,

You can achieve the desired effect like this:

XAML

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <Style x:Key="CustomToolTipStyle" TargetType="ToolTip">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToolTip">
                        <Border x:Name="Root" CornerRadius="10"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="#FFFFFFFF"
                                BorderBrush="{TemplateBinding BorderBrush}">
                            <Border BorderBrush="#FFFFFFFF"
                                    BorderThickness="1"
                                    CornerRadius="8"
                                    Background="{TemplateBinding Background}"
                                    Padding="{TemplateBinding Padding}">
                                <Border.Resources>
                                    <Storyboard x:Key="Visible State" />
                                    <Storyboard x:Key="Normal State" />
                                </Border.Resources>
                                <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" />
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <control:RadChart x:Name="RadChart1" />

</Grid>

C#

ChartLegend toolTipLegend = new ChartLegend()
{
    Background = new SolidColorBrush(Colors.Black),
    Height = 200,
    Width = 200
};

ToolTip toolTip = new ToolTip() { Content = toolTipLegend, Style = this.LayoutRoot.Resources["CustomToolTipStyle"] as Style };
ToolTipService.SetToolTip(RadChart1, toolTip);

RadChart1.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
RadChart1.DefaultView.ChartArea.Legend = toolTipLegend;
RadChart1.ItemsSource = new[] { 1, 2, 3, 4, 5, 6 };

Hope this helps.


Best wishes,
Manuel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Gary Blakely]

My tooltip legend looks pretty good now but I have two small issues: (code pasted below)

1. No matter what width or height I use, my gray tooltip is placed inside a white box that I can't get rid of.
2. I notice that the Style = statement has not effect at all.  are there any docs on making it look cooler in code?

Thanks for you help
Gary

Par345Chart.Width = chartWidth;

Par345Chart.Height = chartHeight;

Par345Chart.DefaultView.ChartTitle.Content =

"Par 345";

 

 

//The legend takes up too much space. Remove it and make it appear as a tooltip...

 

 

ChartLegend toolTipLegend = new ChartLegend()

 

{

Background =

new SolidColorBrush(Colors.LightGray),

 

Height = 100,

Width = 100,

 

};

 

ToolTip toolTip = new ToolTip()

 

{

Content = toolTipLegend,

Style =

this.LayoutRoot.Resources["CustomToolTipStyle"] as Style,

 

};

 

ToolTipService.SetToolTip(Par345Chart, toolTip);

 

Par345Chart.DefaultView.ChartLegend.Visibility =

Visibility.Collapsed;

 

Par345Chart.DefaultView.ChartArea.Legend = toolTipLegend;

[Giuseppe]

Hi Gary Blakely,

Onto your questions:

1. You need to clear the default ToolTip.Padding value (set it to 0 thickness).
2. Could you elaborate on this a bit? Generally, you are using the MS Silverlight System.Windows.Controls.ToolTip control here as a container for the legend (from the attached code it seems you are setting custom style to it but you have not attached the style itself).

Regards,
Freddie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Gary Blakely]

I got the tooltip code from one of the Telerik examples.  How do I apply the style? (was how to do this documented somewhere?)
Gary

[Giuseppe]

Hi Gary Blakely,

As you can see in the blog post you are referring to, the custom tooltip style is applied correctly (the custom style re-templates the tooltip in order to add rounded corners). The blog post contains attached runnable sample application as well -- you can check whether your specific project setup differs in any way from the one in the blog post (make sure that the style lookup is correct i.e. if you are referencing it like this.LayoutRoot.Resources["CustomStyle"], the style should indeed be placed in the LayoutRoot resource dictionary). Generally, we do not have any documentation materials on how to style generic MS Silverlight controls like the System.Windows.Controls.ToolTip control.


Greetings,
Freddie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Gary Blakely]

Yes, I see.  Had the style in the wrong file.
Thanks,
Gary