ScrollTo end Observables

General
1

Hey guys!

I want my ScrollView scroll to the end horizontally when new items are added to an observable list. Here’s what I did so far:

<Panel Height="50" Color="#f00" Dock="Top">
    <object ux:Property="Items" />

    <ScrollView ux:Name="scrollView" Height="50" Background="#cde" AllowedScrollDirections="Horizontal">
        <StackPanel Orientation="Horizontal">
            <Each Items="{Property this.Items}">
                <Circle ux:Name="circle" Width="40" Height="40" Color="#fff" Margin="10,0,0,0" Opacity="1">
                    <AddingAnimation>
                        <Change circle.Opacity="0" Duration="0.5" />
                    </AddingAnimation>
                </Circle>
            </Each>
        </StackPanel>
    </ScrollView>
</Panel>

I know I need to use ScrollTo to focus to the end of the ScrollView but I don’t know where to add the directive. Anyone willing to help?

2

Hi!

You can use the gotoRelative(x, y) function on the ScrollView to make it scroll to the wanted position when an item is added.

The values you pass to gotoRelative are relative to the size of the ScrollView’s content, meaning that when you call gotoRelative(0, 0.5), this will make the ScrollView scroll halfway down.

Here is a quick example:

<JavaScript>
    var Observable = require("FuseJS/Observable");
var items = Observable();
function addNewItem() {
    items.add(&quot;Hello world!&quot;);
// setTimeout is used here since we have to wait for the UI to update before we can scroll to the bottom.
setTimeout(function() {
    myScrollView.gotoRelative(0, 1);
}, 100);

}
module.exports = {
    items: items,
    addNewItem: addNewItem
};

</JavaScript>
<DockPanel>
    <Button Dock="Top" Alignment="HorizontalCenter" Margin="5" Text="Add item" Clicked="{addNewItem}" />
&lt;ScrollView ux:Name=&quot;myScrollView&quot;&gt;
    &lt;StackPanel ItemSpacing=&quot;10&quot; Margin=&quot;10&quot;&gt;
        &lt;Each Items=&quot;{items}&quot;&gt;
            &lt;Text Value=&quot;{}&quot; /&gt;
        &lt;/Each&gt;
    &lt;/StackPanel&gt;
&lt;/ScrollView&gt;

Edit: Didn’t notice you wanted to scroll horizontally until now. In that case, call it like this instead: gotoRelative(1, 0);.