In the below example we take the co-ordinates of the mouse and use that data to control the position of another item. This can be used for sliders, menus, carousels etc;

I have written the code to adapt to the size of the scrollable area, you can see this by clicking on the ‘+’ and ‘-’ buttons. These will add / remove the items inside the scrollable area. If you remove enough items so that the area taken up is less than that of the screen, the items are positioned in the middle.

To carry out this effect I need to keep track of the mouse position, the width of the screen and the width of the Stack panel containing the items. Each of these values need to be updated when ever they are changed.

I then position the movable area based on the following equations;

Where:
a = Mouse X position
b = Width of Screen area
c = Width of area to be moved
if movable area is bigger than screen area:
moveable area X position = (a/b)*(b-c)
if moveable area is smaller than screen area:
moveable area X position = (b-c)/2

This equation is run every time a frame is rendered.

The User Experience bit

It is an important interaction that when working with scrolling content like this, especially when the content is a menu, to make sure that the direction of new content approaches the movement of the mouse.

Get the code

As always you can download the example files here.