One of the less known features supported by Telerik’s RadChart for Silverlight/WPF is the ability to completely abandon the default control layout and build one of your own with no constraints for the number of elements used. The goal of this blog post is to shed some light on this functionality and to demonstrate the most common techniques that can be used to customize the legend.

First of all, to build your own custom chart layout you should set the UseDefaultLayout property of the RadChart object to false. Here is the custom layout I prepared:

<telerik:RadChart x:Name="RadChart1" UseDefaultLayout="False">
           
<Grid>
               
<Grid.ColumnDefinitions>
                   
<ColumnDefinition Width="50"/>
                   
<ColumnDefinition Width="*"/>
               
</Grid.ColumnDefinitions>
               
<Grid.RowDefinitions>
                   
<RowDefinition Height="*"/>
                   
<RowDefinition Height="50"/>
               
</Grid.RowDefinitions>
               
<telerikCharting:ChartArea x:Name="chartArea" LegendName="CustomLegend" Grid.Column="1" >
                   
<telerikCharting:ChartArea.DataSeries>
                       
<telerikCharting:DataSeries Label="Bar Series" >
                           
<telerikCharting:DataSeries.Definition>
                               
<telerikCharting:BarSeriesDefinition/>
                           
</telerikCharting:DataSeries.Definition>
                           
<telerikCharting:DataPoint YValue="35" />
                           
<telerikCharting:DataPoint YValue="15" />
                           
<telerikCharting:DataPoint YValue="55" />
                       
</telerikCharting:DataSeries>
                       
<telerikCharting:DataSeries Label="Line Series" >
                           
<telerikCharting:DataSeries.Definition>
                               
<telerikCharting:LineSeriesDefinition/>
                           
</telerikCharting:DataSeries.Definition>
                           
<telerikCharting:DataPoint YValue="15" />
                           
<telerikCharting:DataPoint YValue="5" />
                           
<telerikCharting:DataPoint YValue="34" />
                       
</telerikCharting:DataSeries>
                   
</telerikCharting:ChartArea.DataSeries>
               
</telerikCharting:ChartArea>
               
<Canvas Grid.Column="1" >
                   
<telerikCharting:ChartLegend Canvas.Left="{Binding Value, ElementName=HorizontalSlider }"
                                                  
Canvas.Top="{Binding Value, ElementName=VerticalSlider }"
                                                  
Width="300" Height="100" Background="#88000000"
                                                  
BorderThickness="2" BorderBrush="BurlyWood"                                                                                                      
                                                  
x:Name="CustomLegend"/> 
              
</Canvas>
               
<Slider x:Name="HorizontalSlider" Minimum="0" Value="0" MinWidth="200" Orientation="Horizontal" Grid.Row="1" Grid.Column="1"/>
               
<Slider x:Name="VerticalSlider" Minimum="0" Value="0" MinWidth="200" Orientation="Vertical" HorizontalAlignment="Center"/>
           
</Grid>
       
</telerik:RadChart>

 

The code above declares a RadChart control with custom grid layout containing a ChartArea populated with two data series and a ChartLegend. There are also two sliders used to precisely position the legend. Following is the result:

custom legend 

By default the ChartLegend uses a vertical StackPanel to arrange its children, Being an ItemsControl, it is extremely easy to replace the Items panel of the legend with any panel fitting your needs. Here I have changed the default items panel with a horizontal one:

        <Grid.Resources>
           
<ItemsPanelTemplate x:Name="horizontalLegendPanel">
               
<StackPanel Orientation="Horizontal" />
           
</ItemsPanelTemplate>
       
</Grid.Resources>
...
 
<telerikCharting:ChartLegend Canvas.Left="{Binding Value, ElementName=HorizontalSlider }"
                             
Canvas.Top="{Binding Value, ElementName=VerticalSlider }"
                             
Width="300" Height="100" Background="#88000000"
                             
BorderThickness="2" BorderBrush="BurlyWood"
                             
ItemsPanel="{StaticResource horizontalLegendPanel}"
                             
x:Name="CustomLegend"/> 

And the result is:

horizontal legend 

There are much more scenarios when you could need to have more control over the visual appearance of the chart legend. For example, one could want to add a ScrollViewer control in order to be able to show large number of chart legend items in a limited space. Here is a legend style which you can use to do this:

 <Style x:Name="legendStyle" TargetType="telerikCharting:ChartLegend">
               
<Setter Property="Template" >
                   
<Setter.Value>
                       
<ControlTemplate TargetType="telerikCharting:ChartLegend">
                           
<Border Margin="{TemplateBinding Padding}" 
                           
Background="{TemplateBinding Background}"
                           
BorderBrush="{TemplateBinding BorderBrush}"
                           
BorderThickness="{TemplateBinding BorderThickness}" >
                               
<Grid Margin="{TemplateBinding Padding}">
                                   
<Grid.RowDefinitions>
                                       
<RowDefinition Height="Auto" />
                                       
<RowDefinition Height="*" />
                                   
</Grid.RowDefinitions>
                                   
<ContentControl Foreground="{TemplateBinding Foreground}" 
                                           
Content="{TemplateBinding Header}"/>
                                   
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" >
                                       
<ItemsPresenter />
                                   
</ScrollViewer>
                               
</Grid>
                           
</Border>
                       
</ControlTemplate>
                   
</Setter.Value>
               
</Setter>
           
</Style>

These are some of the most frequently requested customizations that can be applied to the chart legend and the chart control itself. We will be glad to hear your comments and recommendations about the ways we can go to make our product more friendly and easy to use.

 

Velin.


Related Posts

Comments