asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

How to use content scrolling with a UniformGrid?

26 Feb 2021, 21:31

I have a UniformGrid with a set number of columns. On screen, two rows at max can show. When the grid becomes three rows, I want to content scroll one row at a time.

What it looks like before the third row: https://i.imgur.com/Z8uDeET.png
What it looks like with the third row: https://i.imgur.com/4aY3x8o.png

Instead of shrinking the height of the elements, it should keep the same height and allow you to scroll down a row. Is this possible?
<ItemsControl>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid
                                HorizontalAlignment="Left"
                                Columns="6" 
                                ScrollViewer.CanContentScroll="True" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.Template>
                        <ControlTemplate TargetType="ItemsControl">
                            <ScrollViewer
                                CanContentScroll="True"
                                HorizontalScrollBarVisibility="Disabled"
                                VerticalScrollBarVisibility="Visible">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </ControlTemplate>
                    </ItemsControl.Template>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                           ...
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: How to use content scrolling with a UniformGrid?

01 Mar 2021, 11:38

UniformGrid layout just divides the available space by the number of columns and rows (calculated as numChildren / columns if none specied). If you don't specify a height, it will just take the minimum height requested by the children.

What is happening is that initially you have room in the scrollviewer for two rows of, let's say, 100px each, so UniformGrid assigns that space for each row. Then you add a new row that needs more space than the scroll viewport, so UniformGrid just asks its children what is the minimum height they require, and they say 80px each for example, so UniformGrid is reporting it needs 240px for the 3 rows to the scroll viewer.

If you need a fixed height for the rows you should set that size in the children, is that something you can do?
 
asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

Re: How to use content scrolling with a UniformGrid?

01 Mar 2021, 15:27

I did have them at an explicit height before, but this only allowed pixel scrolling; it did not allow content scrolling. Would it be possible to do content scrolling, so a row for each scroll, using this method?
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: How to use content scrolling with a UniformGrid?

01 Mar 2021, 19:10

Content scrolling (IScrollInfo interface) is only implemented by StackPanel (and VirtualizingStackPanel), so when using a UniformGrid as items panel the ScrollViewer delegates scrolling to the ScrollContentPresenter found in its template. And a ScrollContentPresenter always does pixel scrolling.

Maybe you can hook to mouse wheel event in the ScrollViewer and do the scrolling in the amounts required by each row.

If you are going to use this in more places you might want to implement the panel yourself with support for content scrolling.
 
asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

Re: How to use content scrolling with a UniformGrid?

01 Mar 2021, 22:10

Ah, I see. Thanks for the info, I'll figure out something then!

Who is online

Users browsing this forum: Semrush [Bot] and 83 guests