Wpf工具包图表反转突出显示

时间:2011-01-26 12:22:17

标签: wpf wpftoolkit charts

如何在使用wpf工具包创建的图表中突出显示其他部分(列,条等)。我正在使用控件模板来设置自己的图表样式。到目前为止,我使用了一个触发器来对鼠标所在的元素产生淡化效果。我想反过来;淡化鼠标未指向的其他元素(流行的图表视觉噱头)。下图显示了选定的Faded列,我希望它与column faded相反。

1 个答案:

答案 0 :(得分: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>

修改

如果要更改鼠标结束时除数据点以外的所有其他数据点,那就更难了,只能通过重新设置控件来完成。但是您可以创建自己的具有该功能的系列控件。下面是一个图表,其中包含一个名为MouseNotOverColumnSeries的无样式列系列类,其中包含一个新的MouseNotOverOpacity属性:

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

我们只关注数据点何时发生变化并注册鼠标进入/离开处理程序,这些处理程序操纵鼠标未结束的所有其他数据点的不透明度。这可以扩展到支持故事板等。