如何将WPFToolkit中的DataPointStyle从圆形更改为方形,三角形等?

时间:2016-04-24 13:36:58

标签: c# wpf xaml charts wpftoolkit

我有WPFToolkit图表,它很少有lineseries:

enter image description here

如何将lineserias DataPointStyle从圆形更改为方形,三角形......等等?

1 个答案:

答案 0 :(得分:1)

以下是一些创建DataPointStyle的示例XAML。我还创建了一些其他的样式,结果看起来一致:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication216"
    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" 
    x:Class="WpfApplication216.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <PointCollection x:Key="PCol1">1,10 2,30 3,20 4,40</PointCollection>
    <PointCollection x:Key="PCol2">1,40 2,20 3,30 4,10</PointCollection>

    <Style x:Key="DataPointStyle1" TargetType="{x:Type chartingToolkit:LineDataPoint}">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="Width" Value="32"></Setter>
        <Setter Property="Height" Value="32"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                    <Ellipse Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="DataPointStyle2" TargetType="{x:Type chartingToolkit:LineDataPoint}">
        <Setter Property="Background" Value="LightGreen"/>
        <Setter Property="Width" Value="16"></Setter>
        <Setter Property="Height" Value="16"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                    <Rectangle Fill="LightGreen" Stroke="DarkGreen" StrokeThickness="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="PolylineStyle1" TargetType="{x:Type Polyline}">
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="Stroke" Value="Blue"></Setter>
    </Style>
    <Style x:Key="PolylineStyle2" TargetType="{x:Type Polyline}">
        <Setter Property="StrokeThickness" Value="2"/>
        <Setter Property="Stroke" Value="Green"></Setter>
    </Style>

    <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">
                        <Polyline Points="{TemplateBinding Points}" Style="{DynamicResource PolylineStyle1}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="LineSeriesStyle2" 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">
                        <Polyline Points="{TemplateBinding Points}" Style="{DynamicResource PolylineStyle2}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid>

    <chartingToolkit:Chart Margin="0">
        <chartingToolkit:LineSeries DataPointStyle="{StaticResource DataPointStyle1}" Style="{StaticResource LineSeriesStyle1}" DependentValuePath="Y" IndependentValuePath="X" ItemsSource="{StaticResource PCol1}"/>
        <chartingToolkit:LineSeries DataPointStyle="{StaticResource DataPointStyle2}" Style="{StaticResource LineSeriesStyle2}" DependentValuePath="Y" IndependentValuePath="X" ItemsSource="{StaticResource PCol2}"/>
    </chartingToolkit:Chart>

</Grid>

enter image description here