Having a Usable Combobox Inside a Listbox Item

Question

Basically I've got a prop abstract class called 'Exercise'. This has two child classes 'Cardio' and 'Strength' which have different properties. The purpose of the page I'm working on now is to allow users to set up a workout by modifying things like distance (for cardio types) and reps (for strength types.) I have only been able to achieve my goal of displaying each child class's datatemplate with Listbox (https://i.stack.imgur.com/HILWD.png). I implemented some styling code in the ListBox.Resources and the way it looks is perfect, however, I cannot click on the combobox at all. I've attached some of the code, I'm kindof a newbie so I really appreciate any help, thank you!

also: I haven't added any selection options for the combobox yet

Code:

 <ListBox x:Name="exPanels" IsHitTestVisible="False" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" BorderThickness="0" Margin="0,20,0,0"
            SelectedItem="{Binding SelectedObject}">


     <ListBox.Resources>
         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
         <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
         <DataTemplate DataType="{x:Type data:Cardio}">
             <Border Padding="10" BorderBrush="LightGray" BorderThickness="1">
                 <Grid Width="585" HorizontalAlignment="Center">
                     <Grid.RowDefinitions>
                         <RowDefinition Name="Name" Height ="auto"/>
                         <RowDefinition Name ="Type" Height ="auto"/>
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>

                     <TextBlock Text="{Binding Name}" Grid.Row="0"
             Grid.Column="0" FontSize="20"/>

                     <TextBlock Text="Distance:" Grid.Row="1"
             Grid.Column="0"/>
                     <ComboBox Grid.Row="1"
             Grid.Column="1"/>
                 </Grid>
             </Border>
         </DataTemplate>

         <DataTemplate DataType="{x:Type data:Strength}">
             <Border Padding="10" BorderBrush="LightGray" BorderThickness="1">
                 <Grid x:Name="itembox" Width="585" HorizontalAlignment="Center">

                     <Grid.RowDefinitions>
                         <RowDefinition Name="Name" Height ="auto"/>
                         <RowDefinition Name ="Type" Height ="auto"/>
                         <RowDefinition Name ="Difficulty"  Height ="auto"/>
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>


                     <TextBlock Text="{Binding Name}" Grid.Row="0"
             Grid.Column="0" FontSize="20"/>

                     <TextBlock Text="Sets:" Grid.Row="1"
             Grid.Column="0"/>
                     <ComboBox Grid.Row="1"
             Grid.Column="1"/>
                     <TextBlock Text="Reps:" Grid.Row="2"
             Grid.Column="0"/>
                     <ComboBox Grid.Row="2"
             Grid.Column="1"/>
                 </Grid>
             </Border>
         </DataTemplate>
     </ListBox.Resources>
 </ListBox>

Answer 1

As emoacht said, you cannot use IsHitTestVisible="False on the entire ListBox, the ListBox and everything in it will be irresponsive. I'm assuming you want the dropdownboxes to be clickable, but not the ListBox items themselves. Could it be an idea to use an ItemsControl instead of a ListBox? ItemsControl have no concept of selection though. If you really do need to use a ListBox, you could try to read up on how to make a ListBox not selectable, or disable selection in ListBox.

I have created a minimal example where I have simply replaced the ListBox with an ItemsControl, set IsHitTestVisible=True, and removed the SelectedItem="{Binding SelectedObject}". As you can see the Running and Pullups are no longer highlighted in blue, and the dropdown boxes are clickable.

The code

<ItemsControl x:Name="exPanels" IsHitTestVisible="True" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" BorderThickness="0" Margin="0,20,0,0">
    <ItemsControl.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        <DataTemplate DataType="{x:Type data:Cardio}">
            <Border Padding="10" BorderBrush="LightGray" BorderThickness="1">
                <Grid Width="585" HorizontalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Name="Name" Height ="auto"/>
                        <RowDefinition Name ="Type" Height ="auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="0" FontSize="20"/>
                    <TextBlock Text="Distance:" Grid.Row="1" Grid.Column="0"/>
                    <ComboBox Grid.Row="1" Grid.Column="1"/>
                </Grid>
            </Border>
        </DataTemplate>

        <DataTemplate DataType="{x:Type data:Strength}">
            <Border Padding="10" BorderBrush="LightGray" BorderThickness="1">
                <Grid x:Name="itembox" Width="585" HorizontalAlignment="Center">

                    <Grid.RowDefinitions>
                        <RowDefinition Name="Name" Height ="auto"/>
                        <RowDefinition Name ="Type" Height ="auto"/>
                        <RowDefinition Name ="Difficulty"  Height ="auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="0" FontSize="20"/>
                    <TextBlock Text="Sets:" Grid.Row="1" Grid.Column="0"/>
                    <ComboBox Grid.Row="1" Grid.Column="1"/>
                    <TextBlock Text="Reps:" Grid.Row="2" Grid.Column="0"/>
                    <ComboBox Grid.Row="2" Grid.Column="1"/>
                </Grid>
            </Border>
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>