Creating an Unwind Segue

PDF for offline use
Sample Code:
Related Articles:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows how to use the iOS Designer to create an Unwind Segue between Scenes in a Storyboard.

Recipe

An unwind Segue can be used to navigate back through a push or modal segue - for example by dismissing the modally presented view controller. In addition to this, you can unwind through not only one, but a series of push and modal segues and go back multiple steps in your navigation hierarchy with a single unwind action.

To create an unwind Segue in the Xamarin Designer for iOS:

  • Create a new iOS > Single View Application with Visual Studio for Mac or Visual Studio:

  • Double-click on the .storyboard file to open it in the iOS Designer and view the default user interface consisting of a single UIViewController and UIView.

  • Drag a new Navigation Controller onto the design surface. 

  • Drag a new UIViewController onto the design surface

  • Select each UIView and change the background colour using the Properties Pad , as shown in the screenshot below.

  • Select each UIViewController and change the Identity > Class in the Properties Pad to reflect the background color. - Yellow Background: YellowViewController

  • Magenta Background: PinkViewController
  • Green Background: GreenViewController

  • To finish creating the UI use the Toolbox and add Buttons to your View as follows. - YellowViewController : 1 Button with title "Go To Pink"

  • PinkViewController: 2 Buttons , one with title "Go To Green", the other "Unwind to Yellow"
  • GreenViewController: 2 Buttons , one with title "Unwind to Pink", the other "Unwind to Yellow"

  • The Storyboard should now look like this:

  • Now, let's set the navigation between each Scene. First move the sourceless Segue to just before the Navigation Controller. This will tell the application which screen the user is expected to see first.

  • By default there should be a Segue between the Navigation Controller and the View Controller. If there is not, add one with the relationship 'Root'.

  • Next, add Modal Segues between each Scene. To do this hold down the Control key and click then drag from the 'Go To Pink' Button to the PinkViewController. On ‘mouse up’ the following options appear – choose Modal.

  • Repeat the previous step, this time between the 'Go To Green' and the GreenViewController.

  • We now need to specify an Action method in the View Controllers we wish to unwind to. The method takes a segue paramater and can be called anything you wish. Make sure the Action String and method name match. Add the following code to YellowViewController:

[Action ("UnwindToYellowViewController:")]
public void UnwindToYellowViewController (UIStoryboardSegue segue)
{
    Console.WriteLine ("We've unwinded to Yellow!");
}
  • Add a similar method to the PinkViewController:
[Action ("UnwindToPinkViewController:")]
public void UnwindToPinkViewController (UIStoryboardSegue segue)
{
    Console.WriteLine ("We've unwinded to Pink!");
}
  • Save All and return to the MainStoryboard.storyboard, where the unwind segue will be added.

  • Create another Segue, this time from the 'Unwind to Yellow' Button in the PinkViewController to the Scene Exit

  • On mouse-up the following menu will appear, reflecting the Actions added in the PinkViewController.cs and YellowViewcontroller.cs previously. Select the 'UnwindToYellowViewController' for this Button.

  • Move to the GreenViewController and repeat the steps above to add an unwind Segue to both buttons. The 'Unwind To Yellow' Button should map to UnwindToYellowViewController , and the 'Unwind To Pink' Button should map to UnwindToPinkViewController .

The application should now navigate as illustrated in the screenshot below:

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.