Telerik Forums / UI for Silverlight Forum / Chart /

Use value from Palette Brush as Point Mark Fill

Telerik UI for Silverlight
Resources Buy Try

6 posts, 0 answers

Aaron

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.

PointMarkFilledIn-snip.png

PointMarkWhite-snip.png
Evgenia
Admin

1437 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 >>
Aaron

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

766 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 >>

MainPage.zip
jason

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="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
Admin

766 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 >>

Use value from Palette Brush as Point Mark Fill

Aaron

Evgenia

Aaron

Sia

jason

Sia