Rectangle Diagonal Gradient Brush between two points

Question

Within a Chart I have a StartPoint and EndPoint. Those Points create a line between them and a rectangle. Alongside this line I want the rectangle to be green and become transparent at the corners.

The gradient should preserve the points on resize of course. Somehow I really cannt figure out how to do this, it really drives me crazy.

Thanks for your help.

edit: If i use @Sheridans solution if will look like this:

Answer 1

Hope this helps.

I have edited lineseries template using BlurBitmapEffect and I have added one more polyline with same Points so that we can achieve BlurBitmapEffect.

for eg.

  <Grid>
    <Polyline Points="0 1 1 0" Stroke="#9FBD5F" StrokeThickness="200" Stretch="Fill">
        <Polyline.BitmapEffect>
            <BlurBitmapEffect Radius="100"  KernelType="Box" />
        </Polyline.BitmapEffect>
    </Polyline>
    <Polyline Points="0 1 1 0" Stroke="#2DB14D" StrokeThickness="5" Stretch="Fill"/>
</Grid>

---

xaml

<Window x:Class="WpfApplication8.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    Title="Window1" Height="500" Width="500">
<Window.Resources>
    <Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Canvas x:Name="PlotArea">

                        <!--You can use linergradient or visulbrush to give color to polyline -->

                        <!--or you can use additional polylines to achieve  this affect-->
                        <Polyline Fill="Transparent"  StrokeThickness="200" Points="{TemplateBinding Points}">
                            <Polyline.Stroke>
                                <SolidColorBrush Color="#9FBD5F"></SolidColorBrush>
                            </Polyline.Stroke>
                            <Polyline.BitmapEffect>
                                <BlurBitmapEffect Radius="100"  KernelType="Box" />
                            </Polyline.BitmapEffect>
                        </Polyline>                        
                        <Polyline x:Name="polynine" Points="{TemplateBinding Points}" StrokeThickness="5"   Stroke="#2DB14D"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<chartingToolkit:Chart x:Name="mcChart" >
    <chartingToolkit:LineSeries DependentValuePath="Value"  IsSelectionEnabled="True" IndependentValuePath="Key" ItemsSource="{Binding}" Style="{StaticResource LineSeriesStyle1}"/>
</chartingToolkit:Chart>

c#

public Window1()
    {
        InitializeComponent();
        LoadColumnChartData();
    }
    private void LoadColumnChartData()
    {
        ((LineSeries)mcChart.Series[0]).ItemsSource =
        new KeyValuePair<string, int>[]{
        new KeyValuePair<string,int>("Project Manager", 13),
        new KeyValuePair<string,int>("CEO", 23),};

    }

Result

Update add this in lineseries template.

                <Polyline Fill="Transparent"  StrokeThickness="200" Points="{TemplateBinding Points}">
                            <Polyline.Stroke>
                                <SolidColorBrush Color="#9FBD5F"></SolidColorBrush>
                            </Polyline.Stroke>
                            <Polyline.Effect>
                                <BlurEffect Radius="100"  KernelType="Box" />
                            </Polyline.Effect>
                        </Polyline>

Answer 2

You cannot define a LinearGradientBrush using exact co-ordinate Points. Instead, we specify Points in an imaginary rectangle and usually with dimensions between 0 and 1. From the LinearGradientBrush Class page on MSDN:

A LinearGradientBrush paints an area with a linear gradient. A linear gradient defines a gradient along a line. The line's end points are defined by the StartPoint and EndPoint properties of the linear gradient. A LinearGradientBrush brush paints its GradientStops along this line.

The default linear gradient is diagonal. In the default, the StartPoint of a linear gradient is (0,0), the upper-left corner of the area being painted, and its EndPoint is (1,1), the lower-right corner of the area being painted. The colors in the resulting gradient are interpolated along the diagonal path.

You can adjust the StartPoint and EndPoint properties to make the gradient better fit your target control, but the GradientStops should look something like this:

<Rectangle>
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Offset="0" Color="Transparent" />
            <GradientStop Offset="0.5" Color="LightGreen" />
            <GradientStop Offset="1" Color="Transparent" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

This code will result in something like this: