2011-01-26 43 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