Part 6 – Other Controls

PDF for offline use:
Sample Code:
Related Articles:

Let us know how you feel about this.


0/250
Thanks for the feedback!

Sliders

The slider control allows for simple selection of a numeric value within a range. The control defaults to a value between 0 and 1 but these limits can be customized.

The following screenshot shows the properties that are editable in the Designer:

You can set these values in code as shown below, including wiring up a handler to display the currently selected value in a UILabel control:

slider1.MinValue = -1;
slider1.MaxValue = 2;
slider1.Value = 0.5f; // the current value
slider1.ValueChanged += (sender,e) => label1.Text = ((UISlider)sender).Value.ToString ();

You can also customize the visual appearance of the slider by setting

slider1.ThumbTintColor = UIColor.Blue;
slider1.MinimumTrackTintColor = UIColor.Gray;
slider1.MaximumTrackTintColor = UIColor.Green;

The customized slider looks like this:

There is currently a bug causing the ThumbTint to not render at run time as expected. You can add the following line of code before the code above as a workaround. [Source]: slider1.SetThumbImage(UIImage.FromBundle("thumb.png"),UIControlState.Normal);

You can use any image, as it will be overridden, but make sure it is placed in the Resources directory and is called in your code.

Switch

iOS uses the UISwitch as a boolean input that may be represented by a radio-button on other platforms. The user can manipulate the control by moving the thumb between the On/Off positions.

The appearance of the switch can be customized in the Properties Pad of the designer, which will let you control the default state, On/Off tint colors and an On/Off Image. This is illustrated in the image below:

The properties of the switch can also be set in code, for example the code below will show a switch with the default value of On:

switch1.On = true;

Segmented Controls

A Segmented Control is an organised way to allow users to interact with a small number of options. It is laid out horizontally and each segment functions as a seperate button. When using the Designer, the Segmented Control can be found under ToolBox > Controls, and should look like the following image:

A unique feature of the Designer allows for each segment to be selected individually on the design surface, as illustrated below:

This allows the Properties Pad to be used to more precisely control the properties of each segment. You can see the editable properties in the screenshow below:

It should be noted that the Segmented Control Style has been deprecated in iOS7, and therefore, adjusting options for this in an iOS7 application will have no effect.

Displaying Alerts

Starting with iOS 8, UIAlertController has completed replaced UIActionSheet and UIAlertView both of which are now deprecated.

Unlike the classes it replaced, which are subclasses of UIView, UIAlertController is a subclass of UIViewController.

Use UIAlertControllerStyle to indicate the type of alert to display. These alerts types are:

  • UIAlertControllerStyleActionSheet
    • pre iOS 8 this would have been a UIActionSheet
  • UIAlertControllerStyleAlert
    • Pre iOS 8 this would have been UIAlertView

There are three steps to take when creating an AlertController:

  • Create and configure the Alert

    • title
    • message
    • preferredStyle
  • (Optional) Add a text field

  • Add the Required actions
  • Present the View Controller

The simplest alert contains a single button, as shown in this screenshot:

The code to display a simple alert is as follows:

okayButton.TouchUpInside += (sender, e) => {

                //Create Alert
                var okAlertController = UIAlertController.Create ("Title", "The message", UIAlertControllerStyle.Alert);

                //Add Action
                okAlertController.AddAction (UIAlertAction.Create ("OK", UIAlertActionStyle.Default, null));

                // Present Alert
                PresentViewController (okAlertController, true, null);
            };

Displaying an alert with multiple options, is done in a similar fashion but add two actions. For example, the following screenshot shows an alert with two buttons:

okayCancelButton.TouchUpInside += ((sender, e) => {

                //Create Alert
                var okCancelAlertController = UIAlertController.Create("Alert Title", "Choose from two buttons", UIAlertControllerStyle.Alert);

                //Add Actions
                okCancelAlertController.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, alert => Console.WriteLine ("Okay was clicked")));
                okCancelAlertController.AddAction(UIAlertAction.Create("Cancel", UIAlertActionStyle.Cancel, alert => Console.WriteLine ("Cancel was clicked")));

                //Present Alert
                PresentViewController(okCancelAlertController, true, null);
            });

Alerts can also display an action sheet, similar to the screenshot below:

Buttons can be added using the AddAction method:

actionSheetButton.TouchUpInside += ((sender, e) => {

                // Create a new Alert Controller
                UIAlertController actionSheetAlert = UIAlertController.Create("Action Sheet", "Select an item from below", UIAlertControllerStyle.ActionSheet);

                // Add Actions
                actionSheetAlert.AddAction(UIAlertAction.Create("OK",UIAlertActionStyle.Default, (action) => Console.WriteLine ("Item One pressed.")));

                actionSheetAlert.AddAction(UIAlertAction.Create("custom button 1",UIAlertActionStyle.Default, (action) => Console.WriteLine ("Item Two pressed.")));

        actionSheetAlert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Default, (action) => Console.WriteLine ("Item Three pressed.")));

                actionSheetAlert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Cancel, (action) => Console.WriteLine ("Cancel button pressed.")));

                // Required for iPad - You must specify a source for the Action Sheet since it is
                // displayed as a popover
                UIPopoverPresentationController presentationPopover = actionSheetAlert.PopoverPresentationController;
                if (presentationPopover!=null) {
                    presentationPopover.SourceView = this.View;
                    presentationPopover.PermittedArrowDirections = UIPopoverArrowDirection.Up;
                }

                // Display the alert
                this.PresentViewController(actionSheetAlert,true,null);
            });

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.