WPF中圖表工具套件的樣式活動點

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