stop the stackpanel items inside scroll viewer to

Question

I have added 10 images in a stackpanel horizontally which is inside a scrollviewer. When user swipe the page ,the scrollviewer stops at certain position, if the scroll stops in the middle of 2 images like the first image shown below i want to set the image with number 3 to be automatically scroll and fit with the left side of the screen like in the second image

for (int i = 0; i <= 9; i++)
{
    Uri uri = new  Uri("http://d1mu9ule1cy7bp.cloudfront.net//catalogues/47/pages/p_" + i + "/thump.jpg");
    ImageSource img1 = new BitmapImage(uri);
    Image rect = new Image { RenderTransform = new TranslateTransform() };

    rect.Source = img1;

    stack.Children.Add(rect);

}

XAML:

<Grid x:Name="LayoutRoot" Width="480" Background="Transparent" Margin="0,-33,0,0" Height="800">

 <ScrollViewer HorizontalContentAlignment="Left" HorizontalAlignment="Left" Name="scroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">

  <StackPanel Name="stack" Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left"  >

</StackPanel>
</ScrollViewer>
</Grid>

Answer 1

The first thing you need to do is detect which item is overlapping the side of the screen. To do this, iterate over each item within the StackPanel and determine their location relative to some other element that has a fixed location on screen.

To do this, I use the following extension method:

/// <summary>
/// Gets the relative position of the given UIElement to this.
/// </summary>
public static Point GetRelativePosition(this UIElement element, UIElement other)
{
    return element.TransformToVisual(other)
                  .Transform(new Point(0, 0));
}

i.e. for each item call the following;

Point position = stackPanelItem.GetRelativePosition(someFixedElement);

Using the location of each item, you should be able to work out which one overlaps the screen.

You then need to calculate by how much you need to scroll in order to ensure that your item is fully visible, then use ScrollViewer.ScrollToVerticalOffset to scroll to that location.

Answer 2

This probably isn't the nicest solution and I am sure there is a better way to achieve this but you could use the following :-

XAML :-

    <ListBox x:Name="MyListBox"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
            ScrollViewer.HorizontalScrollBarVisibility="Visible">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

C# :-

    DispatcherTimer myTimer = new DispatcherTimer();

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        for (int i = 0; i < 10; i++)
        {
            MyListBox.Items.Add(new Button()
            {
                Content = i.ToString(),
                Width = 200,
                Height = 100,
            });

            MyListBox.MouseMove += new MouseEventHandler(MyListBox_MouseMove);
        }

        myTimer.Interval = TimeSpan.FromSeconds(1);
        myTimer.Tick += new EventHandler(myTimer_Tick);
    }

    private void myTimer_Tick(object sender, EventArgs e)
    {
        myTimer.Stop();

        SnapFirstItem();
    }       

    private void MyListBox_MouseMove(object sender, MouseEventArgs e)
    {
        myTimer.Stop();
        myTimer.Start();
    }

    private void SnapFirstItem()
    {
        foreach (Button currentButton in MyListBox.Items)
        {
            bool visible = MyListBox.TestVisibility(currentButton, System.Windows.Controls.Orientation.Horizontal, true);

            if (visible)
            {
                MyListBox.ScrollIntoView(currentButton);
                break;
            }
        }
    }

The TestVisibility extension method is from the following :-

http://blogs.msdn.com/b/ptorr/archive/2010/10/12/procrastination-ftw-lazylistbox-should-improve-your-scrolling-performance-and-responsiveness.aspx