Working with the Default Layout of Silverlight RadCharts

27 Oct 2009 • Blog Archives

The default layout for a RadChart works for most situations. It has a ChartArea, a ChartLegend, and a ChartTitle. These are easy to work with, and if you want you can break from the norm and create your own custom Silverlight Rad Chart layout. If you’re sticking with the default you almost certainly have some settings and properties to which you will want to make adjustments. In order to do that you might define these in the XAML.

<UserControl x:Class="MyApplication.UI.Charts.SuperSweetChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" 
    xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerikChart:RadChart x:Name="Chart1" 
                               Loaded="Chart1_Loaded">
            <telerikChart:RadChart.DefaultView>
                <chart:ChartDefaultView>
                    <chart:ChartDefaultView.ChartArea>
                        <chart:ChartArea LegendName="CustomLegend" NoDataString="">
                            <chart:ChartArea.DataSeries>
                                <chart:DataSeries x:Name="DataSeries1" >
                                    <chart:DataSeries.Definition>
                                        <chart:PieSeriesDefinition 
                                            LabelOffset="0.6d" 
                                            ShowItemToolTips="True" 
                                            ItemToolTipFormat = "#XCAT" 
                                            DefaultLabelFormat = "#%{p0}" />
                                    </chart:DataSeries.Definition>
                                    <chart:DataPoint YValue="35" />
                                    <chart:DataPoint YValue="15" />
                                    <chart:DataPoint YValue="55" />
                                </chart:DataSeries>
                            </chart:ChartArea.DataSeries>
                        </chart:ChartArea>
                    </chart:ChartDefaultView.ChartArea>
                    
                    <chart:ChartDefaultView.ChartLegend>
                        <chart:ChartLegend x:Name="CustomLegend" 
                                           UseAutoGeneratedItems="True" />
                    </chart:ChartDefaultView.ChartLegend>
                    
                    <chart:ChartDefaultView.ChartTitle>
                        <chart:ChartTitle>
                            <TextBlock Text="Traffic Sources"/>
                        </chart:ChartTitle>
                    </chart:ChartDefaultView.ChartTitle>
                    
                </chart:ChartDefaultView>
            </telerikChart:RadChart.DefaultView>
        </telerikChart:RadChart>
    </Grid>

Notice the three parts are the ChartArea, the ChartLegend, and the ChartTitle. Use the properties of these to make your adjustments. If you don’t want to change these in the XAML then don’t include them. If you’re going to work from the code behind it doesn’t hurt to have these here, but it can be useful.

You can access these in the code behind by either declaring their x:Name property or by referencing them from the RadChart’s x:Name like this. Chart1.DefaultView.ChartArea.

Plus keeping things in here keeps designers happy, and we design-challenged people really appreciate happy designers willing to assist us.

 Silverlight

Comments

Related Posts