WPF中Chart ToolKit的樣式活動點

Question

我有圖表。

我使用一些自定義模板對所有點進行樣式設置：

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

在使用Template之前，可以單擊圖表上的點使其“活動”（點變為紅色）。

應用模板后如何使活動點現在活躍？

---

在模板代碼之前：

<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

您必須為Ellipse創建一個Style ，並處理IsMouseOver和MouseDown事件。

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>

代碼隱藏：

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