Using Storyboards with ComponentOne Xamarin Edition

Some users are happy generating their app layouts in code, but many prefer the ability to create these layouts graphically. An exciting new feature of the ComponentOne Xamarin Edition beta is that you can design your iOS apps using Storyboards. Storyboards allow you to design individual screens for you app using drag and drop controls with simple property configuration. They also allow you to set up your navigation between screens in an easy, illustrative manner. In this article we'll take a look at how you can use our controls within Storyboards using Visual Studio and Xamarin.iOS.

Create new project

The first step as always is to create a new project. Xamarin provides a few templates we could use for a Xamarin.iOS project, though in this case we'll stick with Single View App. This project template comes with a storyboard and ViewController already included so the setup will be minimal. From here you'll need to add the C1 Xamarin Edition NuGets to your project. We'll be working with Gauges in this example, so we'll select that from the GrapeCity feed (the source being http://nuget.grapecity.com/nuget). With that complete we should be able to manipulate the C1Gauge controls within the Storyboard.

Working in the Storyboard

Now that everything is set up, you'll see that we can drag and drop controls from Toolbox in Visual Studio. All of the Xamarin Edition controls should display under the Custom Component Category. For the purpose of this example, we'll drag a C1RadialGauge onto the design surface. After the gauge has been placed onto the Storyboard, we can configure it's properties in the property window. You can now go code free if you have basic needs for a control. Here, we set the control name, the start and sweep angles, and finally the min, max, and value for the radial gauge. Setting the name will let us access the control in code if we desire in the future. We can also use the Document Outline window to access all of the different elements that are a part of a ViewController. You'll be able to see the view hierarchy here, and as we add constraints to size and position the control the will also become visible in this area. Though we're working under very simple conditions, the Document Outline becomes very important as individual screens become more complex. It can be a much easier way to select individual elements as the become nested within each other.

Setting your constraints

Constraints are the primary way of sizing and positioning the elements in each ViewController of your Storyboard. They can become quite complicated as the complexity of your apps grow, but we'll cover some basics of using them. Something to keep in mind is that Xamarin provides the ability to automatically generate the constraints for an individual element (notice the green + in the top right of your screen). We'll start of by using this feature, and then making a few small modifications. The auto-generated constraints take care of the basic sizing of the radial gauge, but we'll want to go a bit farther in terms of positioning it. We want add a constraint that centers the radial gauge in the middle of the screen as well. This can be accomplished by double clicking the radial gauge, clicking and holding over the center pin, and dragging it so that it connects with the vertical line that represents the center of the ViewController. Likewise we can set a constraint to position the radial gauge a set distance from the top layout guide so that it will always occupy a similar position on different devices. We can drag the top pin over the top layout guide to set this constraint. That's all it really takes to get started with our controls using Storyboards. If you want to interact with the control in code, simply use the name that you created in the property window to do so.

Designer wrap up

Storyboards can be a much easier way of designing your app than an otherwise all code based approach. Xamarin provides some further resources for working with Storyboards, so if you want some more advanced information it's a good resource. We'll continue to explore other new options for interacting with designers in ComponentOne Xamarin Editon.

Read more about the new features of the ComponentOne Xamarin Edition >>