Thanks
How to control the position and size of Image on imageNode? Is there any sample code?

D wrote on Mar 20^th, 2020 at 1:58am:


You can control the position of the image within the node via the ImageAlign and ImagePadding properties of the ShapeNode class. If you need to display an Image outside of the node, you can achieve that with a transparent attached node.

D wrote on Mar 20^th, 2020 at 2:06am:


These controls aren't part of any MindFusion package. The left looks like a TreeView control with filtering options added. Probably can achieve something similar with the default WPF TreeView control with template changes. The bottom right control looks like a color picker and the bottommost one looks like a panel with widgets and buttons on it.

Regards,
Lyubo,
MindFusion

Hi,

The ImageAlign property's type is an enumeration, so maybe TextBox is not the best control to use. You can try with a ComboBox:

myComboBox.ItemsSource = Enum.GetValues(typeof(ImageAlign)).Cast<ImageAlign>();
myComboBox.SelectionChanged += (sender, args) =>
{
	var node = diagram.ActiveItem as ShapeNode;
	if (node == null || node.Image == null)
		return;

	node.ImageAlign = (ImageAlign)myComboBox.SelectedItem;
}; 

For ImagePadding you can use a value converter eventually and the conversion will be similar to the below case handled from a button click event. Note that this code has no validation of the input. It will accept input in the form of "0,0,0,0":

myButton.Click += (sender, args) =>
{
	var node = diagram.ActiveItem as ShapeNode;
	if (node == null || node.Image == null)
		return;


	string[] thicknessValues = myTextBox.Text.Split(',');

	node.ImagePadding = new Thickness(double.Parse(thicknessValues[0]),
		double.Parse(thicknessValues[1]),
		double.Parse(thicknessValues[2]),
		double.Parse(thicknessValues[3]));
}; 

Regards,
Lyubo,
MindFusion

I want to change the mouse wheel to the center point in the view during the zoom in and zoom out events of the diagram instead of the current coordinate position of the mouse as the base point.
How to achieve? Is there any sample code?

Added:Why is the drag of ShapeNode on the diagram restricted after removing the thumbnail part (the code part in the red area)?

After double-clicking on any point in the ShapeNode, this point will coincide with the center point of the centerline, thereby moving the entire ShapeNode. How to achieve this? Is there any sample code?

Hi,

D wrote on Mar 23^rd, 2020 at 3:08am:


Change the mouse wheel handler to this:

		private void OnDiagramMouseWheel(object sender, MouseWheelEventArgs e)
		{
			var zoomRect = diagram.Viewport;
			if (e.Delta < 0)
				zoomRect.Inflate(10, 10);
			else
				zoomRect.Inflate(-10, -10);
			diagram.ZoomToRect(zoomRect, true);
		} 

D wrote on Mar 23^rd, 2020 at 4:07am:


You can either change the size of the original image and use the ImageAlign.Center option (or another alignment depending on your requirements), or use the ImageAlign.Fit option while adjusting the ImagePadding value to correct for the new node size. For example, if your image needs to be 20,20px and your node's size is 40,40px - you'll set an ImagePadding value of 10. If the node's size is increased to 50,50px, padding will be increased to 15, etc.

D wrote on Mar 23^rd, 2020 at 4:17am:


Use the following code:

diagram.NodeDoubleClicked += (sender, args) =>
{
	var node = args.Node;

	var posX = args.MousePosition.X - node.GetCenter().X;
	var posY = args.MousePosition.Y - node.GetCenter().Y;

	var newPos = new Point(
		diagram.Viewport.X + diagram.Viewport.Width / 2 - node.Bounds.Width / 2 - posX,
		diagram.Viewport.Y + diagram.Viewport.Height / 2 - node.Bounds.Height / 2 - posY);

	node.SetBounds(new Rect(newPos, node.Bounds.Size), true, true);
}; 

Regards,
Lyubo,
MindFusion