Using Designers with ComponentOne Studio for Xamarin

Xamarin has gradually been adding new types of designers to their platform over the past few years. ComponentOne Studio for Xamarin now offers even better designer support across Xamarin.Android, Xamarin.iOS, and Xamarin.Forms. We're pleased to announce that our controls are now supported in the Xamarin.Forms Previewer so that you can get live visual feedback as you design your apps: For those of you who prefer working in with iOS Storyboards or Android axml we've also added even better support for those designers as well:

Xamarin.Forms Previewer

The Xamarin.Forms Previewer is a relatively new addition to Xamarin's toolset that allows you to get immediate visual feedback about the changes you're making to your Xaml without the need to recompile and run your code. While not an active designer in the same sense as other platforms, it does make designing your apps much faster and easier. There are many third party controls out there that still don't support the previewer, though as of 2017 v2 all of our controls will now work with it. Using the Previewer is easy, and it's available directly in Visual Studio. To access it, navigate to the View menu under Other Windows -> Xamarin.Forms Previewer. As long as you've compiled your project at least once, you can simply click on a Xaml page in your solution explorer to view it in the previewer. Repeated compilation isn't necessary to see changes reflected in the designer, so you can make some changes to your UI, and evaluate them instantly.

iOS Storyboards

Storyboards allow you to visually lay out both your navigation between screens and the individual screens themselves. We've supported using the C1 Xamarin control in Storyboards since beta, and we've already written extensively about it so we'll give a brief overview here. Using ComponentOne controls with Storyboards is as easy as adding the NuGet packages for the controls you want to use, building your project, and then drag and dropping controls from your toolbox onto your ViewControllers. You can further configure the controls through the Properties window rather than configure properties in the code behind. Storyboards provide a robust way of designing your apps, and all of our controls will work well in this design environment.

Android Layouts

Xamarin.Android developers aren't being left out either, and they also have the ability to work with their layouts using a combination of the designer and xml source. Android layouts also provide a drag and drop surface for our controls (which are once again grouped under custom controls in the toolbox). The layout files are generally stored inside your Resources folder in the layout folder. Opening one of these files will trigger the designer to load. Once a user drags a control from their toolbox onto the design surface it becomes visible: Android controls give you a couple of options for configuring them. For long term .NET users, configuring the control via the Properties panel may be the most comfortable. Long time Android users though may be more comfortable configuring the control in the xml source. For instance to create the above calendar sample, a user could write the following into their xml source code:

    xmlns:calendar="http://schemas.android.com/apk/res-auto"  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"  
    android:id="@+id/Calendar"  
    calendar:c1_backgroundColor="#FFEBEBEB"  
    calendar:c1_textColor="#FF000000"  
    calendar:c1_typeface="monospace"  
    calendar:c1_textSize="16px"  
    calendar:c1_adjacentDayTextColor="#FFA5A5A3"  
    calendar:c1_dayBorderColor="#FFF2F2F2"  
    calendar:c1_dayBorderWidth="1"  
    calendar:c1_borderColor="#FF343434"  
    borderWidth="4"  
    calendar:c1_dayOfWeekBackgroundColor="#FF63A646"  
    calendar:c1_dayOfWeekTextColor="#FFFFFFFF"  
    calendar:c1_dayOfWeekFormat="d"  
    calendar:c1_dayOfWeekTextStyle="italic"  
    calendar:c1_dayOfWeekTypeface="sans"  
    calendar:c1_dayOfWeekTextSize="21px"  
    calendar:c1_headerBackgroundColor="#FF3D834B"  
    calendar:c1_headerTextColor="#FFFFFFFF"  
    calendar:c1_headerTypeface="serif"  
    calendar:c1_selectionBackgroundColor="#FFD2D2D2"  
    calendar:c1_selectionTextColor="#FF000000"  
    calendar:c1_todayTextStyle="bold|italic" />  

Each option is equally valid and will produce similar results.

Designer support going forward

ComponentOne Studio for Xamarin provides a huge leap forward in terms of our designer support, and allows users to produce rich UIs with more flexibility. The ability to design visually rather than exclusively in code can make app design easier, and make testing UI changes much faster. As Xamarin provides new options for the platform in the future we'll work to support them.

Download ComponentOne Studio for Xamarin >>