Shell, Visual y CollectionView are the new features highlighted in the new version of Xamarin.Forms. Once but the Xamarin team launches great new features with the new version of Xamarin.Forms 4.0. If you missed the new in its 3.4.0 version, you can see it here.
It’s good to clarify that these updates are just an advance of what will come in the stable version of Xamarin.Forms 4.0. All changes, updates and bug fixes will continue to be added in the stable version 3.x that we have today.
Now yes, we will focus on the new features Incorporated in the new version. If you want to know all the details of the new update visit this link.
If you just want to see what new they have in all the updates that have been covered in this blog, you can do it here.
Implementing new Features
I know many of you are here to see what new they have in Xamarin.Forms 4.0 and others want more details. To not make the post so long I will create a series of post talking about each feature, what you need to implement them, examples, performance tests, recommendations and so on.
Here’s the list:
- Shell
- Visual
- CollectionView
Each element in this list will be updated with the corresponding publication link. So, you have several options: You can get here on this post or on the blog to see the updates, or you can subscribe and activate the notifications push to keep you updated.
Shell
Xamarin team introduce a new way to simplify and express the structure and navigation of our applications in a single file. Xamarin.Forms Shell is a container that provides the following features:
- A single place to describe the visual structure of an application.
- A common navigation user interface.
- A navigation service with deep links (deep linking).
- An integrated search manager.
These features were created in order to reduce the complexity of applications that needed a navigation system a little more Complex, among other things. The good thing here is that with Shell we can increase our productivity considerably. And this is not all, Shell is Rendering taking into consideration the speed and memory consumption – this means that we will see significant performance gains in this update with Shell.
No more dealing with different page types to handle setting up complicated navigation. It supports flyout menu, bottom tabs, top tabs, and an integrated search handler. A new URI based navigation routing system has been implemented in addition to the existing push/pop navigation service. Now you can route to any point in your application, no matter how deep, and handle navigation events to perform custom logic such as canceling the back action. – Official version Details
An example of the implementation of shell:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TailwindTraders"
x:Class=" TailwindTraders.Shell"
Title="TailwindTraders">
<ShellItem Title="Home">
<ShellSection>
<ShellContent>
<local:HomePage />
</ShellContent>
</ShellSection>
<ShellItem>
</Shell>
Here are some demonstrations:
Top Tabs
In summary, the container shell purpose is to cover all the navigation logic offering a clean and optimized UI. It’s good to know that through shell you can implement different types of navigation depending on the hierarchical levels.
Visual
I don’t know about you, I know shell is a great impressive feature but Xamarin.Forms Visual means the beginning of many interesting things. Xamarin.Forms Visual is the new way to achieve consistent views between platforms based on Google’s material patterns design.
This feature is very fashionable nowadays, and it is because Google material design offers UIs that have been very well accepted by mobile users.
The affected views are only available for Android and IOS and are only supported the following ones:
- Button
- Entry
- Frame
- ProgressBar
Although these in the beginning are not much, it is a great start for the rendering of new controls. This implies great added value for the whole community, especially for those who do not know much about design, because now they will have to do less effort to achieve amazing UIs for users.
The way we can activate this render is as follows:
<ContentPage ...
Visual="Material">
...
</ContentPage>
Control rendering works by inheritance, which means that by setting the Visual property to Material all elements supported by visual within the ContenPage will be rendered.
Here is a comparison between the rendered and the normal controls:
CollectionView
You ask for it and they give it to you – Bum! -That simple. This shows the xamarin team commitment. This is one of the most requested controls by the community, including me.
The CollectionView is a view that presents a list of data based on the specification of different layouts. Unlike the traditional ListView, this gives us more flexibility because we can create vertical, horizontal, and cell-based lists (with columns and rows).
This is an implementation of the new view:
<CollectionView ItemsSource="{Binding Blogs}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
...
</CollectionView>
Improvements
Xamarin.Forms 4.0 also brought with it some improvement:
- An update indicator was implemented to which you can change the color to ListView pull-to-refresh.
- Bindable Repeater control
- Possibility to set the color of the text in the TableSection
- Now you can hide the Scroll Bars Of all the ListView
- Added Property OnColor For the control SwitchCell
- Among other things
Conclution
These were the changes that has brought this update from Xamarin.Forms 4.0. All these details also apply for each specific platform Xamarin.Android And Xamarin.iOS. It’s also good to mention that all of these controls and new feature are experimental – Although Soon we’ll see them in a stable version.
The development xamarin team is doing an amazing job throwing updates constantly – which is thanks a lot.
Implementing the new Features – Xamarin.Forms 4.0
If you want more details about these features can be seen in:
- Shell
- Visual
- CollectionView
Do not forget that if you want to see all the details of the updates that have been covered in this blog you can see here. See you at the Next!
[bucket id=”11123″ title=”Thanks for reading”]
