Tip:
Highlight text to annotate it
X
In this video I will cover adding basic interaction and scrolling to the ComponentOne Chart controls
for WPF and Silverlight. First, I’ll show how to add interactive scrollbars to the axes,
and then I’ll show how to add zooming and scaling interaction to the plot area.
Here I have a chart that is populated at run-time with many points.
To enable a scrollbar on either axis, there are a couple properties you must set.
If you prefer to work in XAML, define the ChartView object by clicking the New button
on the ChartView property. The ChartView exposes the Axis and other view related properties.
Then find the AxisX property and click the New button here as well to generate the markup.
Now you have defined the axis in XAML and you can proceed to customize it.
The first property you’ll want to set is the Scale property. This should be a value
between 0 and 1, and it represents the percent of the plot area visible on the screen. The
default value is 1, which means 100% is visible and there is no scrolling necessary. A value
of 0.5 will cut the chart in half, making half visible and half off screen.
The second property you’ll want to set is the ScrollBar property. Here, you just need
to create a new instance of the AxisScrollBar class and you’re done.
Go ahead and build the project to see the scrollbar in action.
… If you prefer to work in code, you can add
a scrollbar with just 2 lines of code. Under the ChartView property you can directly set
the Scale and ScrollBar properties on either axis.
… So far I’ve shown how to add some very basic
interaction with scrolling. Next, let’s look at how you can add zooming, scaling and
panning interactions to your chart. You can add a variety of interactive features
on the ComponentOne Chart control by using the Actions collection. There are 3 supported
actions for 2D charts: Zooming, Scaling and Translation which is the more technical term
for panning. Go ahead and add all three actions in Actions
collection editor. Each action has a few properties that enable you to configure how they work.
These actions will occur when the user interacts with the plot area using the mouse or keyboard,
so only one action can work with each mouse button or key. A common scenario is to enable
zooming with the mouse left button. Enable translation when the user presses a modifier
key, such as Shift, along with the mouse. And for scaling we can set that to work with
the mouse wheel. You’ll notice the zoom action also has a
UI part, a draggable box, which you can customize its appearance with the Fill and Stroke properties
here. I will click OK to add these 3 actions to
my chart. Note that before I run the application notice
here I’ve also enabled a scrollbar for the Y-Axis just like we did earlier for the X-Axis.
Scrollbars are not necessary but they help visualize to the user that there’s more
plot area off screen. Now let’s see these interactions in action.
When I click and drag with the left mouse button you can see the zoom action. This enables
users to select a region to zoom in on. When I hold down the shift key and drag the
plot area, it translates or pans the chart. When I scroll the mouse wheel it scales the
plot, which has the same as zooming. You can rely on the scaling to allow the user to zoom
back out, or you can put a reset button on your form that resets both axis scales to
1. …
With the Actions feature you’ll find that you don’t need the scrollbars. They act
as a standard UI cue to the user, but you can disable them and still keep the actions
I just showed you working. In another video I will cover the same topic
for the Windows Store and Windows Phone versions of the control. For more WPF and Silverlight
videos like this one check out the resource center for ComponentOne Chart.
And thanks for watching.