ComboBoxItem to full width of ComboBox, when using SelectedIndex, or navigating keyboard?

Question

Following XAML causes the "My stuff" being centered of ComboBox until I open the ComboBox, when it correctly stretches itself.

    <ComboBox Height="30" Width="300" HorizontalContentAlignment="Stretch" SelectedIndex="0">
        <ComboBoxItem HorizontalContentAlignment="Stretch">
            <Border Background="Red">
                <TextBlock>My stuff...</TextBlock>
            </Border>
        </ComboBoxItem>
    </ComboBox>

The question is, is it possible to get the ComboBoxItem being stretched even when it's selected using SelectedIndex? Same bug, or feature, happens if SelectedIndex is untouched (-1) and one selects the item using keyboard.

Workaround is probably to open the ComboBox programmatically in the beginning of app, which is rather ugly.

score 8 · Accepted Answer · edited Dec 15 '17 at 16:02

8

You just need to set the width of your border to the dynamic width of your outercontrol:

E.g.

Width="{Binding ElementName=combox1, Path=ActualWidth}">

Try this:

<ComboBox x:Name="combox1" Height="30" Width="300" HorizontalContentAlignment="Stretch" 
    SelectedIndex="0">
    <ComboBoxItem HorizontalContentAlignment="Stretch">
        <Border Background="Red" Width="{Binding ElementName=combox1, Path=ActualWidth}">
            <TextBlock>My stuff...</TextBlock>
        </Border>
    </ComboBoxItem>
</ComboBox>

edited Dec 15 '17 at 16:02

Sheridan

68,826
24
143
183

answered Oct 21 '09 at 15:19

codeB10

116
2

it's also too wide if the actualwidth is applied to ComboBoxItem (but only few pixels) using Chrome theme of Windows. – Ciantic Oct 21 '09 at 17:31
Couldn't find a more precise solution, choosing this. – Ciantic Oct 29 '09 at 17:54
I don't think you need to set the HorizontalContentAlignment on the ComboBoxItem – Hamish Sep 26 '19 at 06:41

score 2 · Answer 2 · edited Nov 16 '21 at 11:39

I see yes - i'm sure there is a way round this. It really depends what the end result is that you want. Do each of your data items have a difference background colour to identify them or is it simply a background colour to your whole combobox which you are trying to achieve.

If it is the latter, try this - and perhaps also remove the highlighted selection colour too, else perhaps the code behind route is correct, in terms of preselecting your first item, as that may be an option.

Example of All over Background colour:

    <ComboBox Background="Red" x:Name="combox2" Height="30" HorizontalContentAlignment="Stretch" SelectedIndex="0">
        <ComboBoxItem Background="Red" HorizontalContentAlignment="Stretch">
            <TextBlock Background="Red">My stuff...</TextBlock>
        </ComboBoxItem>
    </ComboBox>

Hope this helps! :)

ComboBoxItem to full width of ComboBox, when using SelectedIndex, or navigating keyboard?

2 Answers2