Stretch ComboBox Content in Silverlight

Question

This is driving me nuts. I can't seem to get the data template within my ComboBox to stretch the width of the pulldown. What gives?

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
        <ComboBox.ItemContainerStyle>
            <Style TargetType="ComboBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ComboBox.ItemContainerStyle>
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="{Binding}" Margin="2" />
                </Border>
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <sys:String>Two</sys:String>
        <sys:String>Four</sys:String>
        <sys:String>Six</sys:String>
    </ComboBox>
</Grid>

Answer 1

I just confirmed the following works in WPF, moving the HorizontalContentAlignment up to the ComboBox:

<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <Border BorderBrush="Black" BorderThickness="1">
        <TextBlock Text="{Binding}" Margin="2" />
      </Border>
    </DataTemplate>
  </ComboBox.ItemTemplate>
  <sys:String>Two</sys:String>
  <sys:String>Four</sys:String>
  <sys:String>Six</sys:String>
</ComboBox>

Let me know if this also fixes the problem in Silverlight. The issue as I was seeing it was the items in the drop-down were correctly sized, while the content that showed in the pull-down was not stretching.

Answer 2

Ok, after about a day of fiddling with it, I have a solution. I HATE it, but it works. Basically, I reflected into the System.Windows.dll for Silverlight, and I ripped out the default template for ListBoxItem (which ComboBoxItem uses).

It turns out that in that template, there is a ContentPresenter with the HorizontalAlignment hard-coded to Left. So, I ripped off the template, and added a TemplateBinding for HorizontalAlignment, so it can use whatever the HorizontalAlignment of ComboBoxItem is.

That being said, what follows is the working code. If ANYONE has a better way to do this, please tell me. I haven't checked yet if this is fixed in 3.0. I hope it is. It should really bind all the way from ComboBox.HorizontalContentAlignment.

<UserControl.Resources>
    <Style x:Key="FixedComboBoxItem" TargetType="ComboBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="SelectionStates">
                                <vsm:VisualState x:Name="Unselected" />
                                <vsm:VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                        <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                        <ContentPresenter
                            x:Name="contentPresenter"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            Margin="{TemplateBinding Padding}"/>
                        <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ComboBox x:Name="SearchesComboBox" Width="150" ItemContainerStyle="{StaticResource FixedComboBoxItem}"  HorizontalContentAlignment="Stretch">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="1" >
                    <TextBlock Text="{Binding}" Margin="2" />
                </Border>
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <sys:String>Two</sys:String>
        <sys:String>Four</sys:String>
        <sys:String>Six</sys:String>
    </ComboBox>
</Grid>