CODEWITHSUNDEEP
wpfxamlc#-4.0wrappanel
Mickael V.
Mickael V.

Reputation: 1222

ListViewItem in WrapPanel occupying space when collapsed

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 : All items are visible

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 : First item is not visible but uses space

What I would expect would be the following : Expected result of collapsing

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.

Upvotes: 3

Views: 1597

Answers (3)

Mauro Sampietro
Mauro Sampietro

Reputation: 2814

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>

Upvotes: 4

Mickael V.
Mickael V.

Reputation: 1222

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

Upvotes: 0

Lupu Silviu
Lupu Silviu

Reputation: 1165

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.

Upvotes: 0

Related Questions