How to show a large grid of buttons in a panorama item over 3 screens?

Question

i made a very wide grid with multiple rows and columns, and i filled the grid with buttons (there is no vertical scrolling). All that is contained in one panorama item. Approx. 3 screen widths are needed to cover the whole grid in horizontal scrolling (about 1500 px wide).

So the problem is when the user flicks the screen in panorama - it jumps from the beginning of the panorama item all the way to the end of it. So effectively only the far left and far right side of the grid is available to the user (only if he scrolls really slowly, he can get to the rest of the content in the middle).

Ideally, i would have three panorama items, with the content overlapping over all of them - so the content can be viewed with two flicks - but i can't achieve that. Is it possible to overlap the grid over 3 panorama items? Or maybe, is it possible to somehow add some kind of stops in the middle or divide that one panorama item that i currently have so that the screen stops somewhere in the middle?

I can't find any examples for more than 2 screens, and wrapping doesn't work for me - i want a fixed height and i can't make buttons any smaller in width. Anyway, i even don't know is it possible to achieve all this? Maybe i'm overstreching the panorama capabilities...

Thank you

Edit:

This would be an example of my problem (i have over 100 buttons so the xaml code is very large but this is the same basic problem i am trying to solve):

<controls:PanoramaItem Header="first item" Orientation="Horizontal">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />
                    <ColumnDefinition Width="500" />
                </Grid.ColumnDefinitions>
                <Button Grid.Row="0"
                        Grid.Column="0"
                        Width="250"
                        Height="250"
                        Content="Button1" />
                <Button Grid.Row="0"
                        Grid.Column="1"
                        Width="250"
                        Height="250"
                        Content="Button2" />
                <Button Grid.Row="0"
                        Grid.Column="2"
                        Width="250"
                        Height="250"
                        Content="Button3" />
            </Grid>             
        </controls:PanoramaItem>

So if you put this into your panorama control - you get a very wide panorama item - and if you flick it from Button1 it jumps all the way to the far right on the Button3 - so it scrolls you past the Button2... I want it to stop scrolling on the Button2.

Answer 1

OK, i did research on this problem, and the answer is that i was really overstreching panorama item capabilities.

So, if one would want to achieve that what i was trying to achieve - that is to get one panorama item to stretch over 3 screen widths - the best way to go is to make 3 separate panorama items and try to set the margins of each one manually so the user feels like he's browsing the one and the same panorama item (seamlessly switching from one to another).

In other words, one panorama item is optimized for max 2 screen widths, and that would be my answer. Anything over 2 screens and you loose the flick gesture behaviour, so you lose that content in the middle.