WPF ComboBox Residing in a ListBox Click Event

Question

Hi All,

I have a little issue.

I have a a ListBox that is bound to a list of object. These Objects have a property that can be set. I have in the LIstBox ItemTemplate (a datatemplate) a combobox that is about to the objects property and the combobox has some hardcoded values.

My problem is that when the list box is displayed and I click ont he combo, only the ListBoxItem is selected, The click never makes it to the combobox!

just to give you an idea.

<ListBox SelectionMode="Multiple" VerticalAlignment="Center"  HorizontalAlignment="Left" Style="{StaticResource Style_ListBox}" ItemsSource="{Binding ModeSampleSets, Mode=OneWay}">
              <ListBox.ItemTemplate>

                    <DataTemplate DataType="ListBoxItem">
                        <Grid>
                            <StackPanel>

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" FontWeight="Bold" Text="{Binding Name, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>


                                    <ComboBox Focusable="False" Width="10" Height="10" Grid.Column="2" Style="{StaticResource Style_ComboBoxColorPicker}" SelectedItem="{Binding GraphColor, Mode=TwoWay}" >
                                        <ComboBoxItem IsSelected="True" Content="#e62a2c" />
                                        <ComboBoxItem Content="#ec7c28"></ComboBoxItem>
                                        <ComboBoxItem Content="#69c5d8"></ComboBoxItem>
                                        <ComboBoxItem Content="#36b34b"></ComboBoxItem>
                                        <ComboBoxItem Content="#415dae"></ComboBoxItem>
                                        <ComboBoxItem Content="#9056A3"></ComboBoxItem>
                                        <ComboBoxItem Content="#0b0b0b"></ComboBoxItem>
                                        <ComboBoxItem Content="#666666"></ComboBoxItem>
                                        <ComboBoxItem Content="#a6a6a6"></ComboBoxItem>
                                    </ComboBox>


                                </Grid>

                                <StackPanel Orientation="Horizontal">
                                    <TextBlock FontSize="8" Text="{Binding SampleAnalysisDate, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
                                    <TextBlock FontSize="14" Text="{Binding WaveLengthStart, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
                                    <TextBlock Margin="2,0,0,0" FontSize="14" Text="{x:Static UIStrings:WaveLengthScanStrings.WaveLengthScanModeView_SampleWaveLength_Seperator}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
                                    <TextBlock Margin="2,0,0,0" FontSize="14" Text="{Binding WaveLengthStop, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
                                </StackPanel>
                            </StackPanel>

                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
 </ListBox>

Styles:

<Style x:Key="Style_ComboBoxColorPickerItemContainerStyle" TargetType="ComboBoxItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border Name="ItemBorder"  Margin="2" BorderBrush="Transparent" BorderThickness="1.5" Background="Transparent">
                    <ContentPresenter Margin="2" Height="20" Width="20" ContentTemplate="{StaticResource DataTemplate_ComboBoxColorPickerItemTemplate}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="ItemBorder" Property="BorderBrush" Value="Black"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Style x:Key="Style_ComboBoxColorPicker" TargetType="ComboBox">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel MaxWidth="100"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ItemTemplate" Value="{StaticResource DataTemplate_ComboBoxColorPickerItemTemplate}"/>

    <Setter Property="ItemContainerStyle" Value="{StaticResource Style_ComboBoxColorPickerItemContainerStyle}"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">

                <Grid>

                    <ToggleButton
                                    ClickMode="Press"
                                    Name="ComboToggleButton"
                                    IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                    Focusable="False"
                                    >
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <ContentPresenter/>
                            </ControlTemplate>
                        </ToggleButton.Template>

                        <ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" ContentTemplate="{TemplateBinding ComboBox.ItemTemplate}" ContentTemplateSelector="{TemplateBinding ComboBox.ItemTemplateSelector}"/>

                    </ToggleButton>



                    <Popup                
                                    Placement="Bottom"                
                                    Name="Popup"                
                                    Focusable="False"                
                                    AllowsTransparency="True"                
                                    IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"             
                                    PopupAnimation="Fade">

                        <Grid                  
                                        MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"                  
                                        MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"                  
                                        Name="DropDown"                  
                                        SnapsToDevicePixels="True">
                            <Border                    
                                            BorderBrush="Gray"                    
                                            BorderThickness="1.5"                    
                                            Name="DropDownBorder"                    
                                            Background="White">
                                <ScrollViewer                    
                                                Margin="0"                    
                                                SnapsToDevicePixels="True">
                                    <ItemsPresenter />
                                </ScrollViewer>
                            </Border>
                        </Grid>
                    </Popup>
                </Grid>
            </ControlTemplate>

        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="Style_ListBox" TargetType="ListBox">
    <Setter Property="BorderBrush" Value="{StaticResource Brush_PanelInnerBorder}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>

    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Background="{StaticResource Brush_PanelInnerBackground}"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ItemContainerStyle">
        <Setter.Value>



            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                <Setter Property="Template">
                    <Setter.Value>


                        <ControlTemplate TargetType="{x:Type ListBoxItem}">



                            <Grid Background="{StaticResource Brush_PanelInnerBackground}" Margin="-.5">
                                <Border x:Name="BorderItem"  Margin="0" ClipToBounds="True" BorderThickness="0" Style="{StaticResource Style_PanelInnerBorder}">
                                    <Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                                </Border>
                                <ContentPresenter Name="TheContentPresenter" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                <Border Margin="0" ClipToBounds="True" Style="{StaticResource Style_PanelInnerBorder}">
                                    <Rectangle VerticalAlignment="Bottom" Width="{TemplateBinding Width}" Height="0"/>
                                </Border>
                            </Grid>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="BorderItem" Property="Background" Value="{StaticResource Brush_Highlight}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>

                    </Setter.Value>
                </Setter>
            </Style>

        </Setter.Value>
    </Setter>

</Style>

Answer 1

Make sure you don't have IsHitTestVisible="False" on the ComboBox's style. Can you please post here the styles you're using?

Answer 2

I found the problem.

My ItemContainerStyle Template had a rectangle and i guess it was implying zindex somehow. When I expclicity told it to draw the content before the border and it's rectangle, it worked. i just had to add Panel.ZIndex="1" and it worked.