locked
How to ScrollToHorizontalOffset in Gridview on loading an image into a gridview

    Question

  • Hi,

    How does one scroll to a certain area of an image programmatically at program startup, or after reordering images? I have a sample project here that loads an image, after which the user can enter a vertical and or horizontal offset and click / tap the image after which the ScrollViewer scrolls to the specified offset.

    However, I cannot get the image scrolled to a specified offset at startup, before the image is displayed. Neither can I (another project) get an image scrolled to a stored offset after the image is reordered (in that case there are several images in the grid).

    Any help is greatly appreciated,

    Regards,

    Marc.

    Wednesday, January 16, 2013 9:59 AM

Answers

  • Thanks for you patience ...

    - I updated the code above
    - once that works, you can refactor it into a UserControl solution 

    • Edited by ForInfo Wednesday, January 16, 2013 1:53 PM
    • Marked as answer by OlManMarc Wednesday, January 16, 2013 2:12 PM
    Wednesday, January 16, 2013 1:46 PM

All replies

  • Please correct:

    Scrollviewer:

    <ScrollViewer 
                    HorizontalScrollMode="Enabled"
                    VerticalScrollMode="Enabled"
                    Loaded="templateScrollViewer_Loaded_1" ...
    ScrollViewer^ sv;
    
    void ScrollByCode::MainPage::templateScrollViewer_Loaded_1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	sv = safe_cast<ScrollViewer^>(sender);
    }

    Image:

    <Image LayoutUpdated="Image_LayoutUpdated_1" ...
    void ScrollByCode::MainPage::Image_LayoutUpdated_1(Platform::Object^ sender, Platform::Object^ e)
    {
    
    	if (sv)
    	{
    
    	auto h = _wtof(hscroll->Text->Data());
    	auto v = _wtof(vscroll->Text->Data());
    
    	sv->ScrollToHorizontalOffset(h);
    	sv->ScrollToVerticalOffset(v);
    	}
    }

    Text: initialize for testing purposes:

                <TextBox x:Name="hscroll" Width="120" Margin="6" Text="200"/>
                <TextBox x:Name="vscroll" Width="120" Margin="6" Text="200"/>

    ---

    From a design viewpoint, I also would recommend to DataTemplate a UserControl that contains your present content _plus_ any event handlers. This guarantees that every instantiated UserControl [from the Datatemplate] contains _locally_ the ScrollViewer+Image  as well as any associated event handlers. Otherwise, you risk creating a centralized event handler [in your mainpage] whereby any instance variables will contain info from different image/scrollviewer instances in the GridView.


     
    • Edited by ForInfo Wednesday, January 16, 2013 1:52 PM
    Wednesday, January 16, 2013 11:10 AM
  • Hi ForInfo,

    Thank you for your input. However, I don't have it working yet. Your corrections have been inserted into the code, my implementation of the LayoutUpdated event is:

    void ScrollByCode::MainPage::Image_LayoutUpdated_1(Platform::Object^ sender, Platform::Object^ e)
    {
    	auto im = safe_cast<Image^>(sender);
    
    	if (im)
    	{
    		auto sv = safe_cast<ScrollViewer^>(im->FindName("templateScrollViewer"));
    
    		sv->ScrollToHorizontalOffset(1000.0);
    		sv->ScrollToVerticalOffset(600.0);
    	}
    }
    

    Is anything wrong with this implementation? I added the check on 'im' to circumvent exceptions: the reference to 'im' is always zero, so nothing happens. Could you please provide more info?

    Regards,

    Marc. 

    Wednesday, January 16, 2013 1:21 PM
  • Thanks for you patience ...

    - I updated the code above
    - once that works, you can refactor it into a UserControl solution 

    • Edited by ForInfo Wednesday, January 16, 2013 1:53 PM
    • Marked as answer by OlManMarc Wednesday, January 16, 2013 2:12 PM
    Wednesday, January 16, 2013 1:46 PM
  • Hi ForInfo,

    Your solution works. The idea is clear to me now. An extra level of state integration is definitely required here.

    Thank you very much, for your very quick response. Great!

    Regards,

    Marc.

    Wednesday, January 16, 2013 2:15 PM
  • My pleasure ...
    Wednesday, January 16, 2013 2:17 PM