两点之间的矩形对角线渐变画笔

Question

在图表中我有一个StartPoint和EndPoint。那些Points在它们和矩形之间创建一条线。除了这条线，我希望矩形变成绿色，并在角落变得透明。

当然，渐变应该保留调整大小的点。不知何故，我真的不知道如何做到这一点，它真的让我发疯。

感谢您的帮助。

编辑： 如果我使用@Sheridans解决方案，如果将这个样​​子：

Answer 1

希望这会有所帮助。

我已经使用编辑了线条系列模板BlurBitmapEffect并且我用相同的点添加了一条多段线以便我们可以实现BlurBitmapEffect。

例如。

<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),}; 

    } 

结果

更新在供LineSeries模板添加此。

   <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

使用精确的坐标Point·您不能定义LinearGradientBrush。相反，我们在一个虚构的矩形中指定Point s，通常尺寸介于0和1之间。从MSDN上的LinearGradientBrush Class页面开始：

LinearGradientBrush使用线性渐变绘制区域。线性渐变定义沿线的渐变。线的端点由线性渐变的StartPoint和EndPoint属性定义。 LinearGradientBrush画笔沿着这条线绘制它的GradientStops。

默认线性渐变是对角线。在默认情况下，线性渐变的StartPoint为（0,0），该区域的左上角被绘制，EndPoint为（1,1），该区域的右下角被绘制。沿着对角线路径插入结果梯度中的颜色。

可以调整StartPoint和EndPoint属性，使梯度更适合你的目标的控制，但GradientStop S的关系是这个样子：

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

该代码会导致这样的事情：