Question

I need to implement zooming and panning around X-axis in my bus schedule graph viewer (and, possibly, editor) written in C#/WPF. I could use simple transforms, but note that when the distance between points gets larger, the size of the points remains the same. Also, the names of the bus stations should remain on the fixed positions on the left, no matter how I pan the graph:

With the current approach, all the visuals are rendered on a single ItemsControl with Canvas as an ItemsPanel and several DataTemplates, one for each type of shape (point, segment, time split line, station line). So, every shape is binded to according ViewModel, which has PosX and PosY properties, provided to Canvas:

<ItemsControl.ItemContainerStyle>
     <Style>
          <Setter Property="Canvas.Left"
                  Value="{Binding Path=PosX, UpdateSourceTrigger=PropertyChanged}" />
          <Setter Property="Canvas.Top"
                  Value="{Binding Path=PosY, UpdateSourceTrigger=PropertyChanged}" />
     </Style>
</ItemsControl.ItemContainerStyle>

When I need to pan or zoom, I call OnPropertyChanged(“PosX”) for viewmodel of each shape. Then the property is recalculated with new values of PanX and ZoomX properties of entire graph:

public double PosX
    {
        get
        {
            return _scheduleGraphViewModel.ZoomX * _shedulePointModel.PlanTime + _scheduleGraphViewModel.PanX;
        }
    }

The problem is that this works much slower than I was hoping. On 1000+ points it is almost unusable. Profiler tells me that the bottleneck is inside OnPropertyChanged method.

I assume that the entire approach is wrong, but I cannot find or think out better solution.

Answer 1

Separate your graph a structure like this:

ParentGrid1
    StationNames
    ParentGrid2        // Apply transformation on this
        LinesInGraph
        PointsInGraph
            Point1     // Apply inverse transformation on each of these
            Point2
            Point3
            ...