This article introduces a simple control which allows to share height and/or width between multiple instances of it. It can be used very similar to the SharedSize feature of the Grid control, but it's easier to use and it can mix shared width and height.
I often have to have multiple controls on a window that needs to have the same height or width. Most of the time I used the
Grid control and
To do so you have to write a lot of XAML code sometimes. Specially if you want to have multiple
ListBox) where for example the items should have the same row height.
This why I created the
The demo application show two use cases: Simple share size in a couple of
StackPanels and share row height over multiple
Using the code
Using the control is as simple as using a
Border. You simply surround the desired controls with a
SharedSizeControl and specify the
<sharedSize:SharedSizeControl SharedHeightGroup="HeightGroup1" SharedWidthGroup="WidthGroup1">
<Button Content="Shares width and hight"/>
<Button Content="Shares only width"/>
<Button Content="Shares only hight"/>
You can define multiple shared size scopes in a window by applying the attached dependency property
IsSharedSizeScope to any control
How does it work
The magic is inside the
MeasureOverride method of the
protected override Size MeasureOverride(Size constraint)
var size = base.MeasureOverride(constraint);
if (String.IsNullOrEmpty(SharedWidthGroup) && String.IsNullOrEmpty(SharedHeightGroup))
var scope = GetScope();
size.Width = scope.GetMaxSizeValue(SharedWidthGroup);
size.Height = scope.GetMaxSizeValue(SharedHeightGroup);
GetMaxSizeValue method iterates through all controls and returns the maximum width/height of the
This maximum width/height is returned as the needed size for the
The remaining code is mainly for managing the shared size scopes and groups.
2012/12/26 - Initial release.