Xamarin is a cross-platform technology that makes it possible to build native mobile apps for Android, iOS, and Windows Phone using C# and a shared codebase. Like its younger siblings NativeScript and React Native, it allows development teams to build mobile applications using the skills they already have, and spend less time writing code for each platform.
Visual Studio for Mac will now alert you if a particular iOS or Mac constructor (from Xamarin.iOS or Xamarin.Mac, respectively) is unavailable due to deprecation or introduced into a later version of the OS than the version the project is targeting (e.g. The 'Deployment Target' as set in the Info.plist).
If you haven’t tried Xamarin yet, now is a great time to get started! Earlier this year, Microsoft bought Xamarin and made it free (and open-source). You can build Xamarin projects on Windows (using Visual Studio), or Mac/Linux (using Xamarin Studio).
I’m excited to dig into Xamarin because mobile apps need authentication and authorization, which Stormpath makes easy. We already have rich SDKs for .NET and ASP.NET, as well as SDKs for iOS and Android separately, but a Xamarin-specific SDK could provide even more value and make it super simple to secure your apps. It’s something I’m currently digging into, so stay tuned!
In this tutorial, I’ll show you how to use Visual Studio and Xamarin to build a basic app for iOS and Android — even if you’ve never done any app development before!
Setting Up Visual Studio and Xamarin
If you don’t have Visual Studio 2015 installed, download the free Community Edition from Microsoft. If you already have Visual Studio, make sure you have the latest update (Update 3 at the time of writing).
You’ll also need to install some optional components for Visual Studio. If you’re setting up Visual Studio from scratch, make sure these items are selected:
If you have an existing installation, you can verify that these components are installed by opening the Control Panel, choosing Uninstall or change a program, and selecting Microsoft Visual Studio 2015. Follow the installation wizard to make sure the above items (at a minimum) are checked.
Once you have the tools set up, you’re ready to create a Xamarin project!
Xamarin vs. Xamarin.Forms
The Xamarin SDK provides bindings to the platform-specific APIs on each mobile platform, so you can call Android or iOS APIs from C# code. This allows you to build native apps using C#, but you still need to design the UI separately for each platform.
Xamarin.Forms is an additional layer on top of the Xamarin SDK that makes it possible to build your UI once (in XAML markup) and let Xamarin do the hard work of translating it into the appropriate UI elements on the target platform. You can drop down to the Xamarin SDK level and interact with the platform APIs if you need to.
Should you use “raw” Xamarin, or Xamarin.Forms? It depends on what you are building:
If you’re building an app that needs little platform-specific functionality or custom UI, go with Xamarin.Forms. This is a good choice for straightforward readonly='><?xml version='1.0' encoding='UTF-8'?><ContentPage xmlns='http://xamarin.com/schemas/2014/forms' xmlns:x='http://schemas.microsoft.com/winfx/2009/xaml' x:Class='HelloWorldApp.HelloWorldPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='20, 40, 20, 20' Android='20, 20, 20, 20' WinPhone='20, 20, 20, 20' /> </ContentPage.Padding> <ContentPage.Content> <StackLayout VerticalOptions='FillAndExpand' HorizontalOptions='FillAndExpand' Orientation='Vertical' Spacing='15'> <Label Text='Enter your name:' /> <Entry x:Name='NameEntry' Text='Jane Doe' /> <Button x:Name='SayHelloButton' Text='Say Hello' Clicked='SayHelloButton_OnClicked' /> </StackLayout> </ContentPage.Content></ContentPage>2 4 6 8 10 12 14 16 18 20 22 | <ContentPage xmlns='http://xamarin.com/schemas/2014/forms' xmlns:x='http://schemas.microsoft.com/winfx/2009/xaml' <ContentPage.Padding> iOS='20, 40, 20, 20' WinPhone='20, 20, 20, 20'/> <ContentPage.Content> HorizontalOptions='FillAndExpand' Spacing='15'> <Entryx:Name='NameEntry'Text='Jane Doe'/> <Buttonx:Name='SayHelloButton'Text='Say Hello'Clicked='SayHelloButton_OnClicked'/> </ContentPage.Content> |
Visual Studio For Mac
This XAML code creates a basic layout containing Label, Entry (text box), and Button controls. The control names (specified with x:Name
) will be used to refer to the controls in code.
The Clicked=
attribute on the Button element wires up the button click event to a handler called SayHelloButton_OnClicked
, which doesn’t exist yet (but it’s about to!)
Open up the code-behind for the XAML file by expanding it in the Solution Explorer and double-clicking on the HelloWorldPage.xaml.cs
file.
Replace the generated C# code with the following:
2 4 6 8 10 12 14 16 18 20 | using Xamarin.Forms; namespaceHelloWorldApp publicpartial classHelloWorldPage:ContentPage publicHelloWorldPage() InitializeComponent(); privateasync voidSayHelloButton_OnClicked(objectsender,EventArgse) varname=NameEntry.Text; await DisplayAlert('Greeting',$'Hello {name}!','Howdy'); } |
Looks familiar, doesn’t it? The SayHelloButton_OnClicked
method will run when the SayHelloButton
is clicked on the XAML page. First, the value of the textbox is assigned to the name
variable, and then the DisplayName
method is called to display a modal popup on the device.
There’s one more thing to do before you’re done: telling the app to use the new page. In App.cs
, replace the constructor method with this:
2 4 | { } |
That’s it! Your new Xamarin app is ready to go.
Testing Your Xamarin App on Android
If you have the Visual Studio Android Emulator installed, testing the Android version of your Xamarin app is simple. In the Visual Studio toolbar, pick the HelloWorldApp.Droid project and choose an Android device to emulate. Then, click the green Play button to start the emulator.
The Android emulator can be slow to load, so give it some time. If everything builds properly, you should see your app running on Android.
Testing Your Xamarin App on iOS
Testing your Xamarin app on iOS is a little trickier, because it requires a Mac to provide the emulator. If you have a Mac handy, follow the official instructions to set up the Mac agent and connect it to Visual Studio. Then, pick the HelloWorld.iOS project, and switch the architecture to iPhone Simulator. Choose a device version and click Play.
After the project builds, the simulator will launch on the Mac.
Next steps
This tutorial only scratches the surface. There’s plenty more you can do with Xamarin! Here’s some further reading:
If you’ve built something cool with Xamarin, let me know in the comments or on Twitter @nbarbettini!
Just like last year, I was able to attend the Microsoft Build conference in Seattle. The three day event was action packed with loads of interesting, technical sessions and to give an idea of the vision of Microsoft. There were a couple of great Xamarin-related announcements that I wanted to share, which sadly were a lot less than last year.
Still, great Xamarin minds like Miguel, James, Mikayla and David took a spot on one of the stages at Build and shared their latest and greatest. I wanted to highlight a couple of things that got me most excited and is available for us today to create great Xamarin apps!
Overview:
What’s new with Visual Studio for Macby Mikayla Hutchinson
Visual Studio for Mac v7.0 went Generally Available during the keynote from Build last year. At this years conference, v7.5 has been launched in Stable after being available in Preview for a while. Sweet!
Mikayla went maximum purple for her talk at Build and shared some pretty cool stuff. I personally like the changes done in Xamarin.Forms development, now using the .NET Standard templates and IntelliSense being added to XAML development. Also, editing the Entitlements.plist
for iOS development is now easier than ever. Simply open the file in the IDE and get to work! WiFi debugging is available for iOS development as well. Visual Studio for Mac also ships a new Android Device Manager so you won’t need to rely on the one shipped by Google.
Non-Xamarin specific functionality that has been added include ASP.NET Core development with Razor, JavaScript, and TypeScript Editor Support, Building Serverless solutions with Azure Functions as well as support for .editorconfig
-files (My colleague Bas wrote about this too). Support for TFVC is available in Preview as well! More details can be found on the The Visual Studio Blog. Version 7.6 is already available in Preview if you want to get a look at even newer features.
Visual Studio for Mac is really working hard to get feature parity with it’s brother on Windows, but on the other hand it’s interesting to see the direction of Visual Studio Code. That IDE is getting more features as well through plugins, but hasn’t reached the level of VS yet.
Visual Studio and Xamarin: The future of app developmentby Miguel de Icaza
Originally this session was planned together with James, but for unknown reason only Miguel took the stage. His session was built around the complete Development Cycle for mobile development, which was interesting since it started being non technical at all.
Visual Studio
One of the more technical bits was the announcement that the Android emulator now supports Hyper-V making it blazing fast and using it is much simpler. Miguel drew this simplification in a beautiful overview.
Another thing that was added, was the Android Designer (in Preview Release). It’s now possible to have a Split View, Drag and Drop and Completion of your *.AXML
-files. I’m really looking forward to this since it can speed up development a lot.
Also, the ugly syntax for Xamarin.iOS development when using WeakReference<T>
has become a lot cleaner now. Now simply use the [Weak]
-attribute to specify this type of reference, which is essentially how this works in Objective-C as well using the __weak
-attribute (or weak
in Swift).
Miguel finished his presentation with some food for thought of other things people are working on. An example was Xamarin.Essentials which I’ll cover later as well. Other topics were Elmish and Ooui. In the last minute, Miguel talked about Xamarin.Forms Shell which goal is to make it simple and straightforward for new developers to get a complete app experience that is properly structured, uses the right elements, with very little effort and a clear path to being good by default. It’s currently still a draft, looking for feedback.
Cloud-connected apps with Visual Studio, Xamarin, and Azureby James Montemagno
James didn’t show any new stuff, but told the mobile developer story from start to end. Sadly, his demo had some hiccups on Android but that was due to a bug that was already fixed in a later version. He essentially walked us through the Geocontacts-app, an app to connect CDAs.
In order to create the app, he (obviously) used Xamarin and combined it with loads of interesting libraries. New for me were the MSAL (Microsoft Identity Client) and Markdig (Markdown processor) libraries.
The app also used Azure Functions, something that can be created using Visual Studio for Mac as well. James completed the app development cycle by using App Center to build, test and deploy the app.
What’s new in Xamarin.Forms 3.0by David Ortinau
Loads of goodness has been dropped for Xamarin.Forms in their 3.0 release. David started his session with a recap from last year, but quickly switched to thanking the Community Contributions to Xamarin.Forms, as well as taking the time to focus on some Community Projects like Prism from Dan Siegel.
XAML standard was announced last year, but still isn’t fully used everywhere. David promised it will drop in Xamarin.Forms 3.1, which is expected within the upcoming 6 weeks. RTL-support is already available at this time.
David took us through the Conference Vision app (source), which is an absolute beauty of an app built with Xamarin.Forms 3.0. The app uses the new FlexLayout, as well as CSS and the Visual State Manager. I’ll cover these topics in upcoming blog posts.
If you want to learn more about the FlexLayout system, David created a sample app to do so. He also mentioned the F100 collaboration, which stands for a challenge to improve 100 little things in Xamarin.Forms. Since it’s Open Source, you can create a PR to add this functionality to Xamarin.Forms yourself!
David finished strong with a roadmap of the future for Xamarin.Forms. The {x:Bind}
markup extension will be added later this year, but the vNext (3.1-pre1
) is already available. vNext2 will include Gestures for Xamarin.Forms as well, which is something I’ll be really looking forward to.
More
Although I think there were a lot more interesting Xamarin announcements last year, the progress the teams shared are still pretty awesome for every Xamarin developer. What do you think and what direction would you like to see some change happening?