{"id":33882,"date":"2017-10-24T12:52:54","date_gmt":"2017-10-24T19:52:54","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=33882"},"modified":"2017-10-24T12:52:54","modified_gmt":"2017-10-24T19:52:54","slug":"3-big-things-explore-xamarin-forms-2-5-0-pre-release","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/3-big-things-explore-xamarin-forms-2-5-0-pre-release\/","title":{"rendered":"3 Big Things To Explore in the Xamarin.Forms 2.5.0 Pre-Release"},"content":{"rendered":"

\t\t\t\tOver the past year we\u2019ve been working on a couple of “big things” that enable you to create more performant applications on more platforms. With our latest stable release, version 2.4.0<\/a>, we introduced performance optimized renderers on Android,\u00a0nicknamed Fast Renderers<\/em>. While faster platform renderers are a clear win, you really start to see the big gains using them in combination with a new feature, debuting in 2.5.0, called Layout Compression<\/em>. Not to be eclipsed by those performance focused boosts, we’re also releasing Forms Embedding<\/em> in this preview. We’re excited to\u00a0take these improvements off the pages of our public roadmap<\/a>\u00a0and put them into your hands. Read on for details on how you can start benefiting from these fantastic improvements, and much more.<\/p>\n

Big Thing 1: Layout Compression<\/h3>\n

When optimizing\u00a0a layout for performance, whether for the purpose of smoother animation or\u00a0speed of rendering, you quickly learn the value of having a flat view hierarchy. Take this page\u00a0for example:<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<ContentPage \n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" \n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" \n    xmlns:local=\"clr-namespace:ProfileLayout\" \n    x:Class=\"ProfileLayout.ProfileLayoutPage\"\n    xmlns:views=\"using:ProfileLayout.Views\"\n    xmlns:controls=\"clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions\"\n    xmlns:converters=\"using:ProfileLayout.Converters;\"\n    Title=\"Profile\"\n    BackgroundColor=\"#F3F3F3\">\n    <ContentPage.Resources>\n        <ResourceDictionary>\n            <converters:InvertedBoolConverter x:Key=\"InvertedBoolConverter\"\/>\n    \n            <!-- Global Colors -->\n            <Color\n                x:Key=\"primaryColor\">#303030<\/Color>\n            <Color\n                x:Key=\"secondaryColor\">#C9AE98<\/Color>\n            <Color\n                x:Key=\"validationColor\">#FF3F56<\/Color>\n            <Color\n                x:Key=\"callToActionColor\">#4E8B4F<\/Color>\n            <Color\n                x:Key=\"accentColor\">White<\/Color>\n            <Color\n                x:Key=\"darkAccentColor\">#7c6a5c<\/Color>\n            <!-- Global Sizes -->\n            <x:Double\n                x:Key=\"mediumTextSize\">20<\/x:Double><x:Double\n                x:Key=\"smallTextSize\">14<\/x:Double><x:Double\n                x:Key=\"standardPadding\">10<\/x:Double>\n\n            <!-- Global Element Styles -->\n            <Style\n                TargetType=\"Entry\">\n                <Setter\n                    Property=\"HeightRequest\"\n                    Value=\"44\" \/>\n                <Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource darkAccentColor}\" \/>\n            <\/Style>\n\n            <Style\n                TargetType=\"NavigationPage\"><Setter\n                    Property=\"BarBackgroundColor\"\n                    Value=\"{StaticResource primaryColor}\" \/><\/Style><Style\n                TargetType=\"Frame\"><Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"{StaticResource accentColor}\" \/><Setter\n                    Property=\"Padding\"\n                    Value=\"{StaticResource standardPadding}\" \/><Setter\n                    Property=\"HasShadow\"\n                    Value=\"False\" \/><Setter\n                    Property=\"OutlineColor\"\n                    Value=\"{StaticResource secondaryColor}\" \/><\/Style><!-- Label Styles --><Style\n                x:Key=\"switchLabel\"\n                TargetType=\"Label\"><Setter\n                    Property=\"TextColor\"\n                    Value=\"#999999\" \/><Setter\n                    Property=\"VerticalOptions\"\n                    Value=\"Center\" \/><Setter\n                    Property=\"HorizontalOptions\"\n                    Value=\"FillAndExpand\" \/><\/Style><!-- Button Styles --><Style\n                x:Key=\"callToActionButton\"\n                TargetType=\"Button\"><Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"{StaticResource callToActionColor}\" \/><Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource accentColor}\" \/><Setter\n                    Property=\"FontSize\"\n                    Value=\"{StaticResource mediumTextSize}\" \/><\/Style>\n            <Style\n                x:Key=\"primaryButton\"\n                TargetType=\"Button\">\n                <Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"{StaticResource primaryColor}\" \/>\n                <Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource accentColor}\" \/>\n                <Setter\n                    Property=\"FontSize\"\n                    Value=\"{StaticResource smallTextSize}\" \/><\/Style>\n\n            <Style\n                x:Key=\"nakedButton\"\n                TargetType=\"Button\">\n                <Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"Transparent\" \/>\n                <Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource accentColor}\" \/>\n                <Setter \n                    Property=\"BorderColor\"\n                    Value=\"Transparent\"\/>\n                <Setter \n                    Property=\"BorderWidth\"\n                    Value=\"0\"\/>\n                <Setter\n                    Property=\"FontSize\"\n                    Value=\"{StaticResource mediumTextSize}\" \/><\/Style>\n\n            <Style\n                x:Key=\"whiteClearButton\"\n                TargetType=\"Button\">\n                <Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"Transparent\" \/>\n                <Setter\n                    Property=\"BorderColor\"\n                    Value=\"{StaticResource accentColor}\" \/>\n                <Setter\n                    Property=\"BorderWidth\"\n                    Value=\"1\" \/>\n                <Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource accentColor}\" \/>\n                <Setter\n                    Property=\"FontSize\"\n                    Value=\"{StaticResource smallTextSize}\" \/>\n            <\/Style>\n\n            <Style\n                x:Key=\"secondaryButton\"\n                TargetType=\"Button\"><Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"{StaticResource secondaryColor}\" \/><Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource accentColor}\" \/><Setter\n                    Property=\"FontSize\"\n                    Value=\"{StaticResource smallTextSize}\" \/><Setter\n                    Property=\"FontAttributes\"\n                    Value=\"Bold\" \/><\/Style><Style\n                x:Key=\"footerButton\"\n                TargetType=\"Button\"><Setter\n                    Property=\"BackgroundColor\"\n                    Value=\"{StaticResource secondaryColor}\" \/><Setter\n                    Property=\"TextColor\"\n                    Value=\"{StaticResource accentColor}\" \/><Setter\n                    Property=\"FontSize\"\n                    Value=\"{StaticResource smallTextSize}\" \/><Setter\n                    Property=\"FontAttributes\"\n                    Value=\"Bold\" \/><Setter\n                    Property=\"HorizontalOptions\"\n                    Value=\"FillAndExpand\" \/><\/Style>\n        <\/ResourceDictionary>\n    <\/ContentPage.Resources>\n    <ContentPage.Padding>\n        <OnPlatform x:TypeArguments=\"Thickness\" iOS=\"0,0,0,0\" Android=\"0,0,0,0\" \/>\n    <\/ContentPage.Padding>\n\n    <ContentPage.Content>\n        \n        <StackLayout\n            Spacing=\"0\"\n            VerticalOptions=\"FillAndExpand\"\n            HorizontalOptions=\"FillAndExpand\">\n            <AbsoluteLayout\n                BackgroundColor=\"#909090\"\n                HorizontalOptions=\"FillAndExpand\"\n                HeightRequest=\"60\">\n                <AbsoluteLayout.Padding>\n                    <OnPlatform x:TypeArguments=\"Thickness\" iOS=\"0,20,0,0\" Android=\"0,0,0,0\" \/>\n                <\/AbsoluteLayout.Padding>\n                <Button\n                    Margin=\"10,10\"\n                    FontSize=\"12\"\n                    Text=\"Cancel\"\n                    BackgroundColor=\"Transparent\"\n                    Command=\"{Binding CancelCommand}\"\n                    Style=\"{StaticResource nakedButton}\"\/>\n                <Image \n                    AbsoluteLayout.LayoutBounds=\"0.5, 0.5, 0.36, 0.7\"\n                    AbsoluteLayout.LayoutFlags=\"All\"\n                    BackgroundColor=\"Transparent\" \n                    HeightRequest=\"36\"\n                    Source=\"microsoft_gray.png\" \/>\n                <Button\n                    IsVisible=\"{Binding IsLoggedIn}\"\n                    Margin=\"10,10\"\n                    BackgroundColor=\"Transparent\"\n                    AbsoluteLayout.LayoutBounds=\"1, 0, AutoSize, AutoSize\"\n                    AbsoluteLayout.LayoutFlags=\"PositionProportional\"\n                    FontSize=\"12\"\n                    Text=\"Logout\"\n                    Command=\"{Binding LogoutCommand}\"\n                    Style=\"{StaticResource nakedButton}\"\/>\n            <\/AbsoluteLayout>\n\n            <Label\n                HorizontalOptions=\"FillAndExpand\"\n                BackgroundColor=\"#D1D1D1\"\n                HeightRequest=\"22\"\n                TextColor=\"#000000\"\n                FontSize=\"14\" \n                HorizontalTextAlignment=\"Center\"\n                Text=\"{Binding Title}\"\/>\n\n            <ScrollView HorizontalOptions=\"FillAndExpand\" VerticalOptions=\"FillAndExpand\">\n\n            <StackLayout\n            Spacing=\"0\"\n            VerticalOptions=\"FillAndExpand\"\n            HorizontalOptions=\"FillAndExpand\">\n\n                <Button\n                    Margin=\"0,10,0,0\"\n                    IsVisible=\"{Binding CanEdit}\"\n                    Text=\"    EDIT    \"\n                    Style=\"{StaticResource primaryButton}\"\n                    BackgroundColor=\"#9B9B9B\"\n                    HeightRequest=\"35\"\n                    HorizontalOptions=\"Center\"\n                    Command=\"{Binding ToggleEditModeCommand}\"\n                    \/>\n\n                <Button\n                    Margin=\"0,10,0,0\"\n                    IsVisible=\"{Binding IsEditing}\"\n                    Text=\"    EDITING    \"\n                    BackgroundColor=\"#9B9B9B\"\n                    Style=\"{StaticResource primaryButton}\"\n                    HeightRequest=\"35\"\n                    HorizontalOptions=\"Center\"\n                    Command=\"{Binding ToggleEditModeCommand}\"\n                \/>\n\n            <StackLayout\n                Margin=\"20\"\n                Spacing=\"20\"\n                HorizontalOptions=\"FillAndExpand\"\n                Orientation=\"Horizontal\">\n\n                <StackLayout \n                    Spacing=\"10\"\n                    Orientation=\"Vertical\">\n\n                        <controls:CircleImage \n                            x:Name=\"ProfilePic\"\n                            Source=\"david.jpg\" \n                            BorderThickness=\"3\"\n                            BorderColor=\"#9B9B9B\"\n                            Aspect=\"AspectFill\">\n                            <controls:CircleImage.WidthRequest>\n                                <OnPlatform x:TypeArguments=\"x:Double\"\n                                  iOS=\"104\"\n                                  Android=\"104\"\n                                  WinPhone=\"104\"\/>\n                            <\/controls:CircleImage.WidthRequest>\n                            <controls:CircleImage.HeightRequest>\n                                <OnPlatform x:TypeArguments=\"x:Double\"\n                                  iOS=\"104\"\n                                  Android=\"104\"\n                                  WinPhone=\"104\"\/>\n                            <\/controls:CircleImage.HeightRequest>\n                        <\/controls:CircleImage>\n\n                        <Button\n                            IsVisible=\"{Binding CanSave}\"\n                            Text=\"Change Photo\"\n                            Style=\"{StaticResource nakedButton}\"\n                            FontSize=\"12\"\n                            BorderColor=\"Transparent\"\n                            BorderWidth=\"0\"\n                            BackgroundColor=\"Transparent\"\n                            TextColor=\"#303030\"\n                        >\n                        <\/Button>\n                    <\/StackLayout>\n\n                <StackLayout \n                    Spacing=\"10\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    Orientation=\"Vertical\">\n\n\n                    <Entry\n                        IsVisible=\"{Binding IsLoggedIn, Converter={StaticResource InvertedBoolConverter}}\"\n                        HorizontalOptions=\"FillAndExpand\"\n                        Placeholder=\"Username\"\n                        Text=\"{Binding Username}\"\n                        x:Name=\"UsernameEntry\" \/>\n\n                    <Label\n                        IsVisible=\"{Binding IsLoggedIn}\"\n                        Text=\"{Binding Username}\"\n                        TextColor=\"#303030\"\n                        FontSize=\"12\"\n                        FontAttributes=\"Bold\"\n                        HeightRequest=\"40\"\n                        VerticalTextAlignment=\"Center\"\n                    \/>\n\n                    <Entry\n                        IsEnabled=\"{Binding CanSave}\"\n                        x:Name=\"EmailEntry\"\n                        HorizontalOptions=\"FillAndExpand\"\n                        Placeholder=\"Email\"\n                        Text=\"{Binding UserEmail}\" \/>\n\n                <\/StackLayout>\n            <\/StackLayout>\n\n            <Grid Margin=\"20, 0, 20, 0\">\n                <Grid.RowDefinitions>\n                    <RowDefinition Height=\"53\" \/>\n                    <RowDefinition Height=\"53\" \/>\n                    <RowDefinition Height=\"60\" \/>\n                    <RowDefinition Height=\"28\" \/>\n                    <RowDefinition Height=\"*\" \/>\n                    <RowDefinition Height=\"45\" \/>\n                <\/Grid.RowDefinitions>\n\n                <Grid.ColumnDefinitions>\n                    <ColumnDefinition Width=\"1*\"\/>\n                    <ColumnDefinition Width=\"1*\"\/>\n                <\/Grid.ColumnDefinitions>\n\n                <Entry\n                    Grid.Row=\"0\" Grid.Column=\"0\"\n                    IsEnabled=\"{Binding CanSave}\"\n                    x:Name=\"FirstNameEntry\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    Placeholder=\"First Name\"\n                    Text=\"{Binding FirstName}\" \/>\n\n                <Entry\n                    Grid.Row=\"0\" Grid.Column=\"1\"\n                    IsEnabled=\"{Binding CanSave}\"\n                    x:Name=\"LastNameEntry\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    Placeholder=\"Last Name\"\n                    Text=\"{Binding LastName}\" \/>\n                \n                <Entry\n                    Grid.Row=\"1\" Grid.Column=\"0\"\n                    IsEnabled=\"{Binding CanSave}\"\n                    x:Name=\"PasswordEntry\"\n                    IsPassword=\"true\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    Placeholder=\"Password\"\n                    Text=\"{Binding UserPassword}\" \/>\n\n                <Entry\n                    Grid.Row=\"1\" Grid.Column=\"1\"\n                    IsEnabled=\"{Binding CanSave}\"\n                    x:Name=\"ConfirmPasswordEntry\"\n                    IsPassword=\"true\"\n                    HorizontalOptions=\"FillAndExpand\"\n                    Placeholder=\"Confirm Password\"\n                    Text=\"{Binding ConfirmUserPassword, Mode=TwoWay}\" \/>\n\n\n                <Label\n                    Grid.Row=\"2\" Grid.ColumnSpan=\"2\"\n                    IsEnabled=\"{Binding CanSave}\"\n                    Margin=\"10\"\n                    Text=\"Password must be 8 digits long and include 1 number and 1 capital letter.\"\n                    TextColor=\"#303030\"\n                    FontSize=\"12\"\n                    HorizontalOptions=\"FillAndExpand\"\n                \/>\n\n                <views:StrengthIndicators \n                    IsEnabled=\"{Binding CanSave}\"\n                    Strength=\"{Binding PasswordStrength}\"\n                    HorizontalOptions=\"Center\" \n                    Grid.Row=\"3\" Grid.ColumnSpan=\"2\" \/>\n\n                <StackLayout\n                    Margin=\"0,20,0,40\"\n                    Grid.Row=\"4\" Grid.ColumnSpan=\"2\"\n                    IsVisible=\"{Binding IsLoggedIn}\">\n\n                    <BoxView \n                        Margin=\"30,10\"\n                        BackgroundColor=\"#9B9B9B\"\n                        HorizontalOptions=\"FillAndExpand\"\n                        HeightRequest=\"1\"\n                        \/>\n\n                    <Label\n                        Text=\"Connected Accounts:\"\n                        HorizontalOptions=\"Center\"\n                        TextColor=\"#303030\"\n                        FontSize=\"12\"\/>\n\n                    <views:ConnectSocialButtonView  \n                        HorizontalOptions=\"Center\" \n                        BindingContext=\"{Binding FacebookVM}\" \/>\n                \n                    <views:ConnectSocialButtonView \n                        HorizontalOptions=\"Center\" BindingContext=\"{Binding TwitterVM}\" \/>\n\n                    <views:ConnectSocialButtonView \n                    HorizontalOptions=\"Center\" BindingContext=\"{Binding YouTubeVM}\" \/>\n                \n                    <views:ConnectSocialButtonView \n\n                    HorizontalOptions=\"Center\" BindingContext=\"{Binding InstagramVM}\" \/>\n\n                <\/StackLayout>\n\n                <Button\n                    Grid.Row=\"5\" Grid.ColumnSpan=\"2\"\n                    IsVisible=\"{Binding CanSave}\"\n                    HeightRequest=\"45\"\n                    x:Name=\"SaveButton\"\n                    Style=\"{StaticResource primaryButton}\"\n                    Text=\"        Submit        \"\n                    HorizontalOptions=\"Center\" \n                    Command=\"{Binding SaveCommand}\">\n                <\/Button>\n            <\/Grid>\n            <\/StackLayout>\n        <\/ScrollView>\n\n        <\/StackLayout>\n    <\/ContentPage.Content>\n<\/ContentPage><\/pre>\n
Source: https:\/\/github.com\/davidortinau\/ProfileLayout<\/a><\/p>\n
Note: this page is NOT optimized at all. In fact, you can probably point to many things that ought to be changed.<\/p><\/blockquote>\n
 <\/p>\n
Compound this average layout with the need to create additional container renderers and wrappers for platform renderers, and it\u00a0results\u00a0in more views in your view tree than are necessary, approximately 130 for this example.<\/p>\n
Consider that performing layout requires child-to-parent recursion for measurement and then layout. The deeper\u00a0a UI nests (view within view within view), the more iterations are required. Layout Compression<\/em>\u00a0allows you to specify unnecessary nesting and allows Xamarin.Forms to\u00a0opt-out of creating that layout view.<\/p>\n
Using Xamarin Inspector<\/a> we can view the UI layering of this page\u00a0without<\/strong> Layout Compression<\/em> or Fast Renderers<\/em> enabled:<\/p>\n
\"\"<\/p>\n
Now enable Fast Renderers in the MainActivity.cs:<\/p>\n
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity\n  {\n    protected override void OnCreate(Bundle bundle)\n    {\n      ...\n  \n      global::Xamarin.Forms.Forms.SetFlags(\"FastRenderers_Experimental\");\n      global::Xamarin.Forms.Forms.Init(this, bundle);\n\n      ...\n    }\n  }<\/pre>\n
 <\/p>\n
And then enable Layout Compression<\/em>. To enable Layout Compression<\/em>, identify the layouts (StackLayout, AbsoluteLayout, Grid, RelativeLayout) to compress and add enable it with\u00a0CompressedLayout.IsHeadless=”true”. For example:<\/p>\n
<StackLayout\n            Spacing=\"0\"\n            CompressedLayout.IsHeadless=\"true\"\n            VerticalOptions=\"FillAndExpand\"\n            HorizontalOptions=\"FillAndExpand\">\n...\n<\/StackLayout><\/pre>\n
 <\/p>\n
Now take a look at the\u00a0layout tree layering:<\/p>\n
\"\"<\/p>\n
The improvement in these visuals is obvious. I’ll save you some counting to see how much we were able to flatten the UI.<\/p>\n