Search code examples
xamlwindows-phone-8winrt-xamlscrollviewerappbar

ScrollViewer reaching bottom WindowsPhone8


Im trying to open a App-Bar when the user reaches the end of the (ScrollViewer)Page... Therefore I need a indicator when the end is reached...

I cant find any event within this Viewer which could help me...

       <ScrollViewer x:Name="SV_ScrollViewer"
                      Grid.Row="1" 
                      Margin="12,0,12,0"
                      ManipulationMode="Control"                       
                      AllowDrop="False">
            <Grid x:Name="ContentPanel">
                <StackPanel>
                    <Controls:Map                             
                        Height="730"
                        x:Name="M_MainMap"                                  
                        ZoomLevel="10" 
                        Loaded="Map_Loaded"/>
                    <phone:LongListSelector 
                        x:Name="LLS_FuelStations" 
                        Height="700">                        
                    </phone:LongListSelector>
                </StackPanel>                    
            </Grid>
        </ScrollViewer>

Thank you for your help!

2-EDIT: The LayoutUpdated-Event was not good for closing app-bar again... I ended up with a Dispatcher-Timer for closing AND opening it. Now it works fine (smooth):

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

        Dispatcher.BeginInvoke(() =>
        {
            //initialize timer
            if (timer == null)
            {
                int timerSpan = 500;
                timer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(timerSpan) };
                timer.Tick += (o, arg) => OffsetWatcher();
            }
        });
    }  

Closing and opening app-bar:

private void OffsetWatcher()
        {
            if (SV_ScrollViewer.ScrollableHeight - SV_ScrollViewer.VerticalOffset > 100 )
            {
                if (ApplicationBar.IsVisible)
                {
                    ApplicationBar.IsVisible = false;
                    ApplicationBar.IsMenuEnabled = false;
                }
            }
            else
            {
                if (!ApplicationBar.IsVisible)
                {
                    BuildLocalizedApplicationBar();
                }   
            }
        }

Solution

  • Use Layout Updated Here's code I used and debugged to get the scrolling effect. You might also need to keep a track where the pointer has been pressed and the scroll viewer manipulation completed event. Here's the xaml Add the respective event handler in the code behind.

     <ScrollViewer ManipulationCompleted="ScrollViewer_ManipulationCompleted" ManipulationMode="All">
            <StackPanel  LayoutUpdated="StackPanel_LayoutUpdated" PointerPressed="StackPanel_PointerPressed">
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
                <Grid Height="100" Width="100" Background="Red" ></Grid>
                <Grid Height="100" Width="100" Background="Green" ></Grid>
                <Grid Height="100" Width="100" Background="Blue" ></Grid>
                <Grid Height="100" Width="100" Background="Yellow" ></Grid>
            </StackPanel>
        </ScrollViewer>
    

    Here's the code behind

            public MainPage()
        {
            this.InitializeComponent();
        }
    
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
    
        }
    
    
        private void ScrollViewer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            //scroll bar being dragged
        }
    
        private void StackPanel_LayoutUpdated(object sender, object e)
        {
            //if swipe gesture then check for vertical offset and carry on with the //calculations you have to do else do nothing
        }
    
        private void StackPanel_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            //swipe gesture being made
        }
    

    Please let me know if it worked