Binding layout properties of different UserControls

Question

I have the following layout for a screen displaying multi-channel information (similar to audio tracks):

MultiChannelPlotterControl contains one HorizontalRuler instance at the bottom and a UniformGrid containing N SingleChannelPlotterControl instances;
Each SingleChannelPlotterControl has one instance of VerticalRuler aligned to left;

Problems are:

Each vertical ruler can have a different Width, but I would like them all to stretch to the largest width so that they could fit, but since they are on different controls, I cannot put them in the same container (another UniformGrid, for example. Now if I decide to put them together in a different container, they would not be part of the SingleChannelPlotterControl anymore;
There is a rectangular region on the bottom left corner. That is supposed to have the same Width of the VerticalRuler(s), but it is still higher in the layout tree. It is currently empty, but I could put something there and bind its Width, for example;

So the question is:

How could I Layout/Element-Bind/Style these controls so that right edge of the Vertical Rulers keep aligned to each other (fitting the widest one) and with the left edge of the Horizontal Ruler?

EDIT: I guess I could create a "LeftPanelWidth" DependencyProperty on MultiChannelPlotterControl, and on its getter use some VisualTreeHelper wizardry to get ActualWidths for every VerticalRuler inside, but how would I choose the largest width and set the widths of the others?

score 0 · Answer 1 · answered Jan 19 '16 at 12:28

0

You may try to use SharedSizeGroup property on your column definition. You'll have to set IsSharedSizeScope=True on the correct parent container.

answered Jan 19 '16 at 12:28

Jams

79
2
6

Thanks for your answer! I don't have a column definition. The container of the SingleChannelPlotter controls is a UniformGrid with a single column. Each SingleChannelPlotter control's LayoutRoot is a DockPanel whose first child is a VerticalRuler control. Thus, each VerticalRuler has its own Width and is unaware of the existence of their "siblings". What I want is exactely a way to bind them all together to get the _visual effect_ of a column. – heltonbiker Jan 19 '16 at 12:33
Then maybe the easiest way would be to replace your DockPanel with a Grid (you should be able to get the exact same layout). Then you'll be able to define the first column with a SharedSizeGroup. If you want more help, just paste your xaml code so I can help you to do what you want. – Jams Jan 19 '16 at 17:30

score 0 · Answer 2 · answered Jan 19 '16 at 16:58

I ended up solving the problem by eliminating SingleChannelPlotterControl class.

Instead, I use two side-by-side UniformGrid instances (as the ItemsPanel of two ItemsControl instances), setting their ItemsSource to the same CollectionViewSource declared in XAML.

Then, for each ItemsControl I declare a different ItemTemplate, the left one containing a VerticalRuler, and the other one displaying the signals the same way SingleChannelPlotterControl was doing previously - except it doesn't contain the ruler anymore.

Binding layout properties of different UserControls

2 Answers2