Use value from Palette Brush as Point Mark Fill

[Aaron]

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.

[Evgenia]

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

[Aaron]

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)?

[Sia]

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

[jason]

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.

[Sia]

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