question

IcySnex-5188 avatar image
1 Vote"
IcySnex-5188 asked IcySnex-5188 commented

How to correctly implement VirtualizingWrapPanel in WPF?

I'm kinda new to WPF and I am having a few issues with the performance of my application (this is my program with a regular wrappanel: https://youtu.be/v5D2diycLnM). The solution should be a VirtualizingWrapPanel. I made some research and there are not many tutorials or documentations that explain how to use it correctly. I downloaded an example project and built a DLL (https://github.com/sbaeumlisberger/VirtualizingWrapPanel). I then referenced this in my program and tried this code:

 <vwp:VirtualizingItemsControl VirtualizingPanel.CacheLengthUnit="Item" VirtualizingPanel.ScrollUnit="Pixel" VirtualizingPanel.VirtualizationMode="Recycling">
     <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
             <vwp:VirtualizingWrapPanel Orientation="Vertical" SpacingMode="None" StretchItems="False"/>
         </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
                
     <local:my_custom_control/>
     <local:my_custom_control/>
     <local:my_custom_control/>
     <local:my_custom_control/>
     <local:my_custom_control/>
     <local:my_custom_control/>
     ...
    
 </vwp:VirtualizingItemsControl>

However, this code does not work and has exactly the same performance as a normal wrap panel. Does anyone know what the problem is? Im sorry if this sounds stupid or something like this, im kinda new to this stuff.

windows-wpf
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Didn't try ItemsControl with WrapPanel. With VirtualizingStackPanel, I'd set CanContentScroll=true.

0 Votes 0 ·

1 Answer

DaisyTian-1203 avatar image
1 Vote"
DaisyTian-1203 answered IcySnex-5188 commented

The VirtualizingWrapPanel supports horizontal and vertical orientation, caching, container recycling and grouping `[Derive from VirtualizingWrapPanel`] , so I made a sample of grouping the Buttons in VirtualizingItemsControl as below:
XAML code:

     <vwp:VirtualizingItemsControl Name="vic" 
                                   VirtualizingPanel.CacheLengthUnit="Item" 
                                   VirtualizingPanel.ScrollUnit="Pixel" 
                                   VirtualizingPanel.VirtualizationMode="Recycling"
                                   VirtualizingPanel.IsVirtualizingWhenGrouping="True"
                                   >
         <ItemsControl.ItemsPanel>
             <ItemsPanelTemplate>
                 <vwp:VirtualizingWrapPanel Orientation="Vertical" SpacingMode="None" StretchItems="False" />
             </ItemsPanelTemplate>
         </ItemsControl.ItemsPanel>
            
         <ItemsControl.GroupStyle>
             <GroupStyle HidesIfEmpty="True">
                 <GroupStyle.HeaderTemplate>
                     <DataTemplate>
                         <WrapPanel>
                             <TextBlock HorizontalAlignment="Left" 
                                    FontWeight="Bold" 
                                    FontSize="14"
                                    Text="Width:" />
                             <TextBlock HorizontalAlignment="Left" 
                                    FontWeight="Bold" 
                                    FontSize="14"
                                    Text="{Binding Name}" />
                         </WrapPanel>
                     </DataTemplate>
                 </GroupStyle.HeaderTemplate>
                 <GroupStyle.Panel>
                     <ItemsPanelTemplate>
                         <VirtualizingStackPanel  Orientation="Vertical" />
                     </ItemsPanelTemplate>
                 </GroupStyle.Panel>
             </GroupStyle>
         </ItemsControl.GroupStyle>
     </vwp:VirtualizingItemsControl>

C# code:

 public MainWindow()
         {
             InitializeComponent();
             List<Button> buttons = new List<Button>();
    
             for(int i=1;i<100;i++)
             {
                 Button button = new Button();
                 if(i<50)
                 {
                     button = new Button() { Content = "Button" + i.ToString(), Width = 90, Height = 40 };
                 }else
                 {
                     button = new Button() { Content = "Button" + i.ToString(), Width = 120, Height = 40 };
                 }
                 buttons.Add(button);
             }
    
             vic.ItemsSource = buttons;
             ICollectionView cv = CollectionViewSource.GetDefaultView(vic.ItemsSource);
             cv.GroupDescriptions.Add(new PropertyGroupDescription("Width"));
         }

The result picture is:
99268-3.png

Did my answer give you any help? If it didn't, please let me know and give me more details.


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



3.png (27.1 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

This worked great! Thank you.

0 Votes 0 ·