This example demonstrates how to zoom the SfChart3D using the ScrollBar.
The Maximum, Minimum properties and LabelCreated event of NumericalAxis3D will help to achieve zooming the SfChart3D using the scrollbar by these following steps.
Step 1: Create Scrollbars and register the ValueChanged event for getting the position and factor for zooming.
<!--ZoomFactor-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="X-Axis ZoomFactor :" VerticalAlignment="Center"/>
<ScrollBar Height="15" Grid.Column="1" Orientation="Horizontal" Margin="35,5,10,5" x:Name="zoomFactor" Minimum="0" Maximum="1" Value="1"
ValueChanged="zoomFactor_ValueChanged"/>
</Grid>
<!--ZoomPosition-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="X-Axis ZoomPosition :" VerticalAlignment="Center"/>
<ScrollBar Height="15" Grid.Column="1" Orientation="Horizontal"
x:Name="zoomPosition" Margin="35,5,10,5" Minimum="0" Maximum="1"
ValueChanged="zoomPosition_ValueChanged"/>
</Grid>
Step 2: Update the Maximum and Minimum properties of PrimaryAxis based on Scrollbar values.
//Calculating the Maximum and Minimum properties of Axis.
private void UpdateRange()
{
if (zoomPosition != null && zoomFactor != null)
{
double start = minimum + zoomPosition.Value * maximum;
double end = start + zoomFactor.Value * maximum;
if (end > maximum)
{
start = start - (end - maximum);
end = maximum;
}
if (start < minimum)
start = minimum;
xAxis.Minimum = start;
xAxis.Maximum = end;
}
}
Step 3: Update the LabelContent property based on the value of Position property of ChartAxisLabel in LabelCreated event.
<chart:SfChart3D.PrimaryAxis>
<chart:NumericalAxis3D Interval="1" EnableAutoIntervalOnZooming="False" LabelCreated="xAxis_LabelCreated" LabelRotationAngle="-90" x:Name="xAxis" />
</chart:SfChart3D.PrimaryAxis>
// Update LabelContent property of Position of AxisLabel
private void xAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
{
if (e.AxisLabel.Position - (int)e.AxisLabel.Position < 0.5)
{
int position = (int)Math.Floor(e.AxisLabel.Position);
if (position < months.Count() && position >= 0)
e.AxisLabel.LabelContent = months[position].ToString();
else
e.AxisLabel.LabelContent = "";
}
else
{
int position = (int)Math.Ceiling(e.AxisLabel.Position);
if (position < months.Count() && position >= 0)
e.AxisLabel.LabelContent = months[position].ToString();
else
e.AxisLabel.LabelContent = "";
}
}
Refer to this KB article, for applying default zoom and pan position in SfChart.
KB article - How to apply zooming in 3D Charts using scrollbar?
How to display the axis labels in a particular format