Question

I used a Style setter to stretch out my ComboBoxItem (and button) so that it spans the entire length of the ComboBox like so:

    <ComboBox >
        <ComboBox.Resources>
            <Style TargetType="ComboBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ComboBox.Resources>
        <ComboBoxItem >
            <DockPanel >
                <Button Content="My Button" />
            </DockPanel>
        </ComboBoxItem>
    </ComboBox>

This works fine. Now, I add an additional button within the same ComboBoxItem, but have it set to Visibility Collapsed.

    <ComboBox >
        <ComboBox.Resources>
            <Style TargetType="ComboBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ComboBox.Resources>
        <ComboBoxItem >
            <DockPanel >
                <Button Content="My Button" />
                <Button Content="My Collapsed Button" Visibility="Collapsed" />
            </DockPanel>
        </ComboBoxItem>
    </ComboBox>

Now, the new button is invisible, but I expected my original button to still stretch the entire ComboBox, like it does with the above code. However, it does not. Why is this so? Is there a solution for this? I am using DataTriggers to edit the Visibility property.

NOTE: I also get the same thing if I just set HorizontalContentAlignment=”Stretch” in the ComboBox.

UPDATE: Ok, this actually has something to do with the DockPanel. I changed it to a StackPanel, and it works as desired. However, I suppose I’m still curious as to why my first button would not stretch the entire DockPanel if the second button is collapsed?

Answer 1

Just set the DockPanel.Dock property to Top

  <ComboBox Margin="0,0,0,129">
      <ComboBox.Resources>
          <Style TargetType="ComboBoxItem">
              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
          </Style>
      </ComboBox.Resources>
      <ComboBoxItem >
          <DockPanel >
              <Button Content="My Button" DockPanel.Dock="Top" />
              <Button Content="My Collapsed Button" Visibility="Collapsed" />
          </DockPanel>
      </ComboBoxItem>
   </ComboBox>