Question

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

当然，梯度应该在调整大小时保留点。不知何故，我真的无法弄清楚如何做到这一点，它真的让我发疯。

感谢您的帮助。

enter image description here

编辑：如果我使用@Sheridans解决方案，如果看起来像这样：

enter image description here

Answer 1

您无法使用精确坐标LinearGradientBrush来定义Point。相反，我们在虚构的矩形中指定Point s，通常尺寸介于0和1之间。来自MSDN上的LinearGradientBrush Class页：

LinearGradientBrush使用线性渐变绘制区域。线性渐变定义沿线的梯度。线的终点由线性渐变的StartPoint和EndPoint属性定义。 LinearGradientBrush画笔沿着这条线绘制其GradientStop。

默认线性渐变是对角线。在默认情况下，线性渐变的StartPoint为（0,0），正在绘制区域的左上角，其EndPoint为（1,1），即绘制区域的右下角。生成的梯度中的颜色沿对角线路径插值。

您可以调整StartPoint和EndPoint属性以使渐变更适合目标控件，但GradientStop应如下所示：

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

此代码将产生如下内容：

enter image description here

Answer 2

希望这有帮助。

我已经使用 BlurBitmapEffect 编辑了lineseries模板，并且我添加了一条具有相同Points的折线，以便我们可以实现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),};

    }

结果

enter image description here

更新在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>

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

2 个答案: