ListViewItem in WrapPanel occupying space when collapsed

Question

I have a ListView using a WrapPanel as its ItemsPanel, and I use ListViewItem directly as content. But when one ListViewItem.Visibility is Collapsed, you can still see the space it's using.

First off, a sample XAML code similar to what I use :

<Grid>
    <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" ItemContainerStyle="{DynamicResource ContainerStyle}">
        <ListView.Resources>
            <Style TargetType="{x:Type ListViewItem}" x:Key="ContainerStyle">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel ItemHeight="200" ItemWidth="200"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListViewItem Margin="10" Visibility="Visible">
            <Border Background="Red"/>
        </ListViewItem>
        <ListViewItem Margin="10" Visibility="Visible">
            <Border Background="Blue"/>
        </ListViewItem>
        <ListViewItem Margin="10" Visibility="Visible">
            <Border Background="Green"/>
        </ListViewItem>
    </ListView>
</Grid>

For example, when all items are visible (code above) I have this :

But if I change the first item to make it collapsed as follows

<ListViewItem Margin="10" Visibility="Collapsed">
    <Border Background="Red"/>
</ListViewItem>

The result is like this :

What I would expect would be the following :

As such I don't understand why it is acting like this, the Collapsedseems to behave just like Hidden. I'm applying it directly to the item and don't see what else to do .

I've tried different solutions I found, most notably this one about binding to Visibility in the style and this one going more or less in the same direction but without success, same results.

Mauro Sampietro · Accepted Answer · 2018-11-16T08:51:41.493

The accepted answer actually does not provide a solution, which is instead delivered in its comment section.

If you set ItemWidth, WrapPanel will reserve the ItemWidth for all the items bound to itself, visible or not.

The workaround here is not to set ItemWidth on the WrapPanel but set the Width on the ItemTemplate.

<ItemsControl.ItemsPanel>
   <ItemsPanelTemplate>
       <WrapPanel />
   </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>
   <DataTemplate>
       <StackPanel MinWidth="96" />
   </DataTemaplate>
</ItemsControl.ItemTemplate>

score 0 · Answer 2 · answered Nov 04 '16 at 16:15

0

I think that the issue you see is related to the fact that even collapsed, a ListViewItem is still an Item, and the WrapPanel will detect 3 items, not 2.

answered Nov 04 '16 at 16:15

Lupu Silviu

1,145
11
23

I see what you mean, but that's the whole point, I want it to have the item but not visible at all (I'm building on top of existing software, or I would just filter the items). For example if I use a StackPanel instead of the WrapPanel, it works ; it seems really related to the way the WrapPanel works – Mickael V. Nov 04 '16 at 16:20
3

Wrappanel, allocates a set Width and Height for each Item. If you still want to use a WrapPanel, then you should set the WIdth and Height of each of the ListViewItems, instead of using `ItemHeight="200" ItemWidth="200"`. That will make it so that when you Collapse an Item, it will behave as you want. – Lupu Silviu Nov 04 '16 at 16:23
I think my answer is better for maintainability (but filtering items would be even better), but indeed it's working if you set the height and width per item, so it seems like a working solution and I'll accept this one :) – Mickael V. Nov 04 '16 at 16:45

score 0 · Answer 3 · edited May 23 '17 at 12:19

A good working solution seems to be overriding the "Arrange" methods of Panel, in a custom Panel.

I'm working on the base of this great class AlignableWrapPanel (inheriting from Panel, not WrapPanel), and I got it working by replacing this :

var child = children[i];
if (child == null) continue;

with this :

var child = children[i];
if (child == null) continue;
if (child.Visibility == Visibility.Collapsed) continue;

The methods are ArrangeOverride, ArrangeLine, and MeasureOverride. ArrangeLineis a bit different, but the line with if(child == null) continue;is pretty easy to spot ; just add the one with Collapsed after that.

That solution should work with any

ListViewItem in WrapPanel occupying space when collapsed

3 Answers3