iOS Rounded Button is a special button control designed to simulate iOS 8's modern button interfaces and visual aesthetics. Crafted with pixel-perfect rendering, the gorgeous button control provides various predefined button styles and content styles that suit your design preferences. More importantly, the button control is engineered with compliance to iOS gesture tracking standard defined in the human interface guidelines, including ability to track touch down inside or out, as well as touch up inside or out.

The translucent style automatically draw a rounded border filled with vibrancy visual effect – which typically used along with blur visual effect in the view's background, while the solid fill button allows you to select a solid color for the background which is ideal for actions that represent a highlight or destructive action.

The button control also includes several convenient features not available in standard iOS button such as toggle mode. In addition, every appearance aspect can be easily customizable – all with just simple property set.

Adding Button Control to View

As in any Crosslight controls, you can instantiate UIRoundedButton programmatically in the runtime then add it to the view's hierarchy. In addition, the button control is also designed to support rich design-time experience through Xamarin iOS Designer. Just add the Crosslight iOS assembly to your project's reference and open the storyboard, you will see the button control in the Toolbox, under the Intersoft Crosslight category. Simply drag the control from the toolbox and drop it to the designer surface to start working with the control.

The following illustration shows the UIRoundedButton control in the Xamarin iOS Designer.

In the current release, Xamarin iOS Designer doesn't support editing properties with Enum and UIFont type. As the result, some UIRoundedButton properties – such as ButtonStyle, ContentStyle and TitleFont – will not be visible in the property window. You will need to set these properties in the code.

Alternatively, if you prefer to add the button control at runtime, here's the code example.

Customizing Button Appearance

You can easily customize every aspect of UIRoundedButton control's appearance to your liking through the predefined styles and appearance settings. In general, the button control is automatically laid out through the combination of the following properties:

ButtonStyle

VibrancyEffectStyle

ContentStyle

To understand how each property affects the layout and rendering of the control, please refer to the following figures.

As seen in the above figures, most of the button's appearance are customizable, from the styles, effects, colors, to fonts and margins. To find out the complete properties of the control, see UIRoundedButton class.

Handling Button Command

Built with MVVM architectural pattern in mind, UIRoundedButton supports binding to the Command property, enabling you to handle the button's action in the ViewModel.

Once the binding definition is configured, you can create the DelegateCommand and define the execution method such as shown in the example code below.

Enabling Toggle Mode

UIRoundedButton is not only packed with beautiful design, it is also highly functional covering numerous command scenarios. It includes support for toggle button mode, in which the selected state will remain active when tapped. You can easily enable toggle mode by simply setting the IsToggleMode property to true.

In the toggle mode, you can also set the initial state of the selection through the IsSelected binding. The following code example shows how to set the selected state of the speaker button in ViewModel.

Note that the code above presumes you have set the IsSelected binding between the SpeakerButton and the SpeakerActive property in the binding provider. The binding definition should be a two-way binding mode, allowing you to set the active state from the code, while also allow the control to set the value back when user tapped on the button. For more information about data binding in Crosslight, see Understanding Binding Providers.

Also note that you can capture the selected state in the command parameter of the delegate method, see the code example below.