2011-01-26 40 views
2

如何突出顯示用wpf工具包創建的圖表中的其他部分(列,條等)。我正在使用控件模板來設計自己的圖表。到目前爲止,我使用了一個觸發器來對鼠標所在的元素產生淡化效果。我想反轉這個;淡化鼠標未指向的其他元素(一種流行的圖表視覺噱頭)。下面的圖片顯示了選中的列淡入淡出,我希望它是圍繞column faded的另一種方式。Wpf工具包圖表反轉高亮

回答

1

只需將默認值設置爲淡出並使用觸發器將其調高至完全不透明狀態即可。你已經做了一些其他的風格,但這裏是基於默認樣式的例子:

<Grid> 
    <Grid.Resources> 
     <PointCollection x:Key="sampleData"> 
      <Point>1,20</Point> 
      <Point>2,40</Point> 
      <Point>3,30</Point> 
     </PointCollection> 
     <Style x:Key="dimEffectStyle" TargetType="{x:Type charting:ColumnDataPoint}" BasedOn="{StaticResource {x:Type charting:ColumnDataPoint}}"> 
      <Setter Property="Opacity" Value="0.25"/> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Trigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.EnterActions> 
        <Trigger.ExitActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.25" Duration="0:0:0.1" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.ExitActions> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Grid.Resources> 
    <charting:Chart> 
     <charting:ColumnSeries 
      Title="A" 
      ItemsSource="{StaticResource sampleData}" 
      IndependentValueBinding="{Binding X}" 
      DependentValueBinding="{Binding Y}" 
      DataPointStyle="{StaticResource dimEffectStyle}" 
      /> 
    </charting:Chart> 
</Grid> 

編輯:

如果你想改變所有其它數據點不同的是數據點鼠標懸停,這有點困難,不能簡單地通過重新設置控件來完成。但是,您可以創建自己的具有該功能的系列控制。這裏是一個新的MouseNotOverOpacity屬性稱爲MouseNotOverColumnSeries無樣式列系列類的圖表:

<Grid.Resources> 
     <PointCollection x:Key="sampleData"> 
      <Point>1,20</Point> 
      <Point>2,40</Point> 
      <Point>3,30</Point> 
     </PointCollection> 
    </Grid.Resources> 
    <charting:Chart Name="chart1"> 
     <local:MouseNotOverColumnSeries 
      Title="A" 
      ItemsSource="{StaticResource sampleData}" 
      IndependentValueBinding="{Binding X}" 
      DependentValueBinding="{Binding Y}" 
      MouseNotOverOpacity="0.5" 
      /> 
    </charting:Chart> 

這裏是MouseNotOverColumnSeries類:

public class MouseNotOverColumnSeries : ColumnSeries 
{ 
    public double MouseNotOverOpacity { get; set; } 

    protected override void OnDataPointsChanged(IList<DataPoint> newDataPoints, IList<DataPoint> oldDataPoints) 
    { 
     base.OnDataPointsChanged(newDataPoints, oldDataPoints); 
     foreach (var dataPoint in oldDataPoints) 
     { 
      dataPoint.MouseEnter -= new MouseEventHandler(dataPoint_MouseEnter); 
      dataPoint.MouseLeave -= new MouseEventHandler(dataPoint_MouseLeave); 
     } 
     foreach (var dataPoint in newDataPoints) 
     { 
      dataPoint.MouseEnter += new MouseEventHandler(dataPoint_MouseEnter); 
      dataPoint.MouseLeave += new MouseEventHandler(dataPoint_MouseLeave); 
     } 
    } 

    void dataPoint_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) 
    { 
     foreach (var dataPoint in ActiveDataPoints) 
      if (e.OriginalSource != dataPoint) dataPoint.Opacity = MouseNotOverOpacity; 
    } 

    void dataPoint_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) 
    { 
     foreach (var dataPoint in ActiveDataPoints) 
      dataPoint.Opacity = 1; 
    } 
} 

我們只是要注意,當數據點更改爲和註冊鼠標進入/離開處理程序,操縱所有其他數據點的不透明度,鼠標沒有結束。這可以擴展到支持故事板等。

+0

嗨裏克,非常感謝您的回答。然而我尋找的效果有些不同。請查看此鏈接以獲取示例:http://examples.idashboards.com/idashboards/?guestuser=wpsc1。發生的情況是,所有其他列都會消失,而重點列保持亮點。再次感謝您的回答。 – 2011-01-27 04:05:45