RadPieChart Styling

3 posts, 0 answers
  1. Drew
    Drew avatar
    2 posts
    Member since:
    Feb 2017

    Posted 21 Feb Link to this post

    I see there are a lot of examples of how to style these charts in XAML.  I need an example of how to style a RadPieChart using the code behind method.

    My reason is I'm working on a "universal" control that I can feed different sets of data (Name Value Pairs) and would like to control the color of each slicestyle and programmatically match a custom style to each data point.   I don't see how this can be done in XAML.

    Take this simple example.

     

    <telerik:PieSeries>                 
    <telerik:PieSeries.SliceStyles>                     

        <Style TargetType="Path">                         <Setter Property="Fill" Value="#00B8FF"/>                     </Style>                     <Style TargetType="Path">                         <Setter Property="Fill" Value="#FFFF5B00"/>                     </Style>                     <Style TargetType="Path">                         <Setter Property="Fill" Value="#FF5AA4D4"/>                     </Style>                 </telerik:PieSeries.SliceStyles>                 <telerik:PieDataPoint Value="9"/>                 <telerik:PieDataPoint Value="3"/>                 <telerik:PieDataPoint OffsetFromCenter="0.1" Value="3"/>             </telerik:PieSeries>

  2. Drew
    Drew avatar
    2 posts
    Member since:
    Feb 2017

    Posted 21 Feb in reply to Drew Link to this post

    Sorry for the hideous formatting.  I accidentally submitted before I was done making my post.

    How could I make that above code using the code behind approach?

  3. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 24 Feb Link to this post

    Hello Andrew,

    All properties available in XAML can be set also in code behind. This applies to all Silverlight controls. In this particular case you have two options.
    • The first one is to define the Style in XAML. For example in the UserControl or the Application's Resources dictionary. Then in code get the Style by x:Name and add it in the SliceStyles collection.
      <UserControl.Resources>
          <Style TargetType="Path" x:Name="sliceStyle1">
              <Setter Property="Fill" Value="#00B8FF"/>
          </Style>   
          <Style TargetType="Path" x:Name="sliceStyle 2">
              <Setter Property="Fill" Value="#FFFF5B00"/>
          </Style>   
      </UserControl.Resources>

      Style sliceStyle1 = (Style)this.Resources["sliceStyle1"];
      Style sliceStyle2 = (Style)this.Resources["sliceStyle2"];
      series.SliceStyles.Add(sliceStyle1);
      series.SliceStyles.Add(sliceStyle2);
    • The second approach is to construct the Style in code and add it in the SliceStyles collection.

      Style sliceStyle1 = new Style(typeof(Path));
      sliceStyle1.Setters.Add(new Setter(Path.FillProperty, Brushes.Red));
       
      series.SliceStyles.Add(sliceStyle1);

    Regards,
    Martin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top