Zooming in the Diagram

Hello,

I have a diagram with a popup that is displayed when you click an element on the diagram node. The issue I have is that if I am zoomed into the diagram - which is what happens if diagram is small enough to fit the canvas - the popup is also zoomed and enlarged! Please see the attached screenshot. My question is:

• Any ideas how to get around the zooming issue so that the popup is not zoomed into when I zoom into the diagram?
• How can I set the default zoom to 100% and not Size to fit, while still allow the end user to user mouse scroll to zoom in/out?

Thanks, Hadi

Hello Hadi

The easiest way I have found to work around the popup zooming, is to create a converter that takes in the zoom level of the diagram surface, then inverts it and returns a ScaleTransform which you'd apply to the Popup. Here is an example of such a converter:

public class ZoomToCancelScaleConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    double zoom = (double)value;
    return new ScaleTransform(1 / zoom, 1 / zoom);
  }

  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

And this is what you would set on the popup (where CancelZoom is an instance of the converter):

RenderTransform="{Binding Zoom, Converter={StaticResource CancelZoom}, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}"

For your second question, it sounds like you may have set the ZoomMode to SizeToFit. If you set the ZoomMode of the DiagramSurface to MouseWheel, then it will default to 100% zoom on load, and enable user mouse wheel zooming.

Let me know if you have further questions about these.

Apologies for the late reply - I have been away for a week.

Jason Fauchelle

Thanks a lot Jason, that did the trick.