Snapping ScrollViewer in Windows 8 Metro in Wide screens not snapping to the last item

Question

I have enabled snapping points in my app inside a ScrollViewer, as described in this question: Enabling ScrollViewer HorizontalSnapPoints with bindable collection

The problem that I am having is that as I am trying my app in a full HD monitor (1920x1080) and each item is 1400 px width. By the time that I have the scroll snapped in the item #n-1 I can't scroll to the last one, because it doesn't snap...

The hack I had to do was to add a "fake" item, transparent at the end, so I can scroll to the last item of my collection:

<Page.Resources>
    <Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}" HorizontalSnapPointsType="Mandatory" HorizontalSnapPointsAlignment="Near">
                    <ItemsPresenter />
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>
</Page.Resources>

<ItemsControl Style="{StaticResource ItemsControlStyle}">
    <Border Background="Red" Height="1000" Width="1400"/>
    <Border Background="Blue" Height="1000" Width="1400"/>
    <Border Background="Green" Height="1000" Width="1400"/>
    <Border Background="Yellow" Height="1000" Width="1400"/>
    <Border Background="Magenta" Height="1000" Width="1400"/>
    <Border Background="Transparent" Height="1000" Width="1000" />
</ItemsControl>

The second problem that I'd have even using this hack, is that from a Metro App I don't have access to the screen size, so I couldn't even add a last item with variable width depending on the screen to fix this problem. Any Suggestions?

Thanks!

Tyrosine

Answer 1

It seems that changing programmatically the width of the last item is the best solution, using Window.Current.Bounds.Width;

Tyrosine

How you found a better solution for this? When you mean changing the width, does that actually make the last item appear smaller than the rest of them? – Falito

Answer 2

I found you can access the current screen size from within LayoutAwarePage.cs using the WindowSizeChanged event (e.Size)

That said, I'm sure there is probably a better way of accessing this event.

Adamite

Answer 3

Solution provided before was correct just for small amount of cases (items with fixed sizes) and has issues with visual view.

UPDATE: See example here Enabling ScrollViewer HorizontalSnapPoints with bindable collection

No "fake" items needed, as for the second: you do not need screen size just ItemsPresenter.Parent.ActualHeight(or Width, depending on used orientation of list) and items container width - see example.

Haemagglutinate

Answer 4

chuanged HorizontalSnapPointsAlignment when ViewChanging , like this :

private void sv_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e)
    {
        if (e.NextView.HorizontalOffset <e.FinalView.HorizontalOffset)
        {
            sv.HorizontalSnapPointsAlignment = SnapPointsAlignment.Far;
        }
        else if (e.NextView.HorizontalOffset > e.FinalView.HorizontalOffset)
        {
            sv.HorizontalSnapPointsAlignment = SnapPointsAlignment.Near;
        }
    }

Sybil