Autosizing ComboBox dropdown to content in Silverlight.

Question

I have this ComboBox in my Silverlight UserControl:

       <ComboBox  
            AutomationProperties.AutomationId="cmbProjects" 
            Grid.Row="0" 
            Grid.Column="2" 
            ItemsSource="{Binding Projects}"
            SelectedItem="{Binding SelectedProject, Mode=TwoWay}"
            Style="{StaticResource DefaultComboBoxStyle}"                       
            >
            <ComboBox.ItemTemplate>
                <DataTemplate>                   
                    <StackPanel>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                            <TextBlock Foreground="DarkRed" AutomationProperties.AutomationId="{Binding Number}" Width="100" Margin="0" Text="{Binding Number, Converter={StaticResource StringFormatter},ConverterParameter='\{0\}'}" />
                            <TextBlock AutomationProperties.AutomationId="{Binding Description}" Text="{Binding Description, Converter={StaticResource StringFormatter},ConverterParameter='\{0\}       '}"  />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

The lenghth of most of the items populating the combobox exceeds the width of the control. When I dropdown the list, the dropdown expands, but not fully to the width of the item content, resulting in content that is clipped a horizontal scrollbar. This does not happen with exact same combobox where content is within the original width of the control.

In WPF, I could simply set the width of the item container to auto; in Silverlight this results in a catastrophic error. I can set the with to a huge number, but the scroll still appears, regardless of the width. Also, in Silverlight 2 beta 2 there was a property DropDownWidth, with one of the options being "Auto", which I don't see in RTM.

I can get around this with a bit of trickery, mainly hiding the horizontal scrollbar and appending a bunch of characters so that the dropdown fully expand to show the item content. Obviously, this hack not ideal. Did anyone experience similar problem? Is there something that I'm missing to force the combobox to expand fully without a scrollbar?

ib.

Answer 1

It appears that they fixed it in SL3.

If you want to tweak the PopUp, you can do that from within the ComboBox's Control Template. In Blend follow these steps:

1. Right Click on ComboBox
2. Select "Edit Control Parts (Template)"
3. Select "Edit a Copy"

This will copy the out of the box control style & template so that you can tweak that ScrollViewer inside the ComboBox's PopUp to your heart's content.

You may want to try the solution I describe here. It details how to ensure that the combobox pop-up's height and width are updated when items are added or removed.