Expander in ListBox does not decrease size of list box

[Philip]

Hallo,



I'm using the Expander in a ListBox ItemTemplate like this:



            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <telerik:RadExpander Grid.Column="0" x:Name="radExpander" VerticalAlignment="Top"

                              ExpandDirection="Down"

                              telerik:AnimationManager.IsAnimationEnabled="True"

                                             FlowDirection="RightToLeft" >

                            <telerik:RadExpander.Header>

       [...]

                            </telerik:RadExpander.Header>

                            <telerik:RadExpander.Content>

       [...]

                            </telerik:RadExpander.Content>

                        </telerik:RadExpander>

                        <telerik:RadToggleButton [...]/>

                    </Grid>

                </DataTemplate>

            </ListBox.ItemTemplate>



When I expand the Expander, the size of the list box is increased, but on collapsing the Expander the size of the list box stays remains unchanged. It is only adjusted correctly when the list changes by adding or deleting an item. Is there a way to trigger the correct resizing on collapsing the Expander?



Thanks for your help,

Philip Thomé

[Pavel R. Pavlov]

Hi Philip,

This issue is caused by the VirtualizingStackPanel which:

• is native .NET Framework class
• is used by our RadListBox control as the default ItemsPanel
• does not recalculate it`s size when shrinking the height of the elements inside it, in your case when collapsing the RadExpander control

In case you use a data binding approach, the best way to solve the issue is by using a StackPanel as an ItemsPanel. This can be done by using this code in your RadListBox:

<telerik:RadListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel/>
    </ItemsPanelTemplate>
</telerik:RadListBox.ItemsPanel>

Please keep in mind that with this approach the virtualization of your containers is lost.(you can read more about the VirtualizingStackPanel here).

Other way to solve the issue is to use the RadTreeView control because it has it`s own ItemsPanel which virtualizes the containers and resizes accordingly to the size of its elements.

Kind regards,
TeamX2_Pavel
the Telerik team