Rough, Hand-Sketched Style for LineSeriesDefinition

[Josh Eastburn]

I am using a LineSeriesDefinition in a chart and I'm trying to achieve a rough, hand-sketched look to the lines in the chart, similar to how it would look if it was drawn with a crayon.
Do you have a recommended approach for this?  I was going to try using a .png that had mottled transparency and use it as an OpacityMask, but I don't see that property in the LineSeriesDefinition.Appearance class.

Two attachments:
1. The default Telerik LineSeriesDefinition look
2. Example of a crayon-drawn line look we are trying to achieve

Thanks.
Josh

[Sia]

Hello Josh,

There are several possible approaches which come to my mind (taking in consideration some limitations of the Silverlight framework about tiling images):

1. Set LinearGradientBrush as a custom palette brush:

<telerik:RadChart.PaletteBrushes>
          <LinearGradientBrush EndPoint="0,0" StartPoint=".03,.03" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Transparent" Offset="1"/>
        </LinearGradientBrush>
</telerik:RadChart.PaletteBrushes>

If you use custom palette brush you may need to overwrite the default Series Item Label Style with the following custom style:

<Style x:Key="CustomLabel" TargetType="telerik:SeriesItemLabel">
    <Setter Property="Fill" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
</Style>

2. Set SolidColorBrush as a custom palette brush:

<telerik:RadChart.PaletteBrushes>
    <SolidColorBrush Color="Red" />
</telerik:RadChart.PaletteBrushes>

and apply opacity mask.
Note that there is no exposed property for the Opacity Mask so you need to modify the template: 


<LinearGradientBrush x:Key="Mask" EndPoint="0,0" StartPoint=".03,.03" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat">
    <GradientStop Color="Black" Offset="0"/>
    <GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>

<Style x:Key="CustomLine" TargetType="telerik:BaseLineSeries">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:BaseLineSeries">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  x:Name="PART_MainContainer">
                    <Grid.Clip>
                        <RectangleGeometry x:Name="PART_AnimationClipGeometry">
                            <RectangleGeometry.Transform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </Grid.Clip>
                    <Path x:Name="PART_TopBorderLine"
                            Fill="Transparent"
                            Style="{TemplateBinding BorderLineStyle}"
                            StrokeLineJoin="Round"
                            IsHitTestVisible="False"
                            StrokeThickness="10"
                            OpacityMask="{StaticResource Mask}">
                        <Path.Data>
                            <PathGeometry x:Name="PART_TopBorderLineGeometry" />
                        </Path.Data>
                    </Path>
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Note: I have removed all visual states related to our interactivity functionality for simplicity. If you use interactivity you need to add them.

3. Use ImageBrush as opacity mask and use the same approach as the one used in 2.
Create a png image which is big enough (compared to your RadChart) and use it as OpacityMask:

<ImageBrush x:Key="ImageMask" ImageSource="opacitymask400x400.png" />

You may use the Appearance settings as well in order to set Red color as stroke.

I have attached the code for this example, so please review it and let me know whether it fits in your scenario.

Best wishes,
Sia
the Telerik team