This is a migrated thread and some comments may be shown as answers.

Use value from Palette Brush as Point Mark Fill

5 Answers 88 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Aaron
Top achievements
Rank 1
Aaron asked on 09 May 2012, 10:31 PM
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.

5 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 14 May 2012, 09:53 AM
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 >>
0
Aaron
Top achievements
Rank 1
answered on 14 May 2012, 02:53 PM
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)?
0
Sia
Telerik team
answered on 17 May 2012, 01:39 PM
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 >>

0
jason
Top achievements
Rank 1
answered on 13 Jun 2012, 08:09 PM
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.
0
Sia
Telerik team
answered on 14 Jun 2012, 07:32 AM
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 >>

Tags
Chart
Asked by
Aaron
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Aaron
Top achievements
Rank 1
Sia
Telerik team
jason
Top achievements
Rank 1
Share this question
or