在Xamarin.Forms 2.5.0预发布布中探索3大事情

在过去一年中，我们一直在研究几个“大事”，使您能够在更多平台上创建更多性能更强的应用程序。 随着我们最新的稳定版本2.4.0，我们在Android上引入了性能优化的渲染器，绰号“快速渲染器”。 虽然更快的平台渲染器是一个明显的胜利，但您真正开始看到使用它们与新功能相结合的巨大收获，在2.5.0上推出，称为布局压缩。 不要被那些以性能为重点的提升黯然失色，我们也在此预览中发布表单嵌入。 我们很高兴将这些改进放在我们的公共路线图的页面上，并把它们放在你手中。 请阅读有关如何从这些梦幻般的改进开始受益的详细信息等等。

大事1：布局压缩

在优化性能布局时，无论是为了更平滑的动画还是渲染速度，您都可以快速了解平面视图层次结构的价值。 以此页面为例：

点击(此处)折叠或打开 

1. ?xml version="1.0" encoding="utf-8"?>
   
2. ContentPage
   
3.     xmlns="http://xamarin.com/schemas/2014/forms"
   
4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   
5.     xmlns:local="clr-namespace:ProfileLayout"
   
6.     x:Class="ProfileLayout.ProfileLayoutPage"
   
7.     xmlns:views="using:ProfileLayout.Views"
   
8.     xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
   
9.     xmlns:converters="using:ProfileLayout.Converters;"
   
10.     Title="Profile"
    
11.     BackgroundColor="#F3F3F3">
    
12.     ContentPage.Resources>
    
13.         ResourceDictionary>
    
14.             converters:InvertedBoolConverter x:Key="InvertedBoolConverter"/>
    
15.     
    
16.             !-- Global Colors -->
    
17.             Color
    
18.                 x:Key="primaryColor">#303030/Color>
    
19.             Color
    
20.                 x:Key="secondaryColor">#C9AE98/Color>
    
21.             Color
    
22.                 x:Key="validationColor">#FF3F56/Color>
    
23.             Color
    
24.                 x:Key="callToActionColor">#4E8B4F/Color>
    
25.             Color
    
26.                 x:Key="accentColor">White/Color>
    
27.             Color
    
28.                 x:Key="darkAccentColor">#7c6a5c/Color>
    
29.             !-- Global Sizes -->
    
30.             x:Double
    
31.                 x:Key="mediumTextSize">20/x:Double>x:Double
    
32.                 x:Key="smallTextSize">14/x:Double>x:Double
    
33.                 x:Key="standardPadding">10/x:Double>
    
34.  
    
35.             !-- Global Element Styles -->
    
36.             Style
    
37.                 TargetType="Entry">
    
38.                 Setter
    
39.                     Property="HeightRequest"
    
40.                     Value="44" />
    
41.                 Setter
    
42.                     Property="TextColor"
    
43.                     Value="{StaticResource darkAccentColor}" />
    
44.             /Style>
    
45.  
    
46.             Style
    
47.                 TargetType="NavigationPage">Setter
    
48.                     Property="BarBackgroundColor"
    
49.                     Value="{StaticResource primaryColor}" />/Style>Style
    
50.                 TargetType="Frame">Setter
    
51.                     Property="BackgroundColor"
    
52.                     Value="{StaticResource accentColor}" />Setter
    
53.                     Property="Padding"
    
54.                     Value="{StaticResource standardPadding}" />Setter
    
55.                     Property="HasShadow"
    
56.                     Value="False" />Setter
    
57.                     Property="OutlineColor"
    
58.                     Value="{StaticResource secondaryColor}" />/Style>!-- Label Styles -->Style
    
59.                 x:Key="switchLabel"
    
60.                 TargetType="Label">Setter
    
61.                     Property="TextColor"
    
62.                     Value="#999999" />Setter
    
63.                     Property="VerticalOptions"
    
64.                     Value="Center" />Setter
    
65.                     Property="HorizontalOptions"
    
66.                     Value="FillAndExpand" />/Style>!-- Button Styles -->Style
    
67.                 x:Key="callToActionButton"
    
68.                 TargetType="Button">Setter
    
69.                     Property="BackgroundColor"
    
70.                     Value="{StaticResource callToActionColor}" />Setter
    
71.                     Property="TextColor"
    
72.                     Value="{StaticResource accentColor}" />Setter
    
73.                     Property="FontSize"
    
74.                     Value="{StaticResource mediumTextSize}" />/Style>
    
75.             Style
    
76.                 x:Key="primaryButton"
    
77.                 TargetType="Button">
    
78.                 Setter
    
79.                     Property="BackgroundColor"
    
80.                     Value="{StaticResource primaryColor}" />
    
81.                 Setter
    
82.                     Property="TextColor"
    
83.                     Value="{StaticResource accentColor}" />
    
84.                 Setter
    
85.                     Property="FontSize"
    
86.                     Value="{StaticResource smallTextSize}" />/Style>
    
87.  
    
88.             Style
    
89.                 x:Key="nakedButton"
    
90.                 TargetType="Button">
    
91.                 Setter
    
92.                     Property="BackgroundColor"
    
93.                     Value="Transparent" />
    
94.                 Setter
    
95.                     Property="TextColor"
    
96.                     Value="{StaticResource accentColor}" />
    
97.                 Setter
    
98.                     Property="BorderColor"
    
99.                     Value="Transparent"/>
    
100.                 Setter
     
101.                     Property="BorderWidth"
     
102.                     Value="0"/>
     
103.                 Setter
     
104.                     Property="FontSize"
     
105.                     Value="{StaticResource mediumTextSize}" />/Style>
     
106.  
     
107.             Style
     
108.                 x:Key="whiteClearButton"
     
109.                 TargetType="Button">
     
110.                 Setter
     
111.                     Property="BackgroundColor"
     
112.                     Value="Transparent" />
     
113.                 Setter
     
114.                     Property="BorderColor"
     
115.                     Value="{StaticResource accentColor}" />
     
116.                 Setter
     
117.                     Property="BorderWidth"
     
118.                     Value="1" />
     
119.                 Setter
     
120.                     Property="TextColor"
     
121.                     Value="{StaticResource accentColor}" />
     
122.                 Setter
     
123.                     Property="FontSize"
     
124.                     Value="{StaticResource smallTextSize}" />
     
125.             /Style>
     
126.  
     
127.             Style
     
128.                 x:Key="secondaryButton"
     
129.                 TargetType="Button">Setter
     
130.                     Property="BackgroundColor"
     
131.                     Value="{StaticResource secondaryColor}" />Setter
     
132.                     Property="TextColor"
     
133.                     Value="{StaticResource accentColor}" />Setter
     
134.                     Property="FontSize"
     
135.                     Value="{StaticResource smallTextSize}" />Setter
     
136.                     Property="FontAttributes"
     
137.                     Value="Bold" />/Style>Style
     
138.                 x:Key="footerButton"
     
139.                 TargetType="Button">Setter
     
140.                     Property="BackgroundColor"
     
141.                     Value="{StaticResource secondaryColor}" />Setter
     
142.                     Property="TextColor"
     
143.                     Value="{StaticResource accentColor}" />Setter
     
144.                     Property="FontSize"
     
145.                     Value="{StaticResource smallTextSize}" />Setter
     
146.                     Property="FontAttributes"
     
147.                     Value="Bold" />Setter
     
148.                     Property="HorizontalOptions"
     
149.                     Value="FillAndExpand" />/Style>
     
150.         /ResourceDictionary>
     
151.     /ContentPage.Resources>
     
152.     ContentPage.Padding>
     
153.         OnPlatform x:TypeArguments="Thickness" iOS="0,0,0,0" Android="0,0,0,0" />
     
154.     /ContentPage.Padding>
     
155.  
     
156.     ContentPage.Content>
     
157.         
     
158.         StackLayout
     
159.             Spacing="0"
     
160.             VerticalOptions="FillAndExpand"
     
161.             HorizontalOptions="FillAndExpand">
     
162.             AbsoluteLayout
     
163.                 BackgroundColor="#909090"
     
164.                 HorizontalOptions="FillAndExpand"
     
165.                 HeightRequest="60">
     
166.                 AbsoluteLayout.Padding>
     
167.                     OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0,0,0,0" />
     
168.                 /AbsoluteLayout.Padding>
     
169.                 Button
     
170.                     Margin="10,10"
     
171.                     FontSize="12"
     
172.                     Text="Cancel"
     
173.                     BackgroundColor="Transparent"
     
174.                     Command="{Binding CancelCommand}"
     
175.                     Style="{StaticResource nakedButton}"/>
     
176.                 Image
     
177.                     AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.36, 0.7"
     
178.                     AbsoluteLayout.LayoutFlags="All"
     
179.                     BackgroundColor="Transparent"
     
180.                     HeightRequest="36"
     
181.                     Source="microsoft_gray.png" />
     
182.                 Button
     
183.                     IsVisible="{Binding IsLoggedIn}"
     
184.                     Margin="10,10"
     
185.                     BackgroundColor="Transparent"
     
186.                     AbsoluteLayout.LayoutBounds="1, 0, AutoSize, AutoSize"
     
187.                     AbsoluteLayout.LayoutFlags="PositionProportional"
     
188.                     FontSize="12"
     
189.                     Text="Logout"
     
190.                     Command="{Binding LogoutCommand}"
     
191.                     Style="{StaticResource nakedButton}"/>
     
192.             /AbsoluteLayout>
     
193.  
     
194.             Label
     
195.                 HorizontalOptions="FillAndExpand"
     
196.                 BackgroundColor="#D1D1D1"
     
197.                 HeightRequest="22"
     
198.                 TextColor="#000000"
     
199.                 FontSize="14"
     
200.                 HorizontalTextAlignment="Center"
     
201.                 Text="{Binding Title}"/>
     
202.  
     
203.             ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
     
204.  
     
205.             StackLayout
     
206.             Spacing="0"
     
207.             VerticalOptions="FillAndExpand"
     
208.             HorizontalOptions="FillAndExpand">
     
209.  
     
210.                 Button
     
211.                     Margin="0,10,0,0"
     
212.                     IsVisible="{Binding CanEdit}"
     
213.                     Text=" EDIT "
     
214.                     Style="{StaticResource primaryButton}"
     
215.                     BackgroundColor="#9B9B9B"
     
216.                     HeightRequest="35"
     
217.                     HorizontalOptions="Center"
     
218.                     Command="{Binding ToggleEditModeCommand}"
     
219.                     />
     
220.  
     
221.                 Button
     
222.                     Margin="0,10,0,0"
     
223.                     IsVisible="{Binding IsEditing}"
     
224.                     Text=" EDITING "
     
225.                     BackgroundColor="#9B9B9B"
     
226.                     Style="{StaticResource primaryButton}"
     
227.                     HeightRequest="35"
     
228.                     HorizontalOptions="Center"
     
229.                     Command="{Binding ToggleEditModeCommand}"
     
230.                 />
     
231.  
     
232.             StackLayout
     
233.                 Margin="20"
     
234.                 Spacing="20"
     
235.                 HorizontalOptions="FillAndExpand"
     
236.                 Orientation="Horizontal">
     
237.  
     
238.                 StackLayout
     
239.                     Spacing="10"
     
240.                     Orientation="Vertical">
     
241.  
     
242.                         controls:CircleImage
     
243.                             x:Name="ProfilePic"
     
244.                             Source="david.jpg"
     
245.                             BorderThickness="3"
     
246.                             BorderColor="#9B9B9B"
     
247.                             Aspect="AspectFill">
     
248.                             controls:CircleImage.WidthRequest>
     
249.                                 OnPlatform x:TypeArguments="x:Double"
     
250.                                   iOS="104"
     
251.                                   Android="104"
     
252.                                   WinPhone="104"/>
     
253.                             /controls:CircleImage.WidthRequest>
     
254.                             controls:CircleImage.HeightRequest>
     
255.                                 OnPlatform x:TypeArguments="x:Double"
     
256.                                   iOS="104"
     
257.                                   Android="104"
     
258.                                   WinPhone="104"/>
     
259.                             /controls:CircleImage.HeightRequest>
     
260.                         /controls:CircleImage>
     
261.  
     
262.                         Button
     
263.                             IsVisible="{Binding CanSave}"
     
264.                             Text="Change Photo"
     
265.                             Style="{StaticResource nakedButton}"
     
266.                             FontSize="12"
     
267.                             BorderColor="Transparent"
     
268.                             BorderWidth="0"
     
269.                             BackgroundColor="Transparent"
     
270.                             TextColor="#303030"
     
271.                         >
     
272.                         /Button>
     
273.                     /StackLayout>
     
274.  
     
275.                 StackLayout
     
276.                     Spacing="10"
     
277.                     HorizontalOptions="FillAndExpand"
     
278.                     Orientation="Vertical">
     
279.  
     
280.  
     
281.                     Entry
     
282.                         IsVisible="{Binding IsLoggedIn, Converter={StaticResource InvertedBoolConverter}}"
     
283.                         HorizontalOptions="FillAndExpand"
     
284.                         Placeholder="Username"
     
285.                         Text="{Binding Username}"
     
286.                         x:Name="UsernameEntry" />
     
287.  
     
288.                     Label
     
289.                         IsVisible="{Binding IsLoggedIn}"
     
290.                         Text="{Binding Username}"
     
291.                         TextColor="#303030"
     
292.                         FontSize="12"
     
293.                         FontAttributes="Bold"
     
294.                         HeightRequest="40"
     
295.                         VerticalTextAlignment="Center"
     
296.                     />
     
297.  
     
298.                     Entry
     
299.                         IsEnabled="{Binding CanSave}"
     
300.                         x:Name="EmailEntry"
     
301.                         HorizontalOptions="FillAndExpand"
     
302.                         Placeholder="Email"
     
303.                         Text="{Binding UserEmail}" />
     
304.  
     
305.                 /StackLayout>
     
306.             /StackLayout>
     
307.  
     
308.             Grid Margin="20, 0, 20, 0">
     
309.                 Grid.RowDefinitions>
     
310.                     RowDefinition Height="53" />
     
311.                     RowDefinition Height="53" />
     
312.                     RowDefinition Height="60" />
     
313.                     RowDefinition Height="28" />
     
314.                     RowDefinition Height="*" />
     
315.                     RowDefinition Height="45" />
     
316.                 /Grid.RowDefinitions>
     
317.  
     
318.                 Grid.ColumnDefinitions>
     
319.                     ColumnDefinition Width="1*"/>
     
320.                     ColumnDefinition Width="1*"/>
     
321.                 /Grid.ColumnDefinitions>
     
322.  
     
323.                 Entry
     
324.                     Grid.Row="0" Grid.Column="0"
     
325.                     IsEnabled="{Binding CanSave}"
     
326.                     x:Name="FirstNameEntry"
     
327.                     HorizontalOptions="FillAndExpand"
     
328.                     Placeholder="First Name"
     
329.                     Text="{Binding FirstName}" />
     
330.  
     
331.                 Entry
     
332.                     Grid.Row="0" Grid.Column="1"
     
333.                     IsEnabled="{Binding CanSave}"
     
334.                     x:Name="LastNameEntry"
     
335.                     HorizontalOptions="FillAndExpand"
     
336.                     Placeholder="Last Name"
     
337.                     Text="{Binding LastName}" />
     
338.                 
     
339.                 Entry
     
340.                     Grid.Row="1" Grid.Column="0"
     
341.                     IsEnabled="{Binding CanSave}"
     
342.                     x:Name="PasswordEntry"
     
343.                     IsPassword="true"
     
344.                     HorizontalOptions="FillAndExpand"
     
345.                     Placeholder="Password"
     
346.                     Text="{Binding UserPassword}" />
     
347.  
     
348.                 Entry
     
349.                     Grid.Row="1" Grid.Column="1"
     
350.                     IsEnabled="{Binding CanSave}"
     
351.                     x:Name="ConfirmPasswordEntry"
     
352.                     IsPassword="true"
     
353.                     HorizontalOptions="FillAndExpand"
     
354.                     Placeholder="Confirm Password"
     
355.                     Text="{Binding ConfirmUserPassword, Mode=TwoWay}" />
     
356.  
     
357.  
     
358.                 Label
     
359.                     Grid.Row="2" Grid.ColumnSpan="2"
     
360.                     IsEnabled="{Binding CanSave}"
     
361.                     Margin="10"
     
362.                     Text="Password must be 8 digits long and include 1 number and 1 capital letter."
     
363.                     TextColor="#303030"
     
364.                     FontSize="12"
     
365.                     HorizontalOptions="FillAndExpand"
     
366.                 />
     
367.  
     
368.                 views:StrengthIndicators
     
369.                     IsEnabled="{Binding CanSave}"
     
370.                     Strength="{Binding PasswordStrength}"
     
371.                     HorizontalOptions="Center"
     
372.                     Grid.Row="3" Grid.ColumnSpan="2" />
     
373.  
     
374.                 StackLayout
     
375.                     Margin="0,20,0,40"
     
376.                     Grid.Row="4" Grid.ColumnSpan="2"
     
377.                     IsVisible="{Binding IsLoggedIn}">
     
378.  
     
379.                     BoxView
     
380.                         Margin="30,10"
     
381.                         BackgroundColor="#9B9B9B"
     
382.                         HorizontalOptions="FillAndExpand"
     
383.                         HeightRequest="1"
     
384.                         />
     
385.  
     
386.                     Label
     
387.                         Text="Connected Accounts:"
     
388.                         HorizontalOptions="Center"
     
389.                         TextColor="#303030"
     
390.                         FontSize="12"/>
     
391.  
     
392.                     views:ConnectSocialButtonView
     
393.                         HorizontalOptions="Center"
     
394.                         BindingContext="{Binding FacebookVM}" />
     
395.                 
     
396.                     views:ConnectSocialButtonView
     
397.                         HorizontalOptions="Center" BindingContext="{Binding TwitterVM}" />
     
398.  
     
399.                     views:ConnectSocialButtonView
     
400.                     HorizontalOptions="Center" BindingContext="{Binding YouTubeVM}" />
     
401.                 
     
402.                     views:ConnectSocialButtonView
     
403.  
     
404.                     HorizontalOptions="Center" BindingContext="{Binding InstagramVM}" />
     
405.  
     
406.                 /StackLayout>
     
407.  
     
408.                 Button
     
409.                     Grid.Row="5" Grid.ColumnSpan="2"
     
410.                     IsVisible="{Binding CanSave}"
     
411.                     HeightRequest="45"
     
412.                     x:Name="SaveButton"
     
413.                     Style="{StaticResource primaryButton}"
     
414.                     Text=" Submit "
     
415.                     HorizontalOptions="Center"
     
416.                     Command="{Binding SaveCommand}">
     
417.                 /Button>
     
418.             /Grid>
     
419.             /StackLayout>
     
420.         /ScrollView>
     
421.  
     
422.         /StackLayout>
     
423.     /ContentPage.Content>
     
424. /ContentPage>

源码： https://github.com/davidortinau/ProfileLayout

注意：此页面根本没有优化。 事实上，你可能会指出许多应该改变的事情。

 

复合这个平均布局，需要为平台渲染器创建额外的容器渲染器和包装器，并且在视图树中产生比所需的更多视图，大约130个此示例。

考虑到执行布局需要用于测量和布局的子对象递归。 UI越深（视图中的视图），需要的迭代越多。 布局压缩允许您指定不必要的嵌套，并允许Xamarin.Forms选择不创建该布局视图。

使用Xamarin Inspector，我们可以查看此页面的UI分层，无需布局压缩或启用快速渲染器：

现在在MainActivity.cs中启用快速渲染器：

点击(此处)折叠或打开

1. public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
   
2.   {
   
3.     protected override void OnCreate(Bundle bundle)
   
4.     {
   
5.       ...
   
6.   
   
7.       global::Xamarin.Forms.Forms.SetFlags("FastRenderers_Experimental");
   
8.       global::Xamarin.Forms.Forms.Init(this, bundle);
   
9.  
   
10.       ...
    
11.     }
    
12.   }

然后启用布局压缩。 要启用布局压缩，请标识要压缩和添加的布局（StackLayout，AbsoluteLayout，Grid，RelativeLayout），并使用CompressedLayout.IsHeadless =“true”启用它。 例如：

点击(此处)折叠或打开

1. StackLayout
   
2.             Spacing="0"
   
3.             CompressedLayout.IsHeadless="true"
   
4.             VerticalOptions="FillAndExpand"
   
5.             HorizontalOptions="FillAndExpand">
   
6. ...
   
7. /StackLayout>

现在看看布局树分层：

这些视觉效果的改善是显而易见的。 我会保存一些计数，看看我们能够平铺UI。

• 默认值：130渲染器
• 布局压缩：111渲染
• 布局压缩+快速渲染器：70个渲染器

这个问题自然就成了，“这使得我的应用程序能加快多少？”这取决于您的视图的复杂性，所使用的操作系统的版本以及运行的设备而有所不同。 虽然每个人都受益，但我们预计会看到旧设备的最大差异。

因为布局压缩消除了布局的渲染器，请注意，您以前希望成为该渲染器一部分的任何内容将不再存在：

• 背景颜色
• 手势
• 转换
• 等等

版式压缩可在iOS和Android上使用。

大事2：表单嵌入

在2017年，我们展示了采用Xamarin.Forms ContentPage并将其嵌入到Xamarin.iOS，Xamarin.Android和UWP应用程序中。即使这是一个非常早期的预览，它并没有阻止许多人探索可能性。从那时起，我们一直在清理实施，解决我们早期测试中发现的问题（谢谢早期采用者！），并验证我们的新功能的用例。

你可能想要做什么？

• 使用现有的Xamarin.Forms页面，并将其用于不使用Xamarin.Forms的另一个Xamarin iOS，Android或UWP应用程序。
• 使用Xamarin.Forms启动项目，以提供原型的速度和轻松性，然后逐页迁移到Xamarin本机。
• 将共享页面添加到任何现有的改变整个架构的Xamarin应用程序。

这只是开始。现在，是否从Xamarin.Forms开始是毫无疑问的。使用Xamarin.Forms到处都适用于您的应用程序！

大事3：改进了macOS桌面支持

Xamarin.Forms在移动领域长大，扩展到桌面模式是一个过程。 在Xamarin.Forms 2.4.0中，我们介绍了macOS支持的预览，我已经看到一些令人印象深刻的应用程序。 您的反馈有助于确定我们最需要增加支持的地方，所以在2.5.0中你会得到：

应用程式退出

从应用程序的任何地方，您可以调用Application.Current.Quit（）退出。

菜单

桌面应用程序可以处理与触摸或移动应用程序不同的菜单 在此预览中，您可以在右键单击添加上下文菜单，并将菜单附加到应用程序的顶层，以便它们显示在macOS的顶部栏中。

例如，下面我们在C＃中构建一个菜单，并将其附加到我们视图中的Label。 右键单击标签将打开上下文菜单。

点击(此处)折叠或打开

1. var mainMenu = new Menu();
   
2. var locationMenu = new Menu { Text = “Location” };
   
3. var changeItem = new MenuItem
   
4. {
   
5. Text = “Change”,
   
6. Command = new Command((obj) =>
   
7. {
   
8. Navigation.PushModalAsync(new LocationEntryPage());
   
9. })
   
10. };
    
11. locationMenu.Items.Add(changeItem);
    
12.  
    
13. var refreshItem = new MenuItem { Text = "Refresh", Command = _vm.ReloadCommand }; MenuItem.SetAccelerator(refreshItem, Accelerator.FromString("cmd+r")); locationMenu.Items.Add(refreshItem); mainMenu.Add(locationMenu);

源码： https://github.com/davidortinau/weather-app/tree/macos-and-location

加速器

加速器，也称为关键修饰符，允许您添加键盘快捷键来激活菜单项。 在这个例子中，我们将cmd + R加速器添加到刷新菜单项。

点击(此处)折叠或打开

1. MenuItem.SetAccelerator(refreshItem, Accelerator.FromString("cmd+r"));

然后将加速器添加到顶级菜单项，并可从应用程序的任何位置使用。

今天预览！

Xamarin.Forms 2.5.0.19271现在在NuGet上可用。 要更新，请打开NuGet软件包管理器，启用预发布选项，并更新所有项目引用。

新版本号码是什么？
Our builds are now being generated from Visual Studio Team Services which simply generates a different build number.我们的构建现在是从Visual Studio Team Services生成的，它只生成不同的版本号。