How can we improve the Windows dev platform?

Some children are not shown in stack panel

Here's a minimal Github Repo I created to reproduce the problem.

*******

I have a listview whose items panel is set to StackPanel since I need to set the group style panel to a staggered panel which doesn't work well with item stack panel.

The problem now is, out of 27 groups, only 16 groups are shown. I tested it on another list view and I confirmed that the problem is that the stack panel only displays a limited number of children (the strange thing is it's not 16 on my test but 22).

I tried VirtualizingStackPanel but unlike StackPanel, I can't seem to center it inside the list view upon setting its MaxWidth though it displays all its children.

Here's my XAML:

<ListView ItemsSource="{Binding Source={StaticResource NoteViewSource}}"
Padding="0 0"
ItemTemplate="{StaticResource NormalNoteTemplate}"
x:Name="ListView"
IsItemClickEnabled="True"
ItemClick="ListView_OnItemClick"
SelectionChanged="ListView_OnSelectionChanged"
SelectionMode="Extended">
<ListView.Footer>
<Border Height="80" />
</ListView.Footer>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="False">
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="viewModels:NoteList">
<TextBlock Text="{x:Bind Header, Mode=OneWay}"
FontSize="18"
Margin="0,16,0,8"
FontWeight="Bold" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<uwp:SGStaggeredPanel DesiredColumnWidth="220"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<!-- custom group panel won't work if this is item panel-->
<StackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>Edit:

I inspected it further and it seems that the StackPanel is not the problem since its Children count is 22. This means it has the wrong count of children which means the problem is in the CollectionViewSource or the ListView passing only 22 items in the StackPanel rather than the full count.

But what I can't understand is why does the VirtualizingStackPanel work??

2 votes
Sign in
(thinking…)
Password icon
Signed in as (Sign out)

We’ll send you updates on this idea

Anonymous shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

3 comments

Sign in
(thinking…)
Password icon
Signed in as (Sign out)
Submitting...
  • Micah commented  ·   ·  Flag as inappropriate

    Thanks for the feedback! What's the layout and UX you're trying to enable in your app? Will you need virtualization? The current ListView is fairly restrictive on the types of virtualizing layouts it provides. Depending on what you're targeting I might recommend exploring a different approach altogether.

    Re: centering the list view items
    You'd need to adjust the alignment of the container element (i.e. the thing that provides the "chrome" such as the default hover/selection state) that wraps each generated item with a style. By default the ListView styles the items to stretch the full width given to the panel.

    Try including the below in your markup.
    ...
    <ListView.ItemContainerStyle> <!-- center align the content of each container. set HorizontalAlignment if you want the container centered instead -->
    <Style TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    </Style>
    </ListView.ItemContainerStyle>
    ...
    <GroupStyle.ContainerStyle> <!-- if you also want to center the header items and you're not using the default ItemsStackPanel -->
    <Style TargetType="GroupItem">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    </Style>
    </GroupStyle.ContainerStyle>

Feedback and Knowledge Base