Use value from Palette Brush as Point Mark Fill

6 posts, 0 answers
  1. Aaron
    Aaron avatar
    14 posts
    Member since:
    Feb 2012

    Posted 09 May 2012 Link to this post

    I have defined a set of PaletteBrushes for my RadChart to use and each LineSeries is having the stroke set appropriately.  Is there a way in XAML to also have the LineSeries' PointMark's Fill be set to the same color?

    The desired look would be the PointMarkFilledIn-snip.png attached.
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 14 May 2012 Link to this post

    Hi Aaron,

     You may set the Fill of the PointMarks to be any color from your predefined set of Palette Brushes. Here's how to color the pointmarks of the first two series :

    radChart1.DefaultView.ChartArea.DataSeries[0].Definition.Appearance.PointMark.Fill = new SolidColorBrush(Colors.Red);
    radChart1.DefaultView.ChartArea.DataSeries[1].Definition.Appearance.PointMark.Fill = new SolidColorBrush(Colors.Blue);

    Regards,
    Evgenia
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
  4. Aaron
    Aaron avatar
    14 posts
    Member since:
    Feb 2012

    Posted 14 May 2012 Link to this post

    Thank you Evgenia, I understand how to set the Fill of point marks.  My question is, when a Palette Brush collection is defined, the LineSeries' Stroke property is set to one of those values automatically, is it possible to have the Point Mark's Fill be set by the palette brush as well, to the same color as the LineSeries Stroke (hopefully by using using some markup in XAML)?
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 17 May 2012 Link to this post

    Hello Aaron,

    In the attached project I have replaced the Appearance API setters in the code behind with a declaration of StyleBuilderData object instance that holds the necessary colors and mappings in the UserControl.Resources (the key should be "StyleBuilderData" so the control can pick the correct resource up). If you use only line series definitions in your application, you can remove all commented lines, because they are necessary for other series.

    The main idea is that most of our themes [except the Expression Dark one] have White fill for the point marks, that cannot be changed through the PaletteBrushes functionality. That is why in the styles that overwrite the default ones I have changed the PointMarkStyle to use the main color for its fill:
    <telerik:StyleMappingCollection x:Key="PointMarkStyle">
        <telerik:StyleMapping Property="Stroke" SourceKey="main" />
        <telerik:StyleMapping Property="Fill" SourceKey="main" />
    </telerik:StyleMappingCollection>
    The main color is the one that can be modified  when using a custom palette.

    I hope that this solves your problem.

    All the best,
    Sia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. jason
    jason avatar
    28 posts
    Member since:
    Oct 2010

    Posted 13 Jun 2012 Link to this post

    I am trying to use this StyleBuilderData example you gave but the chart does not seem to be picking it up.  I still get the light blue color for my bubble chart even though I have completely removed that color from the list.  Is there something wrong here?

    <UserControl.Resources>
           <telerik:StyleBuilderData x:Key="StyleBuilderData">
               <telerik:StyleBuilderData.Resources>
                   <telerik:ResourceDictionaryCollection Repeat="True" >
     
                       <ResourceDictionary>
                           <!--<SolidColorBrush x:Key="main" Color="#FF74C0D3" />-->
                           <SolidColorBrush x:Key="main" Color="Pink" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="Purple" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                       <ResourceDictionary>
                           <SolidColorBrush x:Key="main" Color="#FFECB62E" />
                       </ResourceDictionary>
     
                   </telerik:ResourceDictionaryCollection>
               </telerik:StyleBuilderData.Resources>
               <telerik:StyleBuilderData.BaseStyles>
                   <telerik:ChartResourceDictionary>
                       <Style x:Key="RadialStyle" TargetType="Shape">
                           <Setter Property="Stroke" Value="#FF848484" />
                           <Setter Property="StrokeThickness" Value="1" />
                       </Style>
     
                       <Style x:Key="BarStyle" TargetType="Shape" />
     
                       <Style x:Key="ScatterStyle" TargetType="Shape" />
     
                       <Style x:Key="LegendItemMarker" TargetType="Path">
                           <Setter Property="Stroke" Value="#FF848484" />
                           <Setter Property="StrokeThickness" Value="1" />
                       </Style>
     
                       <Style x:Key="HorizontalBarStyle" TargetType="Shape" />
     
                       <Style x:Key="StickStyle" TargetType="Shape" >
                           <Setter Property="StrokeThickness" Value="2" />
                       </Style>
     
                       <Style x:Key="CandleStickStyle" TargetType="Shape" >
                           <Setter Property="StrokeThickness" Value="2" />
                       </Style>
     
                       <Style x:Key="BubbleStyle" TargetType="Shape">
                           <Setter Property="StrokeThickness" Value="1" />
                           <Setter Property="Stroke" Value="#FF848484" />
                       </Style>
     
                       <Style x:Key="NegativeBubbleStyle" TargetType="Shape">
                           <Setter Property="StrokeThickness" Value="1" />
                           <Setter Property="Stroke" Value="#FF848484" />
                           <Setter Property="OpacityMask">
                               <Setter.Value>
                                   <RadialGradientBrush>
                                       <GradientStop Color="#19000000" Offset="0.85"/>
                                       <GradientStop Color="#FFFFFFFF" Offset="0.86"/>
                                   </RadialGradientBrush>
                               </Setter.Value>
                           </Setter>
                       </Style>
     
                       <ResourceDictionary x:Key="LineStyle">
                           <Style x:Key="Base" TargetType="telerik:SelfDrawingSeries" />
     
                           <Style x:Key="BorderLineStyle" TargetType="Shape">
                               <Setter Property="StrokeStartLineCap" Value="Round" />
                               <Setter Property="StrokeEndLineCap" Value="Round" />
                               <Setter Property="StrokeThickness" Value="2" />
                           </Style>
                       </ResourceDictionary>
     
                       <ResourceDictionary x:Key="AreaStyle">
                           <Style x:Key="Base" TargetType="telerik:SelfDrawingSeries" />
     
                           <Style x:Key="BorderLineStyle" TargetType="Shape">
                               <Setter Property="StrokeThickness" Value="1" />
                               <Setter Property="Stroke" Value="#FF848484" />
                           </Style>
                           <Style x:Key="BackgroundStyle" TargetType="Shape">
                               <Setter Property="StrokeThickness" Value="0" />
                           </Style>
                       </ResourceDictionary>
     
                       <Style x:Key="PointMarkStyle" TargetType="Shape">
                           <Setter Property="StrokeStartLineCap" Value="Round" />
                           <Setter Property="StrokeEndLineCap" Value="Round" />
                           <Setter Property="StrokeThickness" Value="1" />
                       </Style>
     
                       <ResourceDictionary x:Key="SeriesItemLabel">
                           <Style x:Key="Base" TargetType="telerik:SeriesItemLabel">
                               <Setter Property="Foreground" Value="White" />
                               <Setter Property="FontSize" Value="11" />
                               <Setter Property="StrokeThickness" Value="1" />
                           </Style>
                           <Style x:Key="ConnectorStyle" TargetType="Shape">
                               <Setter Property="StrokeLineJoin" Value="Round" />
                           </Style>
                           <Style x:Key="LabelStyle" TargetType="Border">
                               <Setter Property="CornerRadius" Value="1" />
                           </Style>
                       </ResourceDictionary>
                   </telerik:ChartResourceDictionary>
               </telerik:StyleBuilderData.BaseStyles>
               <telerik:StyleBuilderData.StyleMappings>
                   <telerik:ChartResourceDictionary>
     
                       <telerik:StyleMappingCollection x:Key="RadialStyle">
                           <telerik:HSBMapping Property="Fill" SourceKey="main" SaturationFactor="0.698023088" BrightnessFactor="1.054504675" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="BarStyle">
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="ScatterStyle">
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="LegendItemMarker">
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="HorizontalBarStyle">
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="StickStyle">
                           <telerik:StyleMapping Property="Stroke" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="CandleStickStyle">
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                           <telerik:StyleMapping Property="Stroke" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="BubbleStyle">
                           <telerik:HSBMapping Property="Fill" SourceKey="main" SaturationFactor="0.698023088" BrightnessFactor="1.054504675" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:StyleMappingCollection x:Key="NegativeBubbleStyle">
                           <telerik:HSBMapping Property="Fill" SourceKey="main" SaturationFactor="0.698023088" BrightnessFactor="1.054504675" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:ComplexStyleMapping x:Key="LineStyle">
                           <telerik:StyleMappingCollection Property="BorderLineStyle">
                               <telerik:StyleMapping Property="Fill" SourceKey="main" />
                               <telerik:StyleMapping Property="Stroke" SourceKey="main" />
                           </telerik:StyleMappingCollection>
                       </telerik:ComplexStyleMapping>
     
                       <telerik:ComplexStyleMapping x:Key="AreaStyle">
                           <telerik:StyleMappingCollection Property="BorderLineStyle">
                               <telerik:StyleMapping Property="Fill" SourceKey="main" />
                           </telerik:StyleMappingCollection>
                           <telerik:StyleMappingCollection Property="BackgroundStyle">
                               <telerik:HSBMapping Property="Fill" SourceKey="main" SaturationFactor="0.698023088" BrightnessFactor="1.054504675" AlphaFactor="0.9" />
                               <telerik:StyleMapping Property="Stroke" SourceKey="main" />
                           </telerik:StyleMappingCollection>
                       </telerik:ComplexStyleMapping>
     
                       <telerik:StyleMappingCollection x:Key="PointMarkStyle">
                           <telerik:StyleMapping Property="Stroke" SourceKey="main" />
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                       </telerik:StyleMappingCollection>
     
                       <telerik:ComplexStyleMapping x:Key="SeriesItemLabel">
                           <telerik:StyleMapping Property="Stroke" SourceKey="main" />
                           <telerik:StyleMapping Property="Fill" SourceKey="main" />
                           <telerik:StyleMappingCollection Property="ConnectorStyle" />
                           <telerik:StyleMappingCollection Property="LabelStyle" />
                       </telerik:ComplexStyleMapping>
     
                       <telerik:MaterialMappingCollection x:Key="3DStyle">
                           <telerik:MaterialMapping Property="Brush"  SourceKey="main" SaturationFactor="1.33" BrightnessFactor="1.19"  />
                       </telerik:MaterialMappingCollection>
     
                   </telerik:ChartResourceDictionary>
               </telerik:StyleBuilderData.StyleMappings>
           </telerik:StyleBuilderData>
       </UserControl.Resources>
       <Grid x:Name="LayoutRoot" Background="White">
           <telerik:RadChart x:Name="theChart" Margin="204,0,8,8" VerticalAlignment="Bottom" Height="464" >
               <telerik:RadChart.DefaultSeriesDefinition>
                   <telerik:BubbleSeriesDefinition />
               </telerik:RadChart.DefaultSeriesDefinition>
           </telerik:RadChart>
       </Grid>

    It appears that this is not getting picked up by the chart.  I also used the exact page you provided above but changed all of the colors and that did not get picked up either.
  7. Sia
    Admin
    Sia avatar
    667 posts

    Posted 14 Jun 2012 Link to this post

    Hello Aaron,

    It is hard to replicate the issue from provided details. It will be helpful if you give us more information about the version of the referenced Telerik binaries in your project together with the theme that you use. We would appreciate if you send us a sample runnable project which demonstrates the unwanted behavior. Thus we will do our best to provide you with a working solution. Thank you in advance for your cooperation.

    Regards,
    Sia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner