Change Spline Opacity

[John Morris]

I'm trying to change the opacity of certain splines (not all).  I defined a style like this

<Style x:Key="SplineStyle" TargetType="telerikCharting:SelfDrawingSeries">
            <Setter Property="BorderLineStyle">
                <Setter.Value>
                    <Style TargetType="Shape">
                        <Setter Property="Opacity" Value=".5"></Setter>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

for each series I want this style for:

seriesMapping.SeriesDefinition.SeriesStyle = this.Resources["SplineStyle"] as Style;

None of my splines are visible.  In the attached image, I applied the style to all and the ticks are the only thing showing.  Should I define a different style property?  Changing the Opacity value from 0 to 100 didnt seem to do anything.

[Velin]

Hi John Morris,

Setting this style effectively removes the series template and this is causing the series to disappear. Unfortunately, in this scenario you will need to provide a new template where the opacity is set. Here is the template:

<Style x:Name="SplineStyle" TargetType="telerikCharting:BaseLineSeries">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikCharting:BaseLineSeries">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid.Clip>
                        <RectangleGeometry x:Name="PART_AnimationClipGeometry">
                            <RectangleGeometry.Transform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </Grid.Clip>
                    <Path Fill="Transparent"
                  Style="{TemplateBinding BorderLineStyle}"
                  StrokeLineJoin="Round"
                  Opacity="0.1"
                  IsHitTestVisible="False"
                  x:Name="PART_TopBorderLine" >
                        <Path.Data>
                            <PathGeometry x:Name="PART_TopBorderLineGeometry" />
                        </Path.Data>
                    </Path>
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Please, find attached a working example demonstrating this scenario.

Hope this will help.

All the best,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[John Morris]

Thank you Velin.  That seems to get me 1/2 way.  The spline colors are all the same now but the point marks match the legend.  Is there a way to keep the colors default and just change the opacity?  Maybe assign the same colors as the pointmarks somehow?

[Velin]

Hello John Morris,

Unfortunately, the visual series and the point marks retrieve their styles independently and you will  have to change the opacity of the point mark the same way as the series. Here is the code:

<Style x:Name="SplineStyle" TargetType="telerikCharting:Spline">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikCharting:Spline">
                            <Canvas >
                                <Path x:Name="PART_LineGeometry"
                              Fill="Transparent"
                              Stroke="Transparent"
                              Style="{TemplateBinding ItemStyle}">
                                    <Path.Data>
                                        <PathGeometry x:Name="PART_DefiningGeometry">
                                            <PathFigure IsClosed="false" >
                                                <PolyLineSegment />
                                            </PathFigure>
                                        </PathGeometry>
                                    </Path.Data>
                                </Path>
                                <telerikCharting:PointMark x:Name="PART_PointMark"
                                                   Opacity="0.1"
                                                   Canvas.Top="{TemplateBinding StartPointY}"
                                                   Visibility="{TemplateBinding PointMarkVisibility}"
                                                   ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
                                                   Style="{TemplateBinding PointMarkItemStyle}" />
                                <telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel"
                                   Content="{TemplateBinding SeriesItemLabelText}"
                                   Visibility="{TemplateBinding SeriesItemLabelVisibility}"
                                   Style="{TemplateBinding SeriesItemLabelStyle}"/>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


//Code behind
def1.ItemStyle = this.SplineStyle;

Please, note that with the upcoming release the SeriesItemLabel will be moved out of the Spline template and you will have to remove it from the custom spline template if you plan to upgrade.

Hope this will help.

All the best,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[John Morris]

Sorry, I wasn't clear on what I need.  Originally each spline was a different color.  After using the opacity XAML, they changed opacity but the colors were the same (instead of the original colors with 50% opacity).  This makes it appear out of sync with the legend.

I would like each individual spline color to remain intact.  Do I have to assign each spline color manually or can I keep the default somehow?

Thanks so much.

[Velin]

Hello John Morris,

I am afraid that with the current official version you will need to apply custom spline color(using the appearance API exposed by the series definition object) and manually populate the chart legend with items having the custom fill. Doing so you will not need to re-style the spline series and spline item as I suggested earlier.

With the upcoming release we will add API which will allow you to define custom color palettes which will be applied to the visual series and the legend automatically(it is already available in the beta).

Sincerely yours,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.