Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating a Horizontally Scrolling List in WP7

DZone's Guide to

Creating a Horizontally Scrolling List in WP7

· Mobile Zone ·
Free Resource
I recently needed to show someone how to make a ListBox scroll horizontally rather than vertically. Here's what I did:
<listbox itemssource="{Binding MyList}" scrollviewer.horizontalscrollbarvisibility="Auto" scrollviewer.verticalscrollbarvisibility="Disabled">
    <listbox.itemspanel>
        <itemspaneltemplate>
            <!-- Could be a VirtualizingStackPanel if you wish -->
            <stackpanel orientation="Horizontal">
        </stackpanel></itemspaneltemplate>
    </listbox.itemspanel>
    <listbox.itemtemplate>
        <datatemplate>
            <!-- Style set to enhance need for scrolling -->
            <textblock style="{StaticResource PhoneTextExtraLargeStyle}" text="{Binding}">
        </textblock></datatemplate>
    </listbox.itemtemplate>
</listbox>
The key part is: '<StackPanel Orientation="Horizontal" />'
It's this that controls the direction. of item display.

The next two parts give us the correct scrolling behaviour that we want.
Setting 'ScrollViewer.HorizontalScrollBarVisibility="Auto"' enables horizontal scrolling.
Setting 'ScrollViewer.VerticalScrollBarVisibility="Disabled"' prevents vertical scrolling.

The thing to note is that setting XxxxScrollBarVisibility doesn't just control the visibility if the scrollbar it also controls whether scrolling in that direction is possible.


Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}