Question

I need to create a custom control containing a combobox whose popup will have the Name propeprty of the bound objects aligned to the left, and the CreatedDate property of the bound objects aligned to the right in each pop up item. Also the Name and the CreatedDate must not overlap. The Name of the object is of variable length

I tried solving this problem using a DataTemplate in the Combobox.ItemTemplate, inside the data template I have a grid with two columns aligned appropriately. The Grid’s horizontal alignment is set to Stretch but for some reason the Grid doesn’t fill out the available space in the popup. Does anyone know how to get around this and why it happens? I am using WPF 3.5.

<UserControl.Resources>
    <CollectionViewSource x:Key="cvsProcessingSessionList" Source="{Binding ProcessingSessionList, ElementName=View}"/>
    <Style TargetType="{x:Type ComboBox}"
           BasedOn="{StaticResource {x:Static res:ObjectResources.LEComboBoxStyle}}">
        <Setter Property="Margin" Value="5,3"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center"/>            
    </Style>
</UserControl.Resources>

<GroupBox x:Name="grbProcessingSession">
    <GroupBox.Header>
        <Bold>Processing Session:</Bold>
    </GroupBox.Header>
    <GroupBox.Content>
        <ComboBox 
                  x:Name="ccbProcessingSessionName"
                  ItemsSource="{Binding Source={StaticResource cvsProcessingSessionList}}" 
                  Loaded="OnLoaded" TextSearch.TextPath="Name"
                  IsEditable="True" MaxDropDownHeight="500" >
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Pink" HorizontalAlignment="Stretch" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0" TextAlignment="Left" HorizontalAlignment="Left" 
                                   Margin="0,0,5,0" Text="{Binding Name}"/>
                        <TextBlock  Grid.Column="1" TextAlignment="Right" HorizontalAlignment="Right" 
                                    Text="{Binding CreatedDate, StringFormat=dd/MM/yyyy}"/>
                    </Grid>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </GroupBox.Content>
</GroupBox>

Answer 1

Just add this binding to your grid in yiour DataTemplate …

    Width="{Binding ActualWidth,
                    RelativeSource={RelativeSource FindAncestor,
                            AncestorType={x:Type ComboBoxItem}},
                    Mode=OneTime}"

Also for better effect, apply the background color to the ComboBoxItem and not to the grid…

 <ComboBox.ItemContainerStyle>
      <Style TargetType="{x:Type ComboBoxItem}">
           <Setter Property="Background" Value="Pink"/>
      </Style>
 </ComboBox.ItemContainerStyle>