Category / Section
How to achieve zoom in or zoom out functionality to ports in WPF Diagram (SfDiagram)?
2 mins read
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");
}
}
}
}
