How do I display the name under the node

The default location to display the name of the node is the center, but do I change to display it under the node?

Thanks!

Hello Xiaochu

The best way to do this is to create a custom template for each node type (if you haven't done so already) and arrange the content display in there. This is done by creating a custom node style, and then using a Setter to set the NodeTemplate property. In here you define the shape and layout of the visible part of the node. You'd want to have a grid with 2 rows. The first row would use star sizing, and the second row should use auto sizing. In the first row you would place the usual look of your node, and in the second row would be the content host to display the Data. The content host is generally this:

<ContentPresenter Content="{Binding}" ContentTemplateSelector="{Binding NodeContentTemplateSelector, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramNodeElement}}}" />

You can find examples of creating custom node styles in the CustomStyle.FlowDiagrams sample. Let me know if you need help with anything.

-Jason Fauchelle

I finally found that StackPanel works for me. The StackPanel contains the rectangle which has the height binding to its parent, and a textbox which has a negative Bottom value.

There is another thing I did not mention is that I wanted the resizer box only surround the rectangle but not the text.

Thank you!

Hello Xiaochu

Good to hear you got it sorted. That is the best solution for having the text box outside the resizer box.

-Jason Fauchelle

Hi Jason,

When the name of the Node is too long, it does not display the whole name (please see the attached picture). Seems like the limit is the width of the node. How can this be fixed?

Thank you! Xiaochu

Hello Xiaochu

On the TextBlock that is displaying the name, try to set the left and right values of the margin to some large negative number, such as -500. This works well for me.

-Jason Fauchelle

It works well for me too, thank you!