Search code examples
c#wpfxamldata-visualizationwpftoolkit

How to change DataPointStyle in WPFToolkit from circular to square, triangle ... etc?


I have WPFToolkit chart, it has few lineseries:

enter image description here

How to change on lineserias DataPointStyle from circular to square, triangle ... etc?


Solution

  • Here's some sample XAML creating DataPointStyle. I also created some other additional styles just so the result looks consistent:

    <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