通过单击按钮折叠列表框中的详细信息

Question

I'm trying do make something like this: when you click the button , the listboxitem collapses and shows some additional information:

I have already made something similar: details are showed when the whole item item is clicked. Any ideas how to modify this style so collapsing will take place only if the button (or near it) is clicked?

Code :

<Style x:Key="collapsingGridStyle" TargetType="{x:Type Grid}">
            <Style.Triggers>
                <DataTrigger
                   Binding="{Binding
                                Path=IsSelected,
                                RelativeSource=
                                {
                                    RelativeSource
                                    Mode=FindAncestor,
                                    AncestorType={x:Type ListBoxItem}
                                }
                        }"
                    Value="False">
                    <Setter Property="Grid.Visibility"
                    Value="Collapsed"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

Answer 1

There are many ways how can you achieve this behavior. For example, you can use expander in listboxitem template.