Binding layout properties of different UserControls

50 Views Asked by At

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

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

enter image description here

Problems are:

  1. 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;
  2. 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?

2

There are 2 best solutions below

2
On

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

0
On

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.