How to position an element of scrollview in the middle of the screen

Hi,

I have an issue. I have 15 elements in a horizontal scrollview. I wanto display the 8th element in the middle of the screen when the page loads. How do I achieve it?

Hi!

The ScrollView has a property called RelativeScrollPosition (which has a range from 0 to 1 for X and Y scroll). Because of a quirk/bug, you won’t get the correct behavior if you set this on your scrollview directly, but you can use the following code as a workaround. I use a WhileTrue (which i turn on by default) to animate the value with a slight delay:

<App Theme="Basic">
    <Panel>
        <ScrollView AllowedScrollDirections="Horizontal" ux:Name="sw">
            <WhileTrue Value="true" Bypass="Never">
                <Set sw.RelativeScrollPosition="0.5,0" Delay="0.01"/>
            </WhileTrue>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" Color="#f00"/>
                <Rectangle Width="80" Color="#0f0"/>
                <Rectangle Width="80" Color="#00f"/>
                <Rectangle Width="80" Color="#f0f"/>
                <Rectangle Width="80" Color="#ff0"/>
                <Rectangle Width="80" Color="#f00"/>
                <Rectangle Width="80" Color="#0f0"/>
                <Rectangle Width="160" ux:Name="foo" Color="#00f"/>
                <Rectangle Width="80" Color="#f0f"/>
                <Rectangle Width="80" Color="#ff0"/>
                <Rectangle Width="80" Color="#f00"/>
                <Rectangle Width="80" Color="#0f0"/>
                <Rectangle Width="80" Color="#00f"/>
                <Rectangle Width="80" Color="#f0f"/>
                <Rectangle Width="80" Color="#ff0"/>
            </StackPanel>
        </ScrollView>
    </Panel>
</App>

Hi Kristian,

Thanks a lot for the reply with example.

We used the code provided and were able to make the current date centre aligned. You can see the result in the below video.

https://www.youtube.com/watch?v=Z2Ernov0Qks

But however, as per our requirement when a date is selected from the horizontal scroll view, the particular date should be centre aligned. The requirement can be found in thebelow video link.

https://www.youtube.com/watch?v=IUsd3Yavpzk

We could not acheive the above requirement. We have tried to achieve the above by changing the value betweem 0 to 1 (other than 0.5) but failed as the value is different for different screen sizes. Please advise how can we achieve he above requirement irrespective of the device screen size.

Also please let us know if there any way to retrieve the screen size of the device as soon as the application is loaded.

Regards, Jithesh

Hi!

In order to center the element in a ScrollView you can use the BringIntoView action. It is documented here: https://www.fusetools.com/learn/fuse#bringintoview

Let me know if that does the job or not

Hi Kristian,

Thanks a lot for the reply. Will try and let you know if it works.

Thanks and regards, Jithesh