Xamarin.Forms 3 For You and Me
Tags: dotnet, xamarin
Published: 2019-01-25 08:51:06

---
title: Xamarin.Forms 3 For You and Me
published: true
tags: dotnet, xamarin 
canonical_url: https://www.telerik.com/blogs/xamarin-forms-3-for-you-and-me
---

This article dives into some exciting new features in the Xamarin.Forms 3.0 release and how developers can leverage them in Xamarin apps.

Most developers are genuinely excited by software. Modern software runs the world and developers get to shape the future. Developers often cannot wait for the next hotness to drop - for their chosen platforms and tools. Developers are known to stay on cutting edge and are eager to try out latest bits. This comes with the obvious risk of bricking computers or wasting hours getting things to work - but hey, new software is just cool. 

However, the realities of being a _Professional Software Developer™️_ often bring in cautiousness. Developers get wary of hot untested bits because of how easily development environments/tools can get messed up. Amidst this dilemma, comes the new Xamarin.Forms 3.0 release.

While still fairly new, [Xamarin.Forms 3.0](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/release-notes/3.0/3.0.0) has shown surprising maturity - existing features work while long awaited new functionality brings joy to developers. All the while Xamarin.Forms 3 release demonstrates stability, thus lowering barriers for developer adoption.

But what can Xamarin.Forms 3.x do for developers? This article takes a lap around some new features that developers should find rather useful to integrate into their Xamarin apps. You get to play around with the latest and greatest, while enjoying platform stability - what's there to lose?

## Cascading Style Sheets

No way. Say it ain't so. The dark magic of CSS has found it's way into our beloved Xamarin.Forms?

> Shut the front door!

Yeah, that was the initial reaction from many .NET developers. But the point is CSS styling of XAML is optional and actually works beautifully. Developers used to building for web do not need to learn anything new, as CSS in Xamarin.Forms obeys the same rules. CSS parsing is maturing and pre-processors like LESS/SASS may also be used. 

To use CSS in Xamarin.Forms, developers can simply create a file with a \*.css extension and start writing normal CSS.

```
.importantStuff {
    font-size: 24;
    font-style: bold;
    color: #FF0000;
}

#individId {
    margin: 10 0 0 10;
}

label, button {
    background-color: #c0d6f9
}
```

Check that out. That CSS is specifying classes, individual element IDs, and entire types of elements. And setting property values is done the same way as in regular old CSS.

Sold on CSS and can't wait to use it? Good - this is how you'd use an individual CSS file within a XAML file in Xamarin.Forms.

```
<ContentPage.Resources>
    <StyleSheet Source="PATH TO CSS RELATIVE TO XAML PAGE">
</ContentPage.Resources>

<ContentPage.Content>
    <Label Text="This is important" StyleClass="importantStuff">
</ContentPage.Content>

```
 ![CSSStyles](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/cssstyles.tmb-small.png?sfvrsn=deacfe81_2 "CSSStyles")  
 

That example shows loading up the CSS, and then applying a class to a `Label` control. CSS in Xamarin.Forms is here to stay and if building for web and mobile, you can now start sharing styles. Find out more on CSS in Xamarin.Forms [with the docs](https://msou.co/bof)!

## Flex Layout

This may sound suspicously like `FlexBox` from the web - and for good reason! Xamarin.Forms's newest layout rendering `FlexLayout` was actually inspired from the `FlexBox Layout` in CSS. So the idea behind FlexLayouts is to give the container (or the layout) many different (flexible) options to layout its children to best fill available space.

> You may be thinking - awesome, show me more!

Here's the best thing about the `FlexLayout` - making use of all of its sweet layout options is as simple as adding controls to it and then tweaking some properties on the `Layout` and some attached properties (akin to how you set a control's position in a grid `Grid.Row="3"`) on controls.

Let's take a peek at an example that combines some CSS with some `FlexLayout` goodness. And let's see this in action using some beautiful [Pie Charts](https://www.telerik.com/xamarin-ui/chart) that come built-in with [Telerik UI for Xamarin](https://www.telerik.com/xamarin-ui). Pro tip developers - you don't need to reinvent the wheel on complex UI. Telerik UI really shows off the engineering behind each control through performance and flexible APIs.

**The CSS:**  

```
.chart {
    flex-basis: 25%;
    height: 100;
}

.third {
    flex-basis: 33.33%;
    height: 150;
}

.half {
    flex-basis: 50%;
    height: 200;
}

.full {
    flex-basis: 100%;
    height: 250;
}

```
**The XAML:**  

```
<FlexLayout Direction="Row" Wrap="Wrap" AlignItems="Center" AlignContent="Start" >

    <telerikChart:RadPieChart StyleClass="chart">
        <telerikChart:RadPieChart.Palette>
            <local:OrangePalette />
        </telerikChart:RadPieChart.Palette>
        <telerikChart:RadPieChart.BindingContext>
            <local:ChartViewModel />
        </telerikChart:RadPieChart.BindingContext>
        <telerikChart:RadPieChart.Series>
            <telerikChart:PieSeries RadiusFactor="0.8"
                                    ValueBinding="Value"
                                    ItemsSource="{Binding Data}" />
        </telerikChart:RadPieChart.Series>
    </telerikChart:RadPieChart>

    <telerikChart:RadPieChart StyleClass="chart">
        <telerikChart:RadPieChart.Palette>
            <local:BrightPalette />
        </telerikChart:RadPieChart.Palette>
        <telerikChart:RadPieChart.BindingContext>
            <local:ChartViewModel />
        </telerikChart:RadPieChart.BindingContext>
        <telerikChart:RadPieChart.Series>
            <telerikChart:PieSeries RadiusFactor="0.8"
                                    ValueBinding="Value"
                                    ItemsSource="{Binding Data}" />
        </telerikChart:RadPieChart.Series>
    </telerikChart:RadPieChart>

    <telerikChart:RadPieChart StyleClass="chart, half">
        <telerikChart:RadPieChart.Palette>
            <local:DarkPalette />
        </telerikChart:RadPieChart.Palette>
        <telerikChart:RadPieChart.BindingContext>
            <local:ChartViewModel />
        </telerikChart:RadPieChart.BindingContext>
        <telerikChart:RadPieChart.Series>
            <telerikChart:PieSeries RadiusFactor="0.8"
                                    ValueBinding="Value"
                                    ItemsSource="{Binding Data}" />
        </telerikChart:RadPieChart.Series>
    </telerikChart:RadPieChart>

   ...
   ...

```

The XAML markup and CSS combined produce a layout like this in portrait orientation:

 ![FlexPortrait](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/flexportrait.tmb-small.png?sfvrsn=f5ed82e5_2 "FlexPortrait")  
 

And like so in landscape orientation:

 ![FlexLandscape](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/flexlandscape.png?sfvrsn=a81fc9b3_1 "FlexLandscape")  
 

The `FlexLayout` is doing all the work of resizing and making sure everything has enough room to be displayed no matter the orientation for us - how nifty. This works on any container control no matter what be the containing children in the visual tree. And there's a whole lot more to `FlexLayout` too - [Check out the docs](https://msou.co/bog) for the full story.

## Android Bottom Tabs

This next Xamarin.Forms 3.0 feature should be labeled - _it's about time!_. On Android, navigational tabs generally are on the top. But let's face it, iOS has taught us that the rightful place for tabs are at the bottom of the screen.

 ![DroidTopNav](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/droidtopnav.tmb-small.png?sfvrsn=1e026d0e_2 "DroidTopNav")  
 

So, in Xamarin.Forms 3, we now have a way to move the tabs to the bottom of the screen, just as Steve Jobs would have wanted had he designed Android himself.

 ![DroidBottomNav](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/droidbottomnav.tmb-small.png?sfvrsn=1debed29_2 "DroidBottomNav")  
 

Getting the tabs to be rendered at the bottom of the screen is way easier than anything else you ever had to do in Android.

```
var tabsPage = new Xamarin.Forms.TabbedPage();
tabsPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

```

Yeah - that's it. Xamarin.Forms - making Android development tolerable since 2014 something.

## Summing It All Up

So there you have it - a quick lap around some of the new and best features of Xamarin.Forms 3.

Styling XAML controls and pages using CSS is here to stay. Sure it seems a bit weird. But considering that you can use all of your hard won CSS knowledge from the web world, like selectors and cascading rules and [apply it to Xamarin.Forms](https://msou.co/bof) - it's pretty much a no-brainer to start using it. Again, it's an optional feature and developers can choose between XAML Styles or CSS.

The `FlexLayout`is another nifty little rendering feature. Here is the second worthy bit of inspiration from the web world happily brought over to Xamarin.Forms. This time, add some controls to a `FlexLayout` layout - and let the layout do the calculations of where everything should appear on screen for you. Developers can [read up](https://msou.co/bog) on how flexible its layout options are.

Then Android bottom tabs - the mobile world as it should be.

In all, developers should definitely give Xamarin.Forms 3 a spin - it's stable and provides some exciting new features. Staying on the cutting edge has some awesome benefits - and may be you'll be so inclined to look forward to Xamarin.Forms 4.0. Onwards and to the future!