Make thumbnail view scroll horizontally

How-to Discussions
1

I have the following code for selecting a user by clicking on there profile pictures on a horizontally scrollable view. I can’t make the view scrollable.

I copied this code form different examples. How I can make it scrollable also can i make is show only one image and the left and right images should cut form the middle, only three images should be visible at a time?

<App Background="#eeef">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var images = [
            "eWFdaPRFjwE","_FjegPI89aU","_RBcxo9AU-U","PQvRco_SnpI","6hxvm0NzYP8",
            "b-yEdfrvQ50","pHANr-CpbYM","45FJgZMXCK8","9wociMvaquU","tI_Odb7ZU6M",
            "o0RZkkL072U","N-sxA8vEGDk","324ovGl1BwM","RSOxw9X-suY","qv5yb436qRI",
            "iWFRUyqpCbQ","ZJ4yhJFIzaY","ze0tqwj86S4","gQR4STZ24kM","xMYnPo53ukE"
        ];

        var list = Observable();
        var offset = Observable(0);
        var limit = 20;

        function increaseOffset() {
            changeOffset(5);
        }

        function decreaseOffset() {
            changeOffset(-5);
        }

        function changeOffset(diff) {
            var nextOffset = offset.value + diff;
            if (nextOffset >= 0) {
                offset.value = nextOffset;
                if ((list.length - nextOffset) <= limit) {
                    loadItems().then(function() {
                        atEnd.check();
                    });
                }
            }
        }

        function loadItems() {
            var p = new Promise(function(resolve) {
                var items = images.map(function(i) {
                    return {image: "https://source.unsplash.com/" + i + "/416x208"};
                });
                list.addAll(items);
                resolve();
            });
            return p;
        }

        loadItems();

        module.exports = {
            list: list,
            offset: offset,
            limit: limit,
            increaseOffset: increaseOffset,
            decreaseOffset: decreaseOffset
        }
    </JavaScript>
    <StackPanel ux:Class="ListItem" Alignment="Center">
        <Deferred>
            <Image ux:Name="ProfileImage" Url="{image}" Width="120" Height="120"  StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
                <AddingAnimation>
                  <Change ProfileImage.Opacity="0" Delay="0.16" Duration="0.32" />
                </AddingAnimation>
                <WhileBusy>
                    <Rectangle Color="#EEE">
                      <Stroke Width="1" Color="#CCC" />
                    </Rectangle>
                </WhileBusy>
                <WhileFalse Value="{selected}">
                    <Desaturate Amount="1" />
                </WhileFalse>
            </Image>
            <Text ux:Class="TitleText" Color="#000" TextAlignment="Center" />
            <TitleText ux:Name="topText" FontSize="18" Margin="5">MICHAEL BURNS</TitleText>
            <TitleText ux:Name="bottomText" FontSize="14">Creative Director</TitleText>
        </Deferred>
    </StackPanel>
  <Fuse.iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/>
  <Panel>
    <MultiLayoutPanel ux:Name="headerPanel" HitTestMode="None" Alignment="Top" Height="260">
        <ScrollView Dock="Top" AllowedScrollDirections="Horizontal">
            <Scrolled To="Start" Within="100" Handler="{decreaseOffset}" />
            <Scrolled ux:Name="atEnd" To="End" Within="100" Handler="{increaseOffset}" />
            <StackPanel Padding="5" ItemSpacing="5" Orientation="Horizontal">
                <Each Items="{list}" Offset="{offset}" Limit="{limit}">
                    <ListItem />
                </Each>
            </StackPanel>
        </ScrollView>
    </MultiLayoutPanel>
  </Panel>
</App>

Thanks,
Unnikrishnan B.

2

It isn’t scrolling because you have HitTestMode="None" on the parent MultiLayoutPanel. Setting HitTestMode to None means that the element (and its children) do not register clicks. Remove it and it scrolls just fine.

As for the other question, you might want to use a PageControl instead, like in this example.

3

Thanks it’s working as expected.