WPF Listbox selected item brings up another sub listbox items

Question

I have a unique request and I am very new to WPF. I have a list of Items. When I select an Item, it should show the child items.
There are many ways to do this:
1. You have the sub listbox items slide down moving the parent listbox items down. There will be lot of bouncing around
2. To avoid the height change, I am thinking that the sub listbox items can popup and I select the child items. If not, then I click away and get back to my parent listbox items.

I have no idea where to begin adding a sub listbox items underneath it's parent listbox item. I have two listbox in my xaml

<Window x:Class="MakeModel.MakeModelYear"
    Icon="cc_64x64_blue_02.ico"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MakeModel" 
    Title="Car Make and Model" Height="740.667" Width="426" Opacity="0.9" 
    WindowStartupLocation="CenterScreen" ResizeMode="CanResize" Background="White">
<Window.Resources>
</Window.Resources>
<Grid>
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFE" Offset="0"/>
            <GradientStop Color="#FF6699CC" Offset="1.2"/>
        </LinearGradientBrush>
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="156*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0*"/>
        <ColumnDefinition Width="53*"/>
        <ColumnDefinition Width="198*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Margin="0,31,0,29" Grid.ColumnSpan="3">
        <GroupBox Header="Make / Model" BorderBrush="WhiteSmoke" BorderThickness="0" Margin="5,0" Foreground="#FF0B6C78" FontSize="18" FontFamily="Microsoft Sans Serif">
            <!--Task -->
            <StackPanel>
                <ListBox x:Name="cmbMake" HorizontalAlignment="Left" VerticalAlignment="Top" Width="387" Cursor="Arrow" 
                    ItemsSource="{Binding SelectedMake}" DisplayMemberPath ="Make" 
                    SelectionChanged="cmbMake_SelectionChanged" SelectionMode="Single" RenderTransformOrigin="0.494,1.409" Margin="0,3,0,0" Height="150" BorderBrush="#FF336699" FontFamily="Microsoft Sans Serif" FontSize="12" >
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Style.Resources>
                                <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
                                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                            </Style.Resources>
                            <EventSetter Event="UIElement.MouseEnter" Handler="cmbFirstDigitLineItem_MouseMove" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True" >
                                    <Setter Property="Background" Value="#FFD7E1EC" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True" >
                                    <Setter Property="FontWeight" Value="Bold" />
                                    <Setter Property="FontSize" Value="24" />
                                    <Setter Property="Foreground" Value="Black" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.Template>
                        <ControlTemplate>
                            <Border CornerRadius="5" BorderThickness="0" BorderBrush="#FF336699">
                                <ItemsPresenter/>
                            </Border>
                        </ControlTemplate>
                    </ListBox.Template>
                </ListBox>
            </StackPanel>
        </GroupBox>
    </StackPanel>
    <StackPanel Margin="0,205,0,29" Grid.ColumnSpan="3">
        <GroupBox Header="" BorderBrush="WhiteSmoke" BorderThickness="0" Margin="5,0">
            <!--Subtask -->
            <StackPanel>
                <ListBox x:Name="cmbModel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="387" Cursor="Arrow" 
                    ItemsSource="{Binding SelectedModel}" DisplayMemberPath ="Model" 
                    SelectionChanged="cmbModel_SelectionChanged" SelectionMode="Single" RenderTransformOrigin="0.494,1.409" Margin="0,3,0,0" Background="#FFE0E0E0" BorderBrush="#FF336699" FontFamily="Arial">
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Style.Resources>
                                <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
                                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                            </Style.Resources>
                            <EventSetter Event="UIElement.MouseEnter" Handler="cmbSecondDigitLineItem_MouseMove" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True" >
                                    <Setter Property="Background" Value="#FFD7E1EC" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True" >
                                    <Setter Property="FontWeight" Value="Bold" />
                                    <Setter Property="FontSize" Value="24" />
                                    <Setter Property="Background" Value="Transparent" />
                                    <Setter Property="Foreground" Value="Black" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.Template>
                        <ControlTemplate>
                            <Border CornerRadius="5" BorderThickness="0" BorderBrush="#FF336699">
                                <ItemsPresenter/>
                            </Border>
                        </ControlTemplate>
                    </ListBox.Template>
                </ListBox>
            </StackPanel>
        </GroupBox>
    </StackPanel>
</Grid>
</Window>

If I were you, I would bind your LBItems to an ObservableCollection<string>, then use OC.Add and OC.Remove to change the items. — user2509848
Welcome to SO. Don't have 100 things go on. Post just enough to present the problem. — paparazzo

sexta13 sexta13 · Accepted Answer · 2014-10-03T22:40:42

Well, let me try to explain in plain and simple English :)

First, you should have your classes something like this:

public class Foo{

public ObservableCollection<MyParentObject> ListToBind {get;set;}

.... (rest of properties)
}

public class MyParentObject{

public ObservableCollection<MyChildObject> ChildListToBind {get;set;}
.... (rest of properties)
}

Then in your XAML you can have something like this:

And then as Window or UserControl Resources you have:

<DataTemplate x:key="listItemTemplate">
<Grid>
<ListBox ItemsSource={Binding ChildListToBind}" ItemTemplate="........"/>


</Grid>
</DataTemplate>

This is not perfect code...but hope it gives you head start to what you want.

Regards,

WPF Listbox selected item brings up another sub listbox items

1 Answers