Shadows on lines/chart drawings?

[Steven]

Is there a way to put shadowing behind the lines that are drawn on a line graph or shadows on a bar chart?

[Sia]

Hello Steven,

In order to achieve shadow effect you need to set custom template to your series where a drop-shadow effect is added.

For example:

1. Extract the default template of the Bar series using Blend or copying it from the source code.
2. Remove all unnecessary masks and interactivity effects (if you do not use interactivity).
3. Add to the simplified template a drop-shadow effect as shown below:

<Style x:Key="CustomBar" TargetType="telerik:Bar">

    <Setter Property="Template" >

        <Setter.Value>

            <ControlTemplate TargetType="telerik:Bar">

                <Canvas Opacity="0"  x:Name="PART_MainContainer">

                    <Rectangle x:Name="PART_DefiningGeometry"                                   

                        Height="{TemplateBinding ItemActualHeight}"

                        Width="{TemplateBinding ItemActualWidth}"

                        Style="{TemplateBinding ItemStyle}">

                        <Rectangle.Effect>

                            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="25" BlurRadius="5" Opacity="0.5" />


                        </Rectangle.Effect>

                    </Rectangle>

                    <Canvas.RenderTransform>

                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />

                    </Canvas.RenderTransform>

                </Canvas>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

and apply it to the BarSeriesDefinition:

smapping.SeriesDefinition = new BarSeriesDefinition() { ItemStyle = this.Resources["CustomBar"] as Style };

Use the following style for a Line series definition:

<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">
                        <Path.Data>
                            <PathGeometry x:Name="PART_TopBorderLineGeometry" />
                        </Path.Data>
                        <Path.Effect>
                            <DropShadowEffect Color="Black" Direction="-100" ShadowDepth="10" BlurRadius="10" Opacity="0.7" />
                        </Path.Effect>
                    </Path>
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="BarItemsPanel" >
        <Setter.Value>
            <ItemsPanelTemplate >
                <telerik:BarSeriesPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="LinearItemsPanel" >
        <Setter.Value>
            <ItemsPanelTemplate >
                <telerik:LinearSeriesPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="RadialItemsPanel" >
        <Setter.Value>
            <ItemsPanelTemplate >
                <telerik:RadialSeriesPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

code-behind:

mapping.SeriesDefinition = new LineSeriesDefinition() { SeriesStyle = this.Resources["CustomLine"] as Style };

Best wishes,
Sia
the Telerik team