Wrapping text in Palette

GoXam
#1

I’m having a related issue - trying to create a simple palette with an icon to the left of a title, with description underneath that wraps text to the width of the palette, which is inside of a RAD bar. However, when displayed, the description text does not wrap.

Here is the node template:

#2


That’s because the measuring of each node doesn’t know anything about the width of the viewport. (I assume the Palette is stretching to fit in your bar.)
Â
What would you expect to happen when the user zooms in or out?
Say the user zooms out – should the text wrap less?
Or should everything appear the same but at a smaller scale?
Â
Diagrams are fundamentally two-dimensional, unlike all of the other standard item controls in WPF/Silverlight.
Â
You could try data-binding the StackPanel’s Width to {Binding Path=Node.Diagram.Panel.ViewportBounds}, although I’m not confident that that will work. If it doesn’t you could implement a Diagram.Panel.ViewportBoundsChanged event handler that constrains all of the nodes somehow.  (Declare the event handler in a Diagram.TemplateApplied event handler so as to wait for the Diagram’s ControlTemplate to be applied so that the Diagram.Panel exists.)
Â
By the way, your NodePanel isn’t doing anything – I would delete it.

#3

I’m not concerned with zoom, only resizing. The palette is inside of a docking panel that the user can make wider. When the palette is wider, I want its layout to be recalculated so that any child text blocks that have word-wrapping enabled will wrap the text properly.

#4

Well, try that data-binding or ViewportBoundsChanged event handler.

You can decide later whether to set Diagram.AllowZoom to false.

#5

Thanks for the suggestion, Walter, but I don’t think it applies to my scenario. I’m trying to achieve a very simple layout. Each node has 3 properties (title, description, and icon). I want the palette to display the icon on the left, the title in bold to the right of the icon, and the description underneath with wordwrap to whatever height is needed based on the current width of the palette. If the user makes the palette wider, I want the palette to reformat itself automatically.

I’m using a simple data template, like so:

This displays two rows for each item as specified, with the icon on the left and bolded title to the right, however the description does not wrap. Instead, it scrolls off to the right.

Is there another property that I need to set on the palette to prevent it from scrolling horizontally?

#6

You need to limit the width in order to get the text to wrap. That’s why I was suggesting that you set or bind the Grid.Width to the palette.Panel.ViewportBounds.Width.

#7

Tried the binding approach on both the grid and the text block - no luck. I’ve also tried lots of different combinations of controls, including the silverlight toolkit’s wrappanel control.

Since the horizontal scroll range appears to be set based on the widest node in the list, I’m thinking that the problem is not with the node width, but the palette width. I’ve also tried setting the palette width, but nothing seems to work.

#8

Well, that’s a good point – there really doesn’t sound like there’s a need for any relationships nor any 2D layout. Why not just use a ListBox or similar ItemsControl?