兩點之間的矩形對角線漸變畫筆

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> 

該代碼會導致這樣的事情：