Click here to Skip to main content
13,344,287 members (62,220 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 28 Dec 2012

Sharing size between different controls

, 28 Dec 2012
Rate this:
Please Sign up or sign in to vote.
This article introduces a simple control which allows to share height and/or width between multiple instances of it.



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 its SharedSizeScope feature.

To do so you have to write a lot of XAML code sometimes. Specially if you want to have multiple ItemsControls (like ListBox) where for example the items should have the same row height.

This why I created the SharedSizeControl.

The demo application show two use cases: Simple share size in a couple of StackPanels and share row height over multiple ListBoxes.

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 SharedWidthGroup and/or ShredHeightGroup property.

<sharedSize:SharedSizeControl SharedHeightGroup="HeightGroup1" SharedWidthGroup="WidthGroup1">
   <Button Content="Shares width and hight"/>
<sharedSize:SharedSizeControl SharedWidthGroup="WidthGroup1">
   <Button Content="Shares only width"/>
<sharedSize:SharedSizeControl SharedHeightGroup="HeightGroup1">
   <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

<Grid sharedSize:SharedSizeControl.IsSharedSizeScope="True">

How does it work

The magic is inside the MeasureOverride method of the SharedSizeControl:

protected override Size MeasureOverride(Size constraint)
   // do normal measure
   var size = base.MeasureOverride(constraint);

   // early exit if no size is shared
   if (String.IsNullOrEmpty(SharedWidthGroup) && String.IsNullOrEmpty(SharedHeightGroup))
      return size;

   // get the scope
   var scope = GetScope();

   // now get the maximum width/height of all control contents in the same group
   if (!String.IsNullOrEmpty(SharedWidthGroup))
      size.Width = scope.GetMaxSizeValue(SharedWidthGroup);
   if (!String.IsNullOrEmpty(SharedHeightGroup))
      size.Height = scope.GetMaxSizeValue(SharedHeightGroup);

   return size;

The GetMaxSizeValue method iterates through all controls and returns the maximum width/height of the SharedSizeControl content. This maximum width/height is returned as the needed size for the SharedSizeControl.

The remaining code is mainly for managing the shared size scopes and groups.


2012/12/26 - Initial release.


This article, along with any associated source code and files, is licensed under The MIT License


About the Author

Reinhard Ostermeier
Software Developer (Senior) remes GmbH
Germany Germany
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 28 Dec 2012
Article Copyright 2012 by Reinhard Ostermeier
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid