RadChart Black Them Style

[Luis Gilbert]

Is it possible to make RadChartView to look similar to RadChart Office_Black Theme Style?
If so, could you please explain how (maybe a sample, or a link to a demo) ?

Thanks!

 

[Evgenia]

Hi Luis,

You may review this sdk example that demonstrates how to customize Bar Series of RadChartView. Please mind that the jewel look for Office Black theme is achieved via masks that are visualized over the default bar items (marked in yellow in the code snippet below):

<Style TargetType="telerikCharting:Bar">
       <Setter Property="Template" >
           <Setter.Value>
               <ControlTemplate TargetType="telerikCharting:Bar">
                   <Canvas Opacity="0"  x:Name="PART_MainContainer">
                       <Rectangle x:Name="PART_DefiningGeometry"
                              Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              Style="{TemplateBinding ItemStyle}"
                              RadiusX="{StaticResource BarRadiusX}"
                              RadiusY="{StaticResource BarRadiusY}" />
                       <Rectangle Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              Visibility="{TemplateBinding MaskVisibility}"
                              RadiusX="{StaticResource BarMaskRadius}"
                              RadiusY="{StaticResource BarMaskRadius}"
                              OpacityMask="{StaticResource BarOpacityMaskBrush}"
                              Fill="{StaticResource BarMaskBrush}"
                              Stroke="{StaticResource BarMaskStroke}"
                              StrokeThickness="{StaticResource BarMaskStrokeThickness}" />
                       <Rectangle x:Name="PART_SelectedState"
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  Visibility="{TemplateBinding MaskVisibility}"
                                  RadiusX="{StaticResource BarRadiusX}"
                                  RadiusY="{StaticResource BarRadiusY}"
                                  Fill="{StaticResource BarTopMaskBrush}" />
                       <Canvas.RenderTransform>
                           <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                       </Canvas.RenderTransform>
                     </Canvas>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

Let me know whether you need further assistance.

Regards,
Evgenia
Telerik

[Luis Gilbert]

Ok, it is a great start.

Now I have 2 more questions:
1) Is there any place I can get the exact (or almost identical) radchart Office_Black Theme? I´m not able to reproduce it
2) I am using RadChartView to integrate with RadPIvotGrid and OLAP cubes... So, I´m following the example and using ChartPalletes to apply themes to Olap RadChartView... Is there any way to create an Office_Black Theme as a new Pallete (to simplify theme integration with my project...) For example, something like:

 palettes.Add(ChartPalettes.OfficeBlackTheme);

Thanks!

[Evgenia]

Hello Luis,

 1) You can access the default Office_Black theme styles and templates from your Telerik controls local installation folder, usually C://Program Files/Telerik/ RadControls for Silverlight Q3 2013/Themes/OfficeBlack

2) Please note that RadChartView does not support theming in the way our other controls do. It was designed to be easily customizable by offering API for re-templating various parts of the control. However you can fairly easy achieve the same appearance as OfficeBlack-themed RadChart. To make the bars appear as they have "jewel" look you need a customized point template. You can use two rectangles on top of each other - one with solid-colored background and one with mask (this one you'll take from the style I sent in my previous post). Let me know if you need additional help with this and I'll attach a sample that demonstrates such customization.

 Here are the default colors for OfficeBlack theme so that you might use them when creating a custom Palette for RadChartView:

<SolidColorBrush Color="#FF74C0D3" />
            <SolidColorBrush Color="#FFE36375" />
            <SolidColorBrush Color="#FFECB62E" />
            <SolidColorBrush Color="#FF78C179" />
            <SolidColorBrush Color="#FFDD692A" />
            <SolidColorBrush Color="#FFC12A2A" />
            <SolidColorBrush Color="#FF3FC7CC" />
            <SolidColorBrush Color="#FFB4BF20" />
            <SolidColorBrush Color="#FF5A6378" />
            <SolidColorBrush Color="#FFC1C1C1" />

Regards,
Evgenia
Telerik

[Luis Gilbert]

I fail to make it work.
Is there any chance you can include a Palette in my attached class?

 using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
//
using System.Collections.Generic;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.ChartView;
using System.Drawing;

namespace FRAMEWORK
{
    public class ThemingViewModel : ViewModelBase
    {
        // Office <-> Forest
        // Windows8 <-> Windows8
        // Expression_Dark <-> Lilac
        // Windows7 <-> Spring
        // Vista <-> Flower
        // Summer <-> Summer
        private ChartPalette _palette;
        private List<ChartPalette> _palettes;

        public ThemingViewModel()
        {
            this.InitializePalettePresets();
        }

        public void InitializePalettePresets()
        {
            List<ChartPalette> palettes = new List<ChartPalette>();
            palettes.Add(ChartPalettes.Arctic);
            palettes.Add(ChartPalettes.Autumn);
            palettes.Add(ChartPalettes.Cold);
            palettes.Add(ChartPalettes.Flower);
            palettes.Add(ChartPalettes.Forest);
            palettes.Add(ChartPalettes.Grayscale);
            palettes.Add(ChartPalettes.Ground);
            palettes.Add(ChartPalettes.Lilac);
            palettes.Add(ChartPalettes.Natural);
            palettes.Add(ChartPalettes.Pastel);
            palettes.Add(ChartPalettes.Rainbow);
            palettes.Add(ChartPalettes.Spring);
            palettes.Add(ChartPalettes.Summer);
            palettes.Add(ChartPalettes.Warm);
            palettes.Add(ChartPalettes.Windows8);
            
            
            ChartPalette palette = new ChartPalette();
            palette.Name = "OfficeBlack";
            Stroke stroke1 = new Stroke();
            /*Color color1 = new Color();// System.Drawing.KnownColor.Blue;// Color(System.Drawing.KnownColor.Blue); 
            Color color2 = new Color();//
            Color color3 = new Color();//
            Brush brush1 = new SolidColorBrush(color1);// Color()); new Color();// SolidColorBrush(Color.FromArgb(0x44FFFF00));
            Brush brush2 = new SolidColorBrush(color2);// Color()); new Color();// SolidColorBrush(Color.FromArgb(0x44FFFF00));
            Brush brush3 = new SolidColorBrush(color3);// Color()); new Color();// SolidColorBrush(Color.FromArgb(0x44FFFF00));
            Brush brushcolec01 = new SolidColorBrush( Color.FromArgb(0xFF, 0xFA, 0xEB, 0xD7));
            Brush brushcolec02 = new SolidColorBrush(Color.FromArgb(0xFA, 0xEB, 0xFF, 0xD7));
            Brush brushcolec03 = new SolidColorBrush(Color.FromArgb(0xEB, 0xFF, 0xEB, 0xFA));
            PaletteEntryCollection coleccion1 = new PaletteEntryCollection();
            coleccion1.SeriesFamily = "Bar";
            PaletteEntry palleteentry1 = new PaletteEntry(brushcolec01,stroke1);
            PaletteEntry palleteentry2 = new PaletteEntry(brushcolec02,stroke1);
            PaletteEntry palleteentry3 = new PaletteEntry(brushcolec03,stroke1);
            coleccion1.Add(palleteentry1);
                         * */
            PaletteEntryCollection coleccion1 = new PaletteEntryCollection();
            PaletteEntryCollection coleccion2 = new PaletteEntryCollection();
            coleccion1.SeriesFamily = "Bar";
            //PaletteEntry palleteentry1 = new PaletteEntry(brushcolec01, stroke1);
            //palette.GlobalEntries.Add(new PaletteEntry(null, new SolidColorBrush(Colors.Red)));
            //palette.GlobalEntries.Add(new PaletteEntry(null, new SolidColorBrush(Colors.Blue)));
            //palette.SeriesEntries.Add(new PaletteEntry(coleccion1));
            //palette.SeriesEntries.Add(new PaletteEntry(coleccion1));
            //this.chart.Palette = palette;
            //palette.SeriesEntries.Add(coleccion1);
            //palette.SeriesEntries.Add(coleccion2);
            //palette.SeriesEntries.Add(coleccion3);

            palettes.Add(palette);
            

            this.Palettes = palettes;
            this.Palette = ChartPalettes.Windows8;
        }

        public ChartPalette Palette
        {
            get
            {
                return this._palette;
            }
            set
            {
                if (this._palette != value)
                {
                    this._palette = value;
                    this.OnPropertyChanged("Palette");
                }
            }
        }

        public List<ChartPalette> Palettes
        {
            get
            {
                return this._palettes;
            }
            set
            {
                if (this._palettes != value)
                {
                    this._palettes = value;
                    this.OnPropertyChanged("Palettes");
                }
            }
        }
    }
}

[Luis Gilbert]

By the way, I'm not interested on animations... only "Diamond" style...
Thanks!

[Evgenia]

Hi Luis,

You may find attached a sample based on my previous post and snapshot of the result I get when running the project. I'm also referring here some useful help topics that explain in more details the approach used:

- Creating custom palettes - http://www.telerik.com/help/silverlight/radchartview-features-palettes-custom-palettes.html
- Binding the Color of Series Items - http://www.telerik.com/help/silverlight/radchartview-populating-with-data-binding-the-color-of-series-items.html

Regards,
Evgenia
Telerik

[Luis Gilbert]

Hi.. sorry to reopen this ticket... I had to drop it before I could make it work..

This is where I am right now. I am using Radchartview integrated to RadPivotGrid. So, the attached example differes a bit from my actual code... My problem is that I don't know how to bind the <Border Background="??"> property to the dynamics color series...

This is where my code is right now (as you can see, I am able to set a specific color by doing Background="#FF74C0D3", but I want to bind it to the auto color pallete):

<telerik:RadCartesianChart.SeriesProvider>
                            <telerik:ChartSeriesProvider Source="{Binding SeriesSource}">
                                <telerik:ChartSeriesProvider.SeriesDescriptors>
                                    <telerik:CategoricalSeriesDescriptor   x:Name="seriesDescriptor" ItemsSourcePath="Items" ValuePath="Value" CategoryPath="NameX">
                                        <telerik:CategoricalSeriesDescriptor.Style>
                                            <Style TargetType="telerik:BarSeries">
                                                <Setter Property="CombineMode" Value="Cluster"/>
                                                <Setter Property="CategoryBinding" Value="Category"/>
                                                <Setter Property="ValueBinding" Value="Value"/>
                                                <Setter Property="PaletteMode" Value="DataPoint"/>
                                                <Setter Property="ItemsSource" Value="{Binding}"/>
                                                <Setter Property="PointTemplate">
                                                    <Setter.Value>
                                                        <DataTemplate>
                                                            <Border Background="#FF74C0D3"  CornerRadius="2">
                                                                <Rectangle
                                                                RadiusX="{StaticResource BarRadiusX}"
                                                                RadiusY="{StaticResource BarRadiusY}"
                                                                OpacityMask="{StaticResource BarOpacityMaskBrush}"
                                                                Fill="{StaticResource BarMaskBrush}"
                                                                Stroke="{StaticResource BarMaskStroke}"
                                                                StrokeThickness="{StaticResource BarMaskStrokeThickness}" />
                                                            </Border>
                                                        </DataTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </telerik:CategoricalSeriesDescriptor.Style>
                                    </telerik:CategoricalSeriesDescriptor>
                                </telerik:ChartSeriesProvider.SeriesDescriptors>
                            </telerik:ChartSeriesProvider>
                        </telerik:RadCartesianChart.SeriesProvider>

Thanks!

[Evgenia]

Hi Luis,

You can achieve the desired functionality by binding to Palette.GlobalEntries collection. For example you might bind to the first color of the Palette like this:

<Border Background="{Binding ElementName=RadChart1, Path=Palette.GlobalEntries[0].Fill}"  CornerRadius="2">
                                   <Rectangle
                                             RadiusX="{StaticResource BarRadiusX}"
                                             RadiusY="{StaticResource BarRadiusY}"
                                             OpacityMask="{StaticResource BarOpacityMaskBrush}"
                                             Fill="{StaticResource BarMaskBrush}"
                                             Stroke="{StaticResource BarMaskStroke}"
                                              StrokeThickness="{StaticResource BarMaskStrokeThickness}" />
 </Border>

I saw that you are referring to OpacityMask, RadiusX and RadiusY properties ... please mind that radChartView does not support such jewel look - the colors are flat , no gradients or masks are being used. To be able to use them you'll have to find the specific resources from the old chart and copy-paste them.  

Regards,
Evgenia
Telerik