How to stop pivot looping

Question

I want to create a wizard control from the pivot control. To achieve this I need to stop the pivot looping. I want to stop the pivot control moving forward from the last ite

Answer 1

The pivot is not designed to be used as a wizard and does not support stopping it's looping behaviour as this would create an inconsistent UX for users.

If you really must create a wizard do it with multiple pages.

Answer 2

If you absolutely want to keep the Pivot from looping, here is a quick and dirty hack:

 int previousSelectedIndex = 0;

    public PageWithPivot()
    {
        InitializeComponent();
        pivot.SelectionChanged += new SelectionChangedEventHandler(pivot_SelectionChanged); 
    }


    private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {

        if (pivot.SelectedIndex == 0 && previousSelectedIndex == <number Of screens - 1>)
            pivot.SelectedIndex = <number Of screens - 1>;
        previousSelectedIndex = pivot.SelectedIndex;
    }

This causes your PivotControl to jump back to the last pivotItem. Not very pretty but works.

Answer 3

I couldn't reply to your comment on Matts answer but I just wanted to point you to this: http://forty3degrees.wordpress.com/2011/07/19/creating-a-swipable-contentcontrol/

It's the last entry in my very neglected blog and should provide a good base for creating a wizard using a pivot style swipe.

Calum.

EDIT: I tried to do what you wanted with the pivot but couldn't find a way to stop it looping. The only way that I can think of to achieve this would be to derive a custom control from Pivot. Unfortunately SelectedIndex/SelectedItem are not virtual so you would need to hide them (with the new modifier) and reproduce the logic from the base class.

Answer 4

Don't use a Pivot for a Wizard. Create your own transitions instead.

Answer 5

It's just an alternative solution I've posted here - you can try to make use of XNA framework TouchPanel and Touch.FrameReported Event:

using Microsoft.Xna.Framework.Input;

public MainPage()
{
   InitializeComponent();
   myPivot.IsHitTestVisible = false; // disable your Pivot
   Touch.FrameReported += Touch_FrameReported;
   TouchPanel.EnabledGestures = GestureType.HorizontalDrag; 
}

TouchPoint first;

private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    TouchPoint mainTouch = e.GetPrimaryTouchPoint(this);
    if (mainTouch.Action == TouchAction.Down)
        first = mainTouch;
    else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)
    {
        if (mainTouch.Position.X < first.Position.X)
        {
            if (myPivot.SelectedIndex < myPivot.Items.Count - 1)
                myPivot.SelectedIndex++;
        }
        else if (mainTouch.Position.X > first.Position.X)
        {
            if (myPivot.SelectedIndex > 0)
                myPivot.SelectedIndex--;
        }
    }
}

Thought it would probably work from WP7.1 as TouchPanel is available from that version of the OS.

Answer 6

This is so weird because it only works in the Emulator. I guess you shan't mess with the UI

You can use MVVM:

<phone:Pivot Foreground="Black"
                 Name="pivot1"
                 Title="AIDE"
                 SelectedIndex="{Binding SelectedItem, Mode=TwoWay}">

Cs:

    private class HelpViewModel : ViewModelBase
    {
        public HelpViewModel()
        {

        }

        private int _SelectedItem = 0;
        public int SelectedItem
        {
            get
            {
                return _SelectedItem;
            }
            set
            {
                if (_SelectedItem != value)
                {
                    if (value == 3)
                        _SelectedItem = 0;
                    else
                        _SelectedItem = value;
                    RaisePropertyChanged(() => SelectedItem);
                }
            }
        }
    }


    public AppHelpPivot()
    {
        InitializeComponent();
        LayoutRoot.DataContext = new HelpViewModel();
    }