Chart Area Style Not Working

[Rich Geyer]

Hey guys,

I'm working on a project where we need to style the chart area. This should simply be defined in the xaml as Style= and then our resource, but it does not seem to be working no matter what we try. Manual setting some of the things in the code behind does work however. The project is very large, so I'm just going to try to post some of the code, hopefully it is enough,

Here is the style itself and the xaml where we apply it. As you can see we are binding the itemsource and seriesmappings (Not sure if this is affecting us or not).

Hope someone can help,

Thanks

<Style x:Key="ChartAreaStyle" TargetType="Telerik_Windows_Controls_Charting:ChartArea">
            <Setter Property="Template2D">
                <Setter.Value>
                    <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:ChartArea">
                        <Grid Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>
                            <Telerik_Windows_Controls_Charting:AxisX2D x:Name="PART_AxisX" Grid.Column="1" Grid.Row="2" AxisMinorTicksVisibility="Collapsed" AxisTicksVisibility="Collapsed">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </Telerik_Windows_Controls_Charting:AxisX2D>
                            <Telerik_Windows_Controls_Charting:AxisY2D x:Name="PART_AxisY" Style="{TemplateBinding AxisYStyle}" Grid.Column="0" Grid.Row="1" AxisMinorTicksVisibility="Collapsed" AxisTicksVisibility="Collapsed">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </Telerik_Windows_Controls_Charting:AxisY2D>
                            <Telerik_Windows_Controls_Charting:AdditionalAxes2DContainer x:Name="PART_AdditionalHorizontalAxesPanel" Grid.Column="1" Grid.Row="0" StackOrientation="Vertical">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </Telerik_Windows_Controls_Charting:AdditionalAxes2DContainer>
                            <Telerik_Windows_Controls_Charting:AdditionalAxes2DContainer x:Name="PART_AdditionalVerticalAxesPanel" Height="{TemplateBinding Height}" Grid.Column="2" Grid.Row="1" StackOrientation="Horizontal">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </Telerik_Windows_Controls_Charting:AdditionalAxes2DContainer>
                            <Telerik_Windows_Controls_Charting:ClipPanel x:Name="PART_PlotAreaPanel" Style="{TemplateBinding PlotAreaStyle}" Grid.Column="1" Grid.Row="1">
                                <Telerik_Windows_Controls_Charting:HorizontalStripLines2D x:Name="PART_HorizontalStripLines" Visibility="Collapsed"/>
                                <Telerik_Windows_Controls_Charting:VerticalStripLines2D x:Name="PART_VerticalStripLines" Visibility="Collapsed"/>
                                <Telerik_Windows_Controls_Charting:VerticalMinorGridLines2D x:Name="PART_VerticalMinorGridLines"/>
                                <Telerik_Windows_Controls_Charting:HorizontalMinorGridLines2D x:Name="PART_HorizontalMinorGridLines"/>
                                <Telerik_Windows_Controls_Charting:HorizontalGridLines2D x:Name="PART_HorizontalGridLines"/>
                                <Telerik_Windows_Controls_Charting:VerticalGridLines2D x:Name="PART_VerticalGridLines"/>
                                <Telerik_Windows_Controls_Charting:AdditionalPlotAreaAxes2DContainer x:Name="PART_AdditionalPlotAreaHorizontalAxesPanel" StackOrientation="Vertical">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Charting:AdditionalPlotAreaAxes2DContainer>
                                <Telerik_Windows_Controls_Charting:AdditionalPlotAreaAxes2DContainer x:Name="PART_AdditionalPlotAreaVerticalAxesPanel" StackOrientation="Horizontal">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Charting:AdditionalPlotAreaAxes2DContainer>
                                <Telerik_Windows_Controls_Charting:DragZoomLayerControl x:Name="PART_DragZoomLayer" Style="{TemplateBinding DragZoomLayerControlStyle}">
                                    <ItemsPresenter/>
                                </Telerik_Windows_Controls_Charting:DragZoomLayerControl>
                                <Telerik_Windows_Controls_Charting:PlotAreaAxisY2D x:Name="PART_PlotAreaAxisY" Style="{TemplateBinding PlotAreaAxisYStyle}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Charting:PlotAreaAxisY2D>
                                <Telerik_Windows_Controls_Charting:PlotAreaAxisX2D x:Name="PART_PlotAreaAxisX" Style="{TemplateBinding PlotAreaAxisXStyle}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Charting:PlotAreaAxisX2D>
                                <Telerik_Windows_Controls_Charting:LabelsPanel x:Name="PART_LabelsPanel"/>
                            </Telerik_Windows_Controls_Charting:ClipPanel>
                            <Telerik_Windows_Controls_Charting:NoDataControl x:Name="PART_NoData" Style="{TemplateBinding NoDataControlStyle}" Grid.ColumnSpan="3" Grid.RowSpan="3"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template3D">
                <Setter.Value>
                    <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:ChartArea">
                        <Grid Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                            <ItemsPresenter/>
                            <Telerik_Windows_Controls_Charting:ViewportPanel x:Name="PART_CameraExtensionCanvas">
                                <Telerik_Windows_Media_Media3D:Viewport3D x:Name="PART_ViewPort3D">
                                    <Telerik_Windows_Media_Media3D:Viewport3D.Camera>
                                        <Telerik_Windows_Media_Media3D:ViewportCamera LookDirection="0.18, -0.21, -1" Position="5,87.5,250" FieldOfView="60"/>
                                    </Telerik_Windows_Media_Media3D:Viewport3D.Camera>
                                    <Telerik_Windows_Media_Media3D:Viewport3D.Children>
                                        <Telerik_Windows_Media_Media3D:ModelVisual3D>
                                            <Telerik_Windows_Media_Media3D:ModelVisual3D.Content>
                                                <Telerik_Windows_Media_Media3D:AmbientLight/>
                                            </Telerik_Windows_Media_Media3D:ModelVisual3D.Content>
                                        </Telerik_Windows_Media_Media3D:ModelVisual3D>
                                        <Telerik_Windows_Media_Media3D:ModelVisual3D>
                                            <Telerik_Windows_Media_Media3D:ModelVisual3D.Content>
                                                <Telerik_Windows_Media_Media3D:DirectionalLight Direction="-0.5, -0.3, 1"/>
                                            </Telerik_Windows_Media_Media3D:ModelVisual3D.Content>
                                        </Telerik_Windows_Media_Media3D:ModelVisual3D>
                                        <Telerik_Windows_Controls_Charting:PlotArea3D x:Name="PART_PlotArea">
                                            <Telerik_Windows_Controls_Charting:PlotArea3D.Transform>
                                                <Telerik_Windows_Media_Media3D:RotateTransform3D>
                                                    <Telerik_Windows_Media_Media3D:RotateTransform3D.Rotation>
                                                        <Telerik_Windows_Media_Media3D:AxisAngleRotation3D x:Name="axisRotate" Angle="0" Axis="1,1,0"/>
                                                    </Telerik_Windows_Media_Media3D:RotateTransform3D.Rotation>
                                                </Telerik_Windows_Media_Media3D:RotateTransform3D>
                                            </Telerik_Windows_Controls_Charting:PlotArea3D.Transform>
                                            <Telerik_Windows_Controls_Charting:PlaneXY x:Name="PART_PlaneXY"/>
                                            <Telerik_Windows_Controls_Charting:PlaneYZ x:Name="PART_PlaneYZ"/>
                                            <Telerik_Windows_Controls_Charting:PlaneZX x:Name="PART_PlaneZX"/>
                                        </Telerik_Windows_Controls_Charting:PlotArea3D>
                                    </Telerik_Windows_Media_Media3D:Viewport3D.Children>
                                </Telerik_Windows_Media_Media3D:Viewport3D>
                            </Telerik_Windows_Controls_Charting:ViewportPanel>
                            <Telerik_Windows_Controls_Charting:NoDataControl x:Name="PART_NoData" Style="{TemplateBinding NoDataControlStyle}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <Telerik_Windows_Controls_Charting:ChartPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="{StaticResource ChartAreaBackground}"/>
            <Setter Property="Padding" Value="5,10,10,5"/>
        </Style>

 <Telerik_Windows_Controls:RadChart x:Name="RChart" Style="{StaticResource RadChartStyle}" SeriesMappings="{Binding SeriesMappingInfo}" ItemsSource="{Binding BoundData}"  Height="310" VerticalAlignment="Top" Background="White">
            <Telerik_Windows_Controls:RadChart.DefaultView>
                <Telerik_Windows_Controls_Charting:ChartDefaultView>
                    <Telerik_Windows_Controls_Charting:ChartDefaultView.ChartArea>
                        <Telerik_Windows_Controls_Charting:ChartArea PaletteBrushesRepeat="True" Style="{Binding ChartStyle}">
                            <Telerik_Windows_Controls_Charting:ChartArea.PaletteBrushes>
                                <SolidColorBrush Color="#FF2583AD"/>
                                <SolidColorBrush Color="#FFF06421"/>
                                <SolidColorBrush Color="#FF00a04a"/>
                                <SolidColorBrush Color="#FF81b9d2"/>
                                <SolidColorBrush Color="#FFFfcc00"/>
                            </Telerik_Windows_Controls_Charting:ChartArea.PaletteBrushes>
                        </Telerik_Windows_Controls_Charting:ChartArea>
                    </Telerik_Windows_Controls_Charting:ChartDefaultView.ChartArea>
                    <Telerik_Windows_Controls_Charting:ChartDefaultView.ChartTitle>
                        <Telerik_Windows_Controls_Charting:ChartTitle  FontSize="16" Content="{Binding ChartTitle}" Background="White" BorderBrush="{x:Null}" Foreground="black"  HorizontalAlignment="Left" OuterBorderBrush="{x:Null}"/>
                    </Telerik_Windows_Controls_Charting:ChartDefaultView.ChartTitle>
                </Telerik_Windows_Controls_Charting:ChartDefaultView>
            </Telerik_Windows_Controls:RadChart.DefaultView>
        </Telerik_Windows_Controls:RadChart>

[Rich Geyer]

Alright I've continued investigating this and it seems as though parts of the style are working while other parts are not.

For instance, the AxisX2D property AxisTicksVisibility works completely fine, while the property AxisMinorTicksVisibility doesn't work at all. Whether I set it as Collapsed or Visible, the minor ticks remain visible. I have not read anything about not being able to style only certain aspects of the charts but perhaps I'm missing something.

- Rich

[Sia]

Hello Rich Geyer,

Could you please give us more information about the version of the controls you use and also which theme you have set in your project. What do you need to be changed in the ChartArea? If you give us more details, we will do our best to provide you with working solution.

All the best,
Sia
the Telerik team

[Rich Geyer]

Hi again and thanks for the reply,

We have found work arounds for most of our issues. (Most of this required setting chart properties in code as opposed to using styles, but it works). I am using the RadControls for Silverlight Q1 2010 SP2 release. There were a bunch of different properties that we were trying to set. As I mentioned in the last post, one big property was AxisMinorTicksVisibility for either axes. When we set this in the ChartAreaStyle as my original code showed nothing happened. This however, is one property we were able to set in code using:

RChart.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = System.Windows.Visibility.Collapsed;

where RChart is the name of our chart. It just would have been nicer and cleaner to set it using the ChartAreaStyle.

- Rich

[Sia]

Hi Rich Geyer,

I confirm that there is an issue with setting the AxisMinorTicksVisibility property in xaml. It is also true that setting it in the code-behind works as expected:

RadChart1.DefaultView.ChartArea.AxisY.MinorTicksVisibility = Visibility.Collapsed;

I suppose that you have set the MinorTicksVisibility property, not the MinorGridLinesVisibility one in your project.

I have logged this issue in our Public Issue Tracking System and you can check its status there. Your Telerik points are updated. Please tell us if there is something else which does not work as expected or if you have any concerns about another property.

Thank you for your valuable feedback.

All the best,
Sia
the Telerik team

[Rich Geyer]

Thanks for the quick answer,

I'll keep a watch for any future fixes and yes I did mean MinorTicksVisibility, sorry for the typo.

- Rich Geyer