Greetings,
I'm in need of some assistance regarding customizing certain properties of the RadChart control for Silverlight 3.
I am using
My question is regarding styling the chart. I have used examples on this website to complete the code below. I'm creating a radchart, setting some default options (from the original project where i found this problem) and setting the ItemsSource to a basic array in codebehind. I am now attempting to change the styles of the x-axis/labels and y-axis/labels as well as the background of the chart.
I managed to get the background to white by setting background=white in XAML and the labels to black by using templates in XAML and setting it in codebehind:
XAML (MainPage.xaml):
C# (Mainpage.xaml.cs):
This works correctly without any exception or error. The result is a radchart in default cyan colour on a white background with black labels. The X and Y axis are still drawn in white (therefore invisible), and since you can see i have made no attempt to style them in this build as the code is commented out.
When i remove the comments on either of the lines,
when trying to run the project,
{System.Windows.Markup.XamlParseException: [Line: 0 Position: 0]
at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
at MS.Internal.XcpImports.SetValue(INativeCoreTypeWrapper obj, DependencyProperty property, DependencyObject doh)
at System.Windows.DependencyObject.SetValue(DependencyProperty property, DependencyObject doh)
at System.Windows.FrameworkElement.set_Style(Style value)
at Telerik.Windows.Controls.Charting.Axis2D.ApplyUserDefinedStyle()
at Telerik.Windows.Controls.Charting.Axis2D.LogicalParentUserStyleChanged(Object sender, UserStyleChangedEventArgs e)
at Telerik.Windows.Controls.Charting.Axis.OnAxisStyleChanged(String userStyleName)
at Telerik.Windows.Controls.Charting.Axis.AxisStylesPropertyChanged(Object sender, PropertyChangedEventArgs e)
at Telerik.Windows.Controls.Charting.AxisStyles.OnPropertyChanged(PropertyChangedEventArgs args)
at Telerik.Windows.Controls.Charting.AxisStyles.OnPropertyChanged(String propertyName)
at Telerik.Windows.Controls.Charting.AxisStyles.set_AxisLineStyle(Style value)
at SilverlightApplication2.MainPage..ctor()}
Am I doing something wrong here? This seems to be a very simple task that is very hard for me to accomplish! my apologies if i've missed something stupid, but I can't get this to work.
Ideally I'd like to style the control further and might modify the templates, (which I will need to read up on how to edit) but this should be possible without templates for now.
I'm in need of some assistance regarding customizing certain properties of the RadChart control for Silverlight 3.
I am using
- Silverlight 3.0.40818.0
- OS: Windows 7 Ultimate 32bit
- Mozilla Firefox Version 3.5.5
- Telerik RadChart from Telerik RadControls for Silverlight (RadControls_for_Silverlight_2009_2_701_DEV.msi and RadControls_for_Silverlight_2009_2_724_DEV.zip used to install - hope this is accurate enough)
- preferred programming language: C#.Net
My question is regarding styling the chart. I have used examples on this website to complete the code below. I'm creating a radchart, setting some default options (from the original project where i found this problem) and setting the ItemsSource to a basic array in codebehind. I am now attempting to change the styles of the x-axis/labels and y-axis/labels as well as the background of the chart.
I managed to get the background to white by setting background=white in XAML and the labels to black by using templates in XAML and setting it in codebehind:
XAML (MainPage.xaml):
<UserControl x:Class="SilverlightApplication2.MainPage" |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" |
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" |
> |
<Grid x:Name="LayoutRoot"> |
<Grid.Resources> |
<Style x:Key="CustomItemLabelStyle" TargetType="TextBlock"> |
<Setter Property="Foreground" Value="Black" /> |
</Style> |
<Style x:Key="CustomAxisLineStyle" TargetType="Line"> |
<Setter Property="Stroke" Value="Black" /> |
</Style> |
</Grid.Resources> |
<telerik:RadChart x:Name="ValuesChart" Background="White"> |
<!-- Set Default Series Definition: --> |
<telerik:RadChart.DefaultSeriesDefinition> |
<chart:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False"> |
</chart:LineSeriesDefinition> |
</telerik:RadChart.DefaultSeriesDefinition> |
<!-- Set Default Series Definition --> |
<telerik:RadChart.DefaultView> |
<chart:ChartDefaultView > |
<chart:ChartDefaultView.ChartArea> |
<chart:ChartArea > |
<chart:ChartArea.AxisY> |
<chart:AxisY Step="5" /> |
</chart:ChartArea.AxisY> |
<chart:ChartArea.AxisX> |
<chart:AxisX LabelStep="20" /> |
</chart:ChartArea.AxisX> |
</chart:ChartArea> |
</chart:ChartDefaultView.ChartArea> |
</chart:ChartDefaultView> |
</telerik:RadChart.DefaultView> |
<telerik:RadChart.SeriesMappings> |
<chart:SeriesMapping> |
<chart:SeriesMapping.ItemMappings> |
<chart:ItemMapping DataPointMember="YValue" /> |
</chart:SeriesMapping.ItemMappings> |
</chart:SeriesMapping> |
</telerik:RadChart.SeriesMappings> |
<telerik:RadChart.Foreground> |
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> |
<GradientStop Color="Black" Offset="0"/> |
<GradientStop Color="White" Offset="1"/> |
</LinearGradientBrush> |
</telerik:RadChart.Foreground> |
<telerik:RadChart.AnimationSettings> |
<chart:AnimationSettings |
ItemAnimationDuration="00:00:00.7" |
TotalSeriesAnimationDuration="00:00:00" |
ItemDelay="00:00:00.7" |
DefaultSeriesDelay="00:00:00.2"/> |
</telerik:RadChart.AnimationSettings> |
</telerik:RadChart> |
</Grid> |
</UserControl> |
C# (Mainpage.xaml.cs):
using System; |
using System.Collections.Generic; |
using System.Linq; |
using System.Net; |
using System.Windows; |
using System.Windows.Controls; |
using System.Windows.Documents; |
using System.Windows.Input; |
using System.Windows.Media; |
using System.Windows.Media.Animation; |
using System.Windows.Shapes; |
namespace SilverlightApplication2 |
{ |
public partial class MainPage : UserControl |
{ |
public MainPage() |
{ |
InitializeComponent(); |
int[] intarray = new int[10]; |
intarray[0] = 3; |
intarray[1] = 1; |
intarray[2] = 5; |
intarray[3] = 8; |
intarray[4] = 5; |
intarray[5] = 3; |
intarray[6] = 2; |
intarray[7] = 9; |
intarray[8] = 3; |
intarray[9] = 0; |
ValuesChart.ItemsSource = intarray; |
SolidColorBrush black = new SolidColorBrush(Colors.Black); |
ValuesChart.DefaultView.ChartTitle.Foreground = black; |
ValuesChart.DefaultView.ChartArea.AxisX.AxisStyles.ItemLabelStyle = this.LayoutRoot.Resources["CustomItemLabelStyle"] as Style; |
ValuesChart.DefaultView.ChartArea.AxisY.AxisStyles.ItemLabelStyle = this.LayoutRoot.Resources["CustomItemLabelStyle"] as Style; |
//ValuesChart.DefaultView.ChartArea.AxisX.AxisStyles.AxisLineStyle = this.LayoutRoot.Resources["CustomAxisLineStyle"] as Style; |
//ValuesChart.DefaultView.ChartArea.AxisY.AxisStyles.AxisLineStyle = this.LayoutRoot.Resources["CustomAxisLineStyle"] as Style; |
} |
} |
} |
This works correctly without any exception or error. The result is a radchart in default cyan colour on a white background with black labels. The X and Y axis are still drawn in white (therefore invisible), and since you can see i have made no attempt to style them in this build as the code is commented out.
When i remove the comments on either of the lines,
//ValuesChart.DefaultView.ChartArea.AxisX.AxisStyles.AxisLineStyle = this.LayoutRoot.Resources["CustomAxisLineStyle"] as Style; |
//ValuesChart.DefaultView.ChartArea.AxisY.AxisStyles.AxisLineStyle = this.LayoutRoot.Resources["CustomAxisLineStyle"] as Style; |
when trying to run the project,
- In my original attempt in a complex environment, I experienced simply a white screen on load, without any explanation.
- Upon recreating this as shown above in a separate new project, I have been shown the following exception by visual studio:
{System.Windows.Markup.XamlParseException: [Line: 0 Position: 0]
at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
at MS.Internal.XcpImports.SetValue(INativeCoreTypeWrapper obj, DependencyProperty property, DependencyObject doh)
at System.Windows.DependencyObject.SetValue(DependencyProperty property, DependencyObject doh)
at System.Windows.FrameworkElement.set_Style(Style value)
at Telerik.Windows.Controls.Charting.Axis2D.ApplyUserDefinedStyle()
at Telerik.Windows.Controls.Charting.Axis2D.LogicalParentUserStyleChanged(Object sender, UserStyleChangedEventArgs e)
at Telerik.Windows.Controls.Charting.Axis.OnAxisStyleChanged(String userStyleName)
at Telerik.Windows.Controls.Charting.Axis.AxisStylesPropertyChanged(Object sender, PropertyChangedEventArgs e)
at Telerik.Windows.Controls.Charting.AxisStyles.OnPropertyChanged(PropertyChangedEventArgs args)
at Telerik.Windows.Controls.Charting.AxisStyles.OnPropertyChanged(String propertyName)
at Telerik.Windows.Controls.Charting.AxisStyles.set_AxisLineStyle(Style value)
at SilverlightApplication2.MainPage..ctor()}
Am I doing something wrong here? This seems to be a very simple task that is very hard for me to accomplish! my apologies if i've missed something stupid, but I can't get this to work.
Ideally I'd like to style the control further and might modify the templates, (which I will need to read up on how to edit) but this should be possible without templates for now.