Style Active point for Chart ToolKit in WPF

Question

I have chart.

I style all points on it using some custom template :

<chartingToolkit:LineSeries  DependentValuePath="Value"  IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
                            <chartingToolkit:LineSeries.DataPointStyle>
                                <Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
                                    <Setter Property="Background" Value="#bdb3ce" />
                                    <Setter Property="Foreground" Value="#bdb3ce" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                                                <Canvas>
                                                    <Ellipse Height="8" Width="8" StrokeThickness="2" Stroke="#bdb3ce" Fill="#423852"/>
                                                </Canvas>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </chartingToolkit:LineSeries.DataPointStyle>
                        </chartingToolkit:LineSeries>

Before using Template it was possible to click on point on chart to make it "active" (point became red).

How i can make point active now after applying template?

---

Before templating code :

<chartingToolkit:Chart Grid.Row="1" Grid.ColumnSpan="2" Name="lineChart" VerticalAlignment="Top" Height="200">
                        <chartingToolkit:Chart.Axes>
                            <chartingToolkit:LinearAxis Orientation="X">
                                <chartingToolkit:LinearAxis.MajorTickMarkStyle>
                                    <Style TargetType="Line">
                                        <Setter Property="Stroke" Value="White" />
                                        <Setter Property="StrokeThickness"  Value="1" />
                                        <Setter Property="Y1"   Value="-4" />
                                        <Setter Property="Y2"  Value="4" />
                                    </Style>
                                </chartingToolkit:LinearAxis.MajorTickMarkStyle>
                            </chartingToolkit:LinearAxis>
                            <chartingToolkit:LinearAxis Orientation="Y">
                                <chartingToolkit:LinearAxis.MajorTickMarkStyle>
                                    <Style TargetType="Line">
                                        <Setter Property="Stroke" Value="White" />
                                        <Setter Property="StrokeThickness"  Value="1" />
                                        <Setter Property="Y1"   Value="-4" />
                                        <Setter Property="Y2"  Value="4" />
                                    </Style>
                                </chartingToolkit:LinearAxis.MajorTickMarkStyle>
                            </chartingToolkit:LinearAxis>
                        </chartingToolkit:Chart.Axes>

                        <chartingToolkit:Chart.Style>
                            <Style TargetType="Control">
                                <Setter Property="Foreground" Value="White" />
                            </Style>
                        </chartingToolkit:Chart.Style>
                        <chartingToolkit:Chart.LegendStyle>
                            <Style TargetType="Control">
                                <Setter Property="Width" Value="0" />
                            </Style>
                        </chartingToolkit:Chart.LegendStyle>
                        <chartingToolkit:Chart.PlotAreaStyle>
                            <Style TargetType="Grid">
                                <Setter Property="Background" Value="Transparent" />
                            </Style>
                        </chartingToolkit:Chart.PlotAreaStyle>
                        <chartingToolkit:LineSeries  DependentValuePath="Value"  IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
                            <chartingToolkit:LineSeries.DataPointStyle>
                                <Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
                                    <Setter Property="Background" Value="White" />
                                    <Setter Property="Foreground" Value="White" />
                                </Style>
                            </chartingToolkit:LineSeries.DataPointStyle>
                        </chartingToolkit:LineSeries>
                    </chartingToolkit:Chart>

Answer 1

You have to create a Style for your Ellipse and handle IsMouseOver and MouseDown event.

XAML:

<Window.Resources>
    <Style x:Key="EllipseStyle1"  TargetType="{x:Type Ellipse}">
        <Setter Property="Fill" Value="Yellow"></Setter>
        <Setter Property="Stroke" Value="Orange"></Setter>
        <Setter Property="Height" Value="12"></Setter>
        <Setter Property="Width" Value="12"></Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="StrokeThickness" Value="3"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="PolylineStyle1" TargetType="{x:Type Polyline}">
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="Stroke" Value="Blue"></Setter>
    </Style>
    <Style x:Key="DataPointStyle1" TargetType="{x:Type chartingToolkit:LineDataPoint}">
        <Setter Property="Background" Value="Yellow"></Setter>
        <Setter Property="Width" Value="16"></Setter>
        <Setter Property="Height" Value="16"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                    <Ellipse Style="{DynamicResource EllipseStyle1}"  MouseDown="Ellipse_MouseDown"/>
                </ControlTemplate>
            </Setter.Value>
        </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>
</Window.Resources>

<Grid>
    <chartingToolkit:Chart Margin="0" Title="Chart Title">
        <chartingToolkit:Chart.DataContext>
            <PointCollection>1,10 2,20 3,30 4,40</PointCollection>
        </chartingToolkit:Chart.DataContext>
        <chartingToolkit:LineSeries DependentValuePath="Y" IndependentValuePath="X" 
                                    ItemsSource="{Binding}" IsSelectionEnabled="True"
                                    Style="{DynamicResource LineSeriesStyle1}"
                                    DataPointStyle="{DynamicResource DataPointStyle1}"/>
    </chartingToolkit:Chart>
</Grid>

Code-Behind:

    private void Ellipse_MouseDown(object sender, MouseButtonEventArgs e)
    {
        curr = (Ellipse)sender;

        if (curr == prev)
        {
            if (curr.Fill == Brushes.Yellow)
                curr.Fill = Brushes.Red;
            else if (curr.Fill == Brushes.Red)
                curr.Fill = Brushes.Yellow;
        }
        else
        {
            if (prev == null)
                prev = curr;

            prev.Fill = Brushes.Yellow;
            curr.Fill = Brushes.Red;
        }
        prev = curr;
    }