{"id":11277,"date":"2014-06-03T12:22:52","date_gmt":"2014-06-03T16:22:52","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=11277"},"modified":"2014-06-03T12:22:52","modified_gmt":"2014-06-03T16:22:52","slug":"meet-xamarin-forms-3-native-uis-1-shared-code-base","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/meet-xamarin-forms-3-native-uis-1-shared-code-base\/","title":{"rendered":"Meet Xamarin.Forms: 3 Native UIs, 1 Shared Code Base"},"content":{"rendered":"

\t\t\t\tBuilding out your user interface for each platform has always ensured beautiful native experience on each platform, while a common set of class libraries has enabled developers to generally share more than half their code base across platforms. But if there is one thing developers love, it is finding ways to write less code. So, it should perhaps come as no surprise that Xamarin.Forms has generated a lot of buzz in the mobile developer community. We are even running a Xamarin.Forms contest<\/a> where you can win a ticket to our Evolve 2014 conference.<\/p>\n

Xamarin.Forms is our new library that enables you to share even more code by letting you build native UIs for iOS, Android and Windows Phone from a single, shared C# codebase, while still maintaining access to all of the native APIs on each platform. This means that if there is something you want to do on a specific device or OS, you can do it. <\/p>\n

\"Xamarin<\/p>\n

The Xamarin.Forms Library<\/h3>\n

To get started with Xamarin.Forms, you can easily create a brand new cross platform Xamarin.Forms project directly from Visual Studio or Xamarin Studio, or add it to your existing project by adding the library from NuGet<\/a>. Xamarin.Forms is included in your Xamarin subscription. For a closer look of Xamarin.Forms be sure to register for our Xamarin.Forms webinar<\/a> on June, 10th 2014 8AM PDT.<\/p>\n

\"New<\/p>\n

Getting Started<\/h2>\n

Xamarin.Forms provides over 40 pages, layouts, and controls out of the box, while still enabling you to mix-and-match and extend with native controls. Let’s take a look at what all is included in Xamarin.Forms and then dive into how we can start using it an our mobile apps.<\/p>\n

Pages, Layouts, and Controls<\/h3>\n

The base of each screen of your application is a Page, and Xamarin.Forms offers 5 different pages – including the most basic ContentPage to more complex pages such as MasterDetailPage and TabbedPage. Each Page is mapped to the native page on the platform, which means that if you are using a TabbedPage the tabs will be on the bottom for iOS, top for Android, and use a Pivot control on Windows Phone.<\/p>\n

\"Xamarin.Forms<\/p>\n

Once you have selected the base Page that you want to use, you’ll want to figure out how to organize your content on the page. This is where Layouts come into play and there are plenty of options. <\/p>\n

\"Xamarin.Forms<\/p>\n

Easily stack your controls vertically or horizontally in a StackLayout<\/strong>, get pin point precision with an AbsoluteLayout<\/strong>, or leverage the power of a GridLayout<\/strong>. Possibilities are endless with the ability to mix and combine different layouts. There are a lot of controls available to use in your forms, such as Labels<\/strong>, ListViews<\/strong>, Buttons<\/strong>, so be sure to browse all of the controls in our gallery<\/a>.<\/p>\n

Let’s build an app<\/h2>\n

\"NewProjectMonkeys\"Xamarin.Forms takes the tedium out of building simple pages over and over again on multiple platforms. Let’s build out a common Master-Detail flow in an application. Our application will display a list of different monkeys, and when our user select one of them it will have detailed information.<\/p>\n

We are going to add a very simple data model to display:<\/p>\n

\npublic class Monkey {\n  public string Name {get;set;}\n  public string Location { get; set; }\n  public string Details { get; set; }\n}\n<\/pre>\n
Before we setup our user interface, we will create a helper class that we can use to get a list of Monkeys from. We will just create the list in our code behind, but we could go to our a web server or local database to get this information in the future.<\/p>\n
\npublic class MonkeysViewModel {\n  public ObservableCollection<Monkey> Monkeys { get; set; }\n\n  public MonkeysViewModel ()\n  {\n    Monkeys = new ObservableCollection<Monkey> ();\n    Monkeys.Add (new Monkey {\n     Name = "Baboon",\n     Location = "Africa & Asia",\n     Details = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."\n    });\n    ...\n  }\n}\n<\/pre>\n
MonkeysPage<\/h3>\n
Now to create some cross platform user interface with our first page called MonkeyPage<\/code>, which will derive from ContentPage<\/code>. Once the page is up we will need to tell it what to display. We are going to set the title to “Monkeys”, create a ListView<\/code> to display our data and then tell the page that we want the ListView to fill the entire page by setting it to the Content of the page.<\/p>\n
\npublic class MonkeysPage : ContentPage {\n  public MonkeysPage () {\n    Title = "Monkeys";\n    var list = new ListView ();\n    Content = list;\n  }\n}\n<\/pre>\n
Now it is time time to get more advanced and tell the ListView what to display, how to display it, and what to do when our user selects a monkey.<\/p>\n
Filling in the ListView<\/h3>\n
First, we will tell the ListView what to display by settings it’s ItemSource<\/code> property. Since Monkeys is an ObservableCollection the ListView will automatically be notified when any items are added or removed. <\/p>\n
\nvar viewModel = new MonkeysViewModel ();\nlist.ItemsSource = viewModel.Monkeys;\n<\/pre>\n
Next, we need to tell the ListView how to display each monkey in the list. To do this we will create a DataTemplate<\/code> for each item. Built in to Xamarin.Forms are a few default templates to choose from, and for this example we will use the TextCell<\/code> which has a title and detail label to display information. <\/p>\n
\nvar cell = new DataTemplate (typeof (TextCell));\ncell.SetBinding (TextCell.TextProperty, "Name");\ncell.SetBinding (TextCell.DetailProperty, "Location");\nlist.ItemTemplate = cell;\n<\/pre>\n
The code above is using Xamarin.Forms’ built in data binding. You can see that we are telling the cell to “bind” the TextProperty<\/code> to the property on the Monkey data object that is specified as “Name” and the DetailProperty<\/code> is bound to “location”. This is a simple example of data binding, but you can see how extremely powerful it can be, as every page, layout, and control has bindable properties.  Read more about data binding in the Xamarin.Forms documentation<\/a>.<\/p>\n
To get this new MonkeysPage to display, we are going to head back to App.cs and modify the default GetMainPage<\/code> method, used in each client app to get the first page to display, to return a new MonkeysPage. Additionally, we are going to wrap this MonkeysPage in a new NavigationPage<\/code> so that we will be able to take advantage of navigation later on. <\/p>\n
\npublic static Page GetMainPage () {\n  var monkeys = new MonkeysPage ();\n  return new NavigationPage (monkeys);\n}\n<\/pre>\n
\"ListView<\/a>\nHere is what our new app looks like on all three platforms. Each with the native ListView, styling, and navigation bar.<\/p>\n
DetailsPage<\/h2>\n
When our user selects a monkey from the list, we want to navigate to a new details page to display further information about the monkey. So let’s create a new Page called DetailsPage<\/code> and pass in the selected monkey in the constructor. We are just going to add a Label with the monkey’s details inside of a ScrollView in case of very long text.<\/p>\n
\npublic class DetailsPage : ContentPage\n{\n  public DetailsPage (Monkey monkey) {\n    Title = monkey.Name;\n    var details = new Label{\n      Text = monkey.Details\n    };\n\n   Content = new ScrollView {\n     Padding = 20,\n     Content = details\n    };\n  }\n}\n<\/pre>\n
Navigating in Forms<\/h2>\n
The last thing to do is wire up our ListView to navigate to the details page when a monkey is selected. Back in our MonkeysPage, we can do this by wiring up the ItemSelected<\/code> event. In the callback, we will use the page’s built in Navigation to create a new DetailsPage and tell it to PushAsync<\/code>.<\/p>\n
\nlist.ItemTapped += (sender, args) => {\n  var monkey = args.Item as Monkey;\n  if (monkey == null)\n    return;\n  Navigation.PushAsync (new DetailsPage (monkey) );\n  \/\/ Reset the selected item\n  list.SelectedItem = null;\n};\n<\/pre>\n
\"Details<\/a><\/p>\n
So much more<\/h3>\n
This doesn’t even scratch the surface of what Xamarin.Forms can do, including it’s built-in DependencyService to help you implement platform specific code<\/a>, advanced cross-platform Animation system, and all of the other pages, layouts, and controls that you can mix-and-match with other native controls on each platform.<\/p>\n
For a closer look of Xamarin.Forms be sure to register for our Xamarin.Forms webinar on June, 10th 2014 8AM PDT.<\/p>\n
Register Here<\/a><\/div>\n
To get started with Xamarin.Forms be sure to read our entire Xamarin.Forms documentation series<\/a>, download our sample apps<\/a>, and join the discussion in our Xamarin.Forms forum<\/a>. You can download this sample project from my GitHub page. You can download this sample project from my GitHub page<\/a>.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Building out your user interface for each platform has always ensured beautiful native experience on each platform, while a common set of class libraries has enabled developers to generally share more than half their code base across platforms. But if there is one thing developers love, it is finding ways to write less code. So, […]<\/p>\n","protected":false},"author":544,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4,16],"class_list":["post-11277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
Building out your user interface for each platform has always ensured beautiful native experience on each platform, while a common set of class libraries has enabled developers to generally share more than half their code base across platforms. But if there is one thing developers love, it is finding ways to write less code. So, […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/11277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=11277"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/11277\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=11277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=11277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=11277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}