WP7 Tip: disabling the Pivot Control swipe gesture

don't try this at home

A common question on WP7 message boards and mailing lists concerns how to cancel a pivot control’s built-in page swiping when you have another control in the pivot that takes swipe gestures: for instance, a Slider!

The standard Microsoft response to these queries is that you shouldn’t do it.  It creates UX confusion and is a “bad practice.”  The assumption is that users don’t think contextually, and will expect swiping to always do the same thing on a page.  This is one of those “sounds good enough” answers, and seems eminently reasonable with respect to a slider control inside a pivot panel.  Besides, you can always just orient your slider vertically, so there is even an out. 

On the other hand, WP7 textboxes use hold-and-swipe to manipulate the cursor in a textbox.  Is it poor UX or a bad practice to use textboxes inside of a pivot control?  Should I try to find a way to orient my textboxes vertically?  What about the Toggle Switch control?

Consider also that swiping is the quintessential phone gesture.  Every new WP7 control in 2011 will attempt to take advantage of it.  It would be a shame if we couldn’t use any of them with the pivot.

This post will address how to do the unspeakable: add a working, horizontally oriented slider to a pivot control.  If you understand how to add a slider to a pivot, you will be able to add any sort of control to a pivot.  For additional takes on this “Don’t Try This At Home” topic you should read Derik Whittaker’s post as well as Miloud B’s post.

In a nutshell, the keys to making this work are to use the IsHitTestVisible property of the pivot control in order to disable swiping.  Then use the static Touch class’s FrameReported event to determine when to re-enable it.

Create a new project in Visual Studio.  If the Pivot control is not available in your toolbox, right click on the toolbox and select “Choose Items…”  Scroll until you find the Pivot and select it.  Open MainPage.xaml in design view.  Drag the Pivot control into the Content grid.  Grab the sizing handles for the Pivot and drag them around until the Pivot fills the Content grid (everything under the Application Title and Page Title textblocks).

Two pivot panels are initially stubbed in for the Pivot control.  Drag a Slider control into the first panel (“item1”).  If you run the application now, you will encounter strange behavior in which the slider bar is successfully moved when you swipe it, but at the same time the pivot panel also attempts to page to a new panel.

swipeme

To fix this, handle your slider control’s ManipulationStarted event and set the pivot’s IsHitTestVisible property to false in order to disable it while the swipe for the Slider is being handled. 

When the swipe is completed, you will need to re-enable the pivot.  You cannot do this on the MouseLeftButtonUp event since this gets disabled on all child controls when you set IsHitTestVisible to false on a container.  Putting it in the ManipulationCompleted event is possible, but results in inconsistent behavior.

Instead, take advantage of the lower level touch API.  Check to see when an up touch gesture occurs over your slider  and set the pivot’s IsHitTestVisible property to true when it does.  This can be hooked up in the page constructor like so:

Touch.FrameReported += (s, e) =>
{
    if (e.GetPrimaryTouchPoint(slider1).Action == TouchAction.Up)
    { 
        pivot1.IsHitTestVisible = true; 
    }
};

Here is the relevant XAML:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <controls:Pivot  HorizontalAlignment="Stretch" Margin="6,6,0,0" 
                        Name="pivot1" Title="pivot" 
                        VerticalAlignment="Top" Height="595">
        <controls:PivotItem Header="item1">
            <Grid>
                <Slider  Height="107" HorizontalAlignment="Left" 
                            Margin="-4,109,0,0" Name="slider1" 
                            VerticalAlignment="Top" Width="460" 
                            SmallChange="1" 
                            Maximum="100" 
                            Value="30" 
            ManipulationStarted="slider1_ManipulationStarted" />
            </Grid>
        </controls:PivotItem>
        <controls:PivotItem Header="item2">
            <Grid />
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

And here is the code-behind:

public MainPage()
{
    InitializeComponent();
    Touch.FrameReported += (s, e) =>
    {
        if (e.GetPrimaryTouchPoint(slider1).Action == TouchAction.Up)
        { 
            pivot1.IsHitTestVisible = true; 
        }
    };
}

private void slider1_ManipulationStarted(object sender
    , ManipulationStartedEventArgs e)
{
    pivot1.IsHitTestVisible = false;
}

6 thoughts on “WP7 Tip: disabling the Pivot Control swipe gesture”

  1. Hi

    Great post.
    I’m trying out the solution but am getting an exception the second time I go back into the view.

    Its a ‘Parameter is incorrect’ exception and its being thrown on line…
    if (e.GetPrimaryTouchPoint(slider1).Action == TouchAction.Up)

    Any ideas why this might happen?

  2. Ahh I’ve worked it out. If you navigate from the view that contains your code above you will have to deattach the event handler otherwise other views will call the same code and of course the scroll control won’t exist and it will break.

  3. Nice. Works great nesting two pivot controls as well (yeah, I know, it might not be "recommended" layout, but it really works quite intuitively.

  4. When you do this you can no longer click or tap any controls in the Pivot. You can do gestures just no clicks or taps which doesn’t really help me any ideas?

  5. After much trial and error here’s what worked for me. For the framereported event add it in the NaviagteTo method or else a GoBack() won’t call the constructor so no event. For those controls that you want to click youll need to put a mousedown on them and set a global property denoting it was clicked on then back in the FrameReported event look for that variable and its not null call your previous click method. Remeber to null this global out in the FrameCounter event and the OnNavigatedFrom. Also add a manipulatedcomplete event to your other element and null out the global…Everything works great now even the context menu is correct!!

Leave a Reply

Your email address will not be published. Required fields are marked *