Category / Section
How to achieve zoom in or zoom out functionality to ports in WPF Diagram (SfDiagram)?
Zooming can be applied over ports using the ViewPortChangedEvent by changing the width and height of the ports when page is getting zoom-in or zoom-out depends the zoom factor values of the WPF Diagram (SfDiagram). This event will be raised whenever a diagram and its objects have been changed.
C#
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
SfDiagram Diagram = new SfDiagram();
Diagram.Nodes = new NodeCollection();
NodeViewModel node = new NodeViewModel()
{
OffsetX = 100,
OffsetY = 100,
UnitHeight = 100,
UnitWidth = 100,
Shape = new RectangleGeometry() { Rect = new Rect(10, 10, 10, 10) },
Ports = new PortCollection()
{
new CustomNodePort()
{
UnitHeight = 10,
UnitWidth = 10,
NodeOffsetX = 1,
NodeOffsetY = 1,
InitialHeight = 10,
InitialWidth = 10,
Shape = new RectangleGeometry(){ Rect = new Rect(10 , 10, 10, 10) },
}
},
};
(Diagram.Nodes as NodeCollection).Add(node);
(Diagram.Info as IGraphInfo).ViewPortChangedEvent += MainWindow_ViewPortChangedEvent;
}
private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args)
{
foreach (NodeViewModel node in Diagram.Nodes as NodeCollection)
{
foreach (CustomNodePort nodeport in node.Ports as PortCollection)
{
nodeport.UnitHeight = nodeport.InitialHeight * args.NewValue.CurrentZoom;
nodeport.UnitWidth = nodeport.InitialWidth * args.NewValue.CurrentZoom;
}
}
}
}
Custom class for ports to get or set the size to diagram ports.
public class CustomNodePort : NodePortViewModel
{
private double _initialheight;
public double InitialHeight
{
get
{
return _initialheight;
}
set
{
if (value != _initialheight)
{
_initialheight = value;
OnPropertyChanged("InitialHeight");
}
}
}
private double _initialwidth;
public double InitialWidth
{
get
{
return _initialwidth;
}
set
{
if (value != _initialwidth)
{
_initialwidth = value;
OnPropertyChanged("InitialWidth");
}
}
}
}
