none
Swipe gesture and page change RRS feed

  • Question

  • Hello everyone/magnus/andy

    I have started developing my app. Well, I am stuck which seems to be simple but unable to crack it. This is the issue

    I am coding gesture event in my app. Swiping the screen must take me to next page. Idea is as below:

    

    In above pic, you can observer windows is same. My mainwindow.xaml will have windows controls. Well the contents of the 1 and 2 are same, meaning, if I have bar graph in 1. then 2 also has bar graph "but" 2's bar graph is of different values. Wit this, since I am using the same controls in 1 and 2, I suppose that 1 and 2 will be user controls. 

    1.if not, then, What should be my 1 and 2? is it user control? or Page? 

    I know how to capture gesture, but i am stuck with how to navigate ( basically confused with 1 and 2 would be user control or page) after capturing gesture swipe event. Please if you have any idea or some simple code to explain navigation in xaml. please do let me know.

    Thank you


    Rakesh murthy

    Thursday, May 28, 2015 12:16 PM

Answers

  • Hi Rakkk,

    In my experience, you could need to add add a property to your page/control that keeps track of the Touch that the user has initiated to start the swipe event:

    protected TouchPoint TouchStart;

    In the codebehind of the Page or Control you're building, add the following handlers:

    public BasePage()
    {
    	this.TouchDown += new EventHandler<toucheventargs>(BasePage_TouchDown);
    	this.TouchMove += new EventHandler<toucheventargs>(BasePage_TouchMove);            
    }
    

    These handlers help detect when a user has pressed down and moved his/her finger over your page or control.

     Next, handle the initial Touch event that triggers the swipe:

    void BasePage_TouchDown(object sender, TouchEventArgs e)
    {
    	TouchStart = e.GetTouchPoint(this);
    }
    

    Finally, handle the movement aspect of the touch. If the movement exceeds some threshold; then we consider it a swipe and execute whatever code we want to do Here, 'AlreadySwiped' is just a flag property so we don't execute the same task multiple times if the swipe exceeds our threshold more than once. You are responsible for resetting it after you do your on-swiped code. Also, I used 200 pixels as the swipe threshold, but you may want a bigger/smaller value. You may also want to consider percentages of X here instead of actual pixels.

    void BasePage_TouchMove(object sender, TouchEventArgs e)
    {
    	if (!AlreadySwiped)
    	{                
    		var Touch = e.GetTouchPoint(this);
     
                    //right now a swipe is 200 pixels 
    
                    //Swipe Left
    
                    if (TouchStart != null && Touch.Position.X > (TouchStart.Position.X + 200))
                    {
                        RunMyCustomCode();
                        AlreadySwiped = true;
                    }
     
                    //Swipe Right
                    if (TouchStart != null && Touch.Position.X < (TouchStart.Position.X - 200))
                    {
                         RunMyCustomCodeSwipeRight();
                        AlreadySwiped = true;
                    }
                }
     
                e.Handled = true;
    }
    
    Here is a thread about “WPF image swipe to change image like in iOS”, you could refer to it:
    http://stackoverflow.com/questions/11411955/wpf-image-swipe-to-change-image-like-in-ios

    Best Regards,

    Xavier Eoro



    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Sunday, May 31, 2015 6:26 AM
    Moderator

All replies

  • A gesture can do stuff.  Anything.

    I emphasise that because this is largely your decision Rakesh.

    Only you know the details of your requirement.

    You could switch out usercontrols, animate transitions... the world is your oyster.

    If these are two graphs which are very similar then you could use your gesture to choose the data presented to the one usercontrol which has this graph in it.

    Or you could arrange a listbox horizontally and put a collection of graphs in it that the user scrolls through.

    Usercontrol and Page are largely synonymous actually.

    You can navigate to either.

    You can set the content of a contentcontrol to an instance of either.

    FWIW I usually go with usercontrols and a usercontrol in the one MainWindow.  A single window app, if that makes sense.

    Like this:

     https://gallery.technet.microsoft.com/WPF-Entity-Framework-MVVM-78cdc204

    That switches out the content of a contentcontrol:

    <ContentControl x:Name="Holder" Grid.Row="1" />

    There's a menu thing in grid.row 0.

    That contentcontrol basically fills the rest of the window and provides customer or product CRUD by setting it's contents to the customer or product usercontrol.

    You could have a similar sort of a control along the top in your mainwindow with a bunch of buttons with icons correspond to your graph options.  The user touches one ( click event ) and you navigate to that.

    The user knows what he's going to see in advance.


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles

    Thursday, May 28, 2015 3:02 PM
    Moderator
  • Hi Rakkk,

    In my experience, you could need to add add a property to your page/control that keeps track of the Touch that the user has initiated to start the swipe event:

    protected TouchPoint TouchStart;

    In the codebehind of the Page or Control you're building, add the following handlers:

    public BasePage()
    {
    	this.TouchDown += new EventHandler<toucheventargs>(BasePage_TouchDown);
    	this.TouchMove += new EventHandler<toucheventargs>(BasePage_TouchMove);            
    }
    

    These handlers help detect when a user has pressed down and moved his/her finger over your page or control.

     Next, handle the initial Touch event that triggers the swipe:

    void BasePage_TouchDown(object sender, TouchEventArgs e)
    {
    	TouchStart = e.GetTouchPoint(this);
    }
    

    Finally, handle the movement aspect of the touch. If the movement exceeds some threshold; then we consider it a swipe and execute whatever code we want to do Here, 'AlreadySwiped' is just a flag property so we don't execute the same task multiple times if the swipe exceeds our threshold more than once. You are responsible for resetting it after you do your on-swiped code. Also, I used 200 pixels as the swipe threshold, but you may want a bigger/smaller value. You may also want to consider percentages of X here instead of actual pixels.

    void BasePage_TouchMove(object sender, TouchEventArgs e)
    {
    	if (!AlreadySwiped)
    	{                
    		var Touch = e.GetTouchPoint(this);
     
                    //right now a swipe is 200 pixels 
    
                    //Swipe Left
    
                    if (TouchStart != null && Touch.Position.X > (TouchStart.Position.X + 200))
                    {
                        RunMyCustomCode();
                        AlreadySwiped = true;
                    }
     
                    //Swipe Right
                    if (TouchStart != null && Touch.Position.X < (TouchStart.Position.X - 200))
                    {
                         RunMyCustomCodeSwipeRight();
                        AlreadySwiped = true;
                    }
                }
     
                e.Handled = true;
    }
    
    Here is a thread about “WPF image swipe to change image like in iOS”, you could refer to it:
    http://stackoverflow.com/questions/11411955/wpf-image-swipe-to-change-image-like-in-ios

    Best Regards,

    Xavier Eoro



    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Sunday, May 31, 2015 6:26 AM
    Moderator