Hi,

All aspects of the ShapeNode size and location are controlled by its Bounds property. If you want to modfiy the size, but keep the node anchored to the right, you need to change not only the width, but set a new location too - the new location will be offset by the difference between the new and the old size. For example, if you increase the width by 10, you need to move the location with 10 to the left to keep the node right anchored.

var offset = newWidth - node.Bounds.Width;
var newBounds = new Rect(node.Bounds.X - offset, node.Bounds.Y, newWidth, node.Bounds.Height);
node.SetBounds(newBounds, true, true);
 

For the image, I already explained how to maintain its size in my previous post. If you can modify the size of your image to be what you need to be seen inside the node - the effect from your screen shot can be achieved just by setting node.ImageAlign to ImageAlign.BottomRight. If you can't modify the size of the image, set node.ImageAlign to ImageAlign.Fit and use node.ImagePadding to restrict the image to your needed bounds. For example, if your node has a size of 50 by 50 and you need your image to have size 40 by 40 - set node.ImagePadding = new Thickness(10, 10, 0, 0);. That will have the same effect.

Regards,
Lyubo,
MindFusion

Hi,

You can achieve an effect similar to that in the picture by using two nodes - one attached to the other, and some custom drawing with clipping regions to achieve the transparency effect. Below is a code sample of that approach:

ShapeNode imageNode = diagram.Factory.CreateShapeNode(0, 0, 250, 250);
imageNode.Shape = Shapes.Rectangle;
imageNode.CustomDraw = CustomDraw.Additional;
imageNode.Image = myImage;
imageNode.ImageAlign = ImageAlign.Fit;

ShapeNode overlayNode = diagram.Factory.CreateShapeNode(150, 150, 100, 100);
overlayNode.Shape = Shapes.Rectangle;
overlayNode.Brush = Brushes.Transparent;
overlayNode.Locked = true;
overlayNode.AttachTo(imageNode, AttachToNode.BottomRight);

diagram.DrawNode += (sender, args) =>
{
	if (args.Node != imageNode)
		return;

	var graphics = args.Graphics;
	var clip = new CombinedGeometry(
		GeometryCombineMode.Exclude,
		new RectangleGeometry(imageNode.Bounds),
		new RectangleGeometry(overlayNode.Bounds));
	var translate = new TranslateTransform(-imageNode.Bounds.X, -imageNode.Bounds.Y);
	graphics.PushTransform(translate);
	graphics.PushClip(clip);
	graphics.DrawRectangle(new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)), null, imageNode.Bounds);
	graphics.Pop();
	graphics.Pop();
}; 

Regards,
Lyubo,
MindFusion

1. something like -
Rect toAlign, alignTarget;
toAlign.X = alignTarget.Right - toAlign.Width;
toAlign.Y = alignTarget.Bottom - toAlign.Height;

2. there are the Width and Height properties of ImageSource.

Hi Mr. Slavcho, thank you and Mr. Lyubo for your answers. The answer you said is not very clear to me. My first question is that I created two nodes in the diagram, imageNode and overlayNode. I currently implement the effect in the picture according to the method you taught, but some optimization is needed, that is, the bottom and right sides of the overlayNode node should coincide with the bottom and right sides of the image in the imageNode node, not the bottom and right sides of the imageNode How can I achieve this? My second problem is that I want to get the Width and Height of the image in the imageNode before I create the imageNode. Use these two to create the imageNode {imageNode = diagram.Factory.CreateShapeNode (0, 0, Width, Height);} How can I achieve this?

Hello Mr. Lyubo, thank you for your answer. After I applied the sample code, I got an error, why can't imageNode.Image and ImageAlign.BottomRight be used. Please give me guidance. At present, I have only achieved the effect of Figure 2, but I want to achieve the effect of Figure 1: The bottom and right sides of the image of the imageNode overlap with the bottom and right sides of the overlayNode respectively. In addition, how can we make the size of image in imageNode and imageNode consistent? I think this can also achieve the effect of Figure 1. Please give me sample code.

Hello Mr. Lyubo, thank you for your answer. After I changed the imageNode property ImageAlign from the original ImageAlign.Fit to ImageAlign.BottomRight, the image in imageNode is not displayed completely, and this function: when zooming in and out, change the mouse wheel to the center point in the view, instead of Using the current coordinate position of the mouse as the base point is also affected and does not work properly.

The effect I want：