RadChart Black Them Style

9 posts, 0 answers
  1. Luis Gilbert
    Luis Gilbert avatar
    15 posts
    Member since:
    Jul 2009

    Posted 07 Oct 2013 Link to this post

    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!

     
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 10 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft banner
  4. Luis Gilbert
    Luis Gilbert avatar
    15 posts
    Member since:
    Jul 2009

    Posted 16 Oct 2013 Link to this post

    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!
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 21 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Luis Gilbert
    Luis Gilbert avatar
    15 posts
    Member since:
    Jul 2009

    Posted 27 Oct 2013 Link to this post

    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");
                    }
                }
            }
        }
    }


  7. Luis Gilbert
    Luis Gilbert avatar
    15 posts
    Member since:
    Jul 2009

    Posted 29 Oct 2013 Link to this post

    By the way, I'm not interested on animations... only "Diamond" style...
    Thanks!
  8. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 31 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. Luis Gilbert
    Luis Gilbert avatar
    15 posts
    Member since:
    Jul 2009

    Posted 14 Dec 2014 in reply to Evgenia Link to this post

    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!
  10. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 17 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner