wpftoolkit - Wpf Toolkit Chart Invert Highlighting -
how can highlight other pieces (columns, bars etc.) in chart created wpf toolkit. using control template style own chart. far used trigger fading effect on element on mouse residing. want invert this; fade other elements (a popular charting visual gimmick) on mouse not pointing. following image shows selected column faded, want other way around.
just set default value faded , use trigger bring full opacity. have done other styling here example based on default style:
<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>
edit:
if want change other data points except data point mouse over, bit harder , can't done restyling controls. can create own series control has capability. here chart unstyled column series class called mousenotovercolumnseries
new mousenotoveropacity
property:
<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>
here mousenotovercolumnseries
class:
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; } }
we pay attention when data points change , register mouse enter/leave handlers manipulate opacity of all other data points mouse not over. expanded support storyboards, etc.
Comments
Post a Comment