Question

My project currently has a PieChart with a legend. Due to size restrictions I was asked to make a modification where if you hover over the name in the legend, it would display the full name (in the event that it was partially cut off). This revealed to me the issue that if you want to make a minor functional change in a Telerik control you will have to develop a complete style for it.

I feel like there is no easy answer for this, so I figured I’d ask and see if a smartypants figured something clever out. We use lots of Telerik control so if I could take control of them with something like that without having to completely redo them, it would give me a huge amount of control over my interface’s more advanced features.

As a note, we are currently using version 2011.1.315.1040, I tried updating to the newest version today but it seems that they altered a control we use often, so I’d prefer to not have to update unless there is really a benefit since there will be a lot of reworking required.

An example style on telerik’s website for what I was attempting to modify can be found here

Here is the piechart we are using as an example.

<telerik:RadChart Name="CoreChart" 
                          VerticalAlignment="Top" 
                          PaletteBrushesUseSolidColors="True" 
                          PaletteBrushesRepeat="True" 
                          BorderBrush="Transparent" 
                          Background="Transparent" 
                          BorderThickness="0">
    <telerik:RadChart.PaletteBrushes>
        <SolidColorBrush Color="#93d2ff" />
        <SolidColorBrush Color="#ce0013" />
    </telerik:RadChart.PaletteBrushes>
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping>
            <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />
            <telerik:ItemMapping FieldName="Title" DataPointMember="LegendLabel" />
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:PieSeriesDefinition ShowItemLabels="False"  
                         ShowItemToolTips="True" 
                         ItemToolTipFormat="{Binding ToolTipFormat}">
                    <telerik:PieSeriesDefinition.InteractivitySettings>
                        <telerik:InteractivitySettings SelectionMode="Single"  
                                  SelectionScope="Item" HoverScope="None"/>
                    </telerik:PieSeriesDefinition.InteractivitySettings>
                </telerik:PieSeriesDefinition>
            </telerik:SeriesMapping.SeriesDefinition>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>

    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView ChartLegendPosition="Right" >
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea HorizontalAlignment="Left" LegendName="ChartLegend"
                         BorderBrush="Transparent" EnableAnimations="True" 
                         Background="Transparent" >
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX AxisLabelsVisibility="Collapsed" />
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
            <telerik:ChartDefaultView.ChartLegend >
                <telerik:ChartLegend x:Name="ChartLegend" Style="{StaticResource 
                       ChartLegendStyle}" LegendItemMarkerShape="Square" Header="" 
                       BorderThickness="0" Background="Transparent"
                       BorderBrush="Transparent" Width="150" />
            </telerik:ChartDefaultView.ChartLegend>
        </telerik:ChartDefaultView>

    </telerik:RadChart.DefaultView>
</telerik:RadChart>

Answer 1

The way the control is built, you’ll have to have a style with a ControlTemplate for the ChartLegendItem. In the link for Telerik’s documentation there is a TextBlock named “PART_TextBlock”. Change it to look like this:

<TextBlock x:Name="PART_TextBlock"
           Grid.Column="1"
           Foreground="{TemplateBinding Foreground}"
           Margin="{TemplateBinding Margin}"
           Padding="{TemplateBinding Padding}"
           Text="{TemplateBinding Label}"
           TextTrimming="CharacterEllipsis"
           ToolTipService.ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" />

In the instance of ChartLegend

<telerik:ChartLegend x:Name="ChartLegend" 
                     .....
                     LegendItemStyle="{StaticResource MyLegendItemStyle}" />

This will save you the need for a style of a Legend.

Another tip, to get all default styles of Telerik’s controls, go to c:\Program Files (x86)\Telerik\RadControls for Silverlight Q1 2011\Themes – there’s a solution there that has all the styles of all the themes.