Synchronizing WPF control widths in a WrapPanel

Question

I have this case

<WrapPanel>
    <CheckBox>Really long name</CheckBox>
    <CheckBox>Short</CheckBox>
    <CheckBox>Longer again</CheckBox>
    <CheckBox>Foo</CheckBox>
    <Slider MinWidth="200" />
</WrapPanel>

I want all the CheckBoxes inside the WrapPanel to be the same width.

Adding the following almost accomplishes the desired effect

<WrapPanel.Resources>
    <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
        <Setter Property="MinWidth" Value="75" />
    </Style>
</WrapPanel.Resources>

However, I do not want to hardcode a specific width, rather let the largest CheckBox set the width (the above also fails if any width > 75).

The Slider is independent and should be allowed to be larger than the CheckBoxes.

I do not want to use a Grid (with IsSharedSizeScope) since I do not want a hardcoded number of columns.

This article presents an interesting solution, but it would be nice to solve the problem without creating a custom control or using C# code.

What is the best way to do this, preferrably in XAML only?

Answer 1

I originally looked at this using IsSharedSizeGroup but hit a roadblock with making it dynamically apply to things instead of explicitly wrapping items. In this case, creating an AttachedProperty in code or another code based solution may in the long run be better then a XAML only approach. However, to create a purely XAML solution we can make use of the SharedSizeGroup property on a ColumnDefinition to share the sizes of each element and then use set the IsSharedSizeScope property on the WrapPanel. Doing so will make all of the contents in the WrapPanel with the same SharedSizeGroup share their width for columns and height for rows. To wrap the ComboBoxes and possibly ComboBoxes that are not currently in the XAML but will be added to the WrapPanel, we can create a Style and re-template the ComboBox to bassicly wrap it with a Grid.

<WrapPanel Grid.IsSharedSizeScope="True">
 <WrapPanel.Resources> 
  <Style TargetType="{x:Type CheckBox}">
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type CheckBox}">
      <Grid Background="LightBlue">
       <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="WrapPannelGroup" />
       </Grid.ColumnDefinitions>
       <CheckBox Style="{x:Null}"
           IsChecked="{TemplateBinding IsChecked}">
                                      <!--Other TemplateBindings-->
        <CheckBox.Content>
         <ContentPresenter />
        </CheckBox.Content>
       </CheckBox>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>

 </WrapPanel.Resources>
 <CheckBox>Really long name</CheckBox>
 <CheckBox>Short</CheckBox>
 <CheckBox IsChecked="True">Longer again</CheckBox>
 <CheckBox>Foo</CheckBox>
 <Slider MinWidth="200" />
</WrapPanel>

Here we are re-templating all CheckBoxes without a style inside the WrapPannel to instead be CheckBoxes surrounded by a Grid. However, because of this we need to re-bind all of the CheckBoxes properties that we want to maintain. While that could become burdensome, it also allows for a pure XAML approach.

Answer 2

You can add a property or a converter that does the needed work, then bind each column's width to it. The property or converter can access the entire list of items, finding the widest one, and returning the desired width for all elements.

Answer 3

The best way to do this is to use a CustomControl like the article you posted.

Any solution you come across is going to have to iterate through the list of items and find the maximum width during the measure phase.

Any sort of XAML-only answer would have to be provided OOTB (e.g. IsSharedSizeScope), or would leverage some sort of multi-binding to link the items together. Thus any sort of XAML answer would be full of markup which makes it more verbose (and less elegant).

The only modification that I see to the CodeProject article you posted is adding the ability to "turn-off" consideration of certain elements (like your slider). This could be done as an additional attached property.