As I have said in the major demo introduction, there is no existing solution to resize the scatter view item only in one direction. (at least, i haven't found it!)
To make the demo application as elegant as it could, I decide to programmatically control the size of the push pin panel.
The width of the push pin panel
As I use a list box to contain all the element, and it is necessary to display the vertical scroll bar when the content exceeds the scroll viewer. However, if you make the scroll bar visible or auto, the space for the scroll bar will always be displayed no matter if the scroll bar is showing. So I need to change the width of the push pin panel when the scroll bar is unneeded.
The surface list box contains a scroll view which in term contains the scroll bar. There is a property called ScrollableHeight, which can help us to decide if the scroll bar is necessary. And the LayoutUpdated event will be fired when that property has changed. Through debugging, I have found the path to access the scroll view.
Grid grid = VisualTreeHelper.GetChild(TheSurfaceListBox, 0) as Grid;
ScrollViewer scroll = grid.Children as ScrollViewer;
We can then change the width of the push pin panel so that it will clip the area for the scroll bar when it is not needed.
The height of the push pin panel
WPF layout system is complicated, you will encounter a lot of null exception as the width or height on a particaliar control is not set. However, sometimes we cannot set a predefined size as the size will be vary in different situation. I found the min height on each element is suitable for decide the height of the push pin panel which contains all the elements.