Xamarin.Forms 3.0的新特性

近期由于工做关系开始使用Xamarin，翻译了两篇国外的介绍3.0新特性的文章，供你们参考。

第一篇文章来自Xamarin官网，原文地址：https://blog.xamarin.com/xamarin-forms-3-0-released/

第二篇文章来自一位MVP：Charlin Agramonte，原文地址：https://xamgirl.com/exploring-new-properties-in-xamarin-forms-3-0/

试试Xamarin.Forms 3.0的最新版本！

咱们很高兴为您带来咱们最新的Xamarin.Forms 3.0版稳定版本。 这是咱们迄今为止发布速度最快，功能最丰富的版本，还包括对Xamarin技术栈的极大改进，例如Visual Studio 2017中最新的XAML IntelliSense体验。

当您升级到3.0时，您会发现新的布局和样式功能，这将改善您构建UI的方式，包括Visual State Manager，Flex布局，样式表和从右至左的支持等等。 除了这些细节的优化外，XAML编译还特别关注构建时间的优化，在某些基准测试中将缩短多达88％。

Xamarin.Forms 3.0

Xamarin.Forms 3.0的发布也包含了重要的社区贡献。 这篇文章包含了每一个功能的简要介绍以及一系列有用的资源，能够帮助您快速完成工做。

Visual State Manager

Visual State Manager在其余XAML平台上是众所周知的，咱们很高兴将其引入到 Xamarin.Forms 3.0中。 您如今能够在XAML或C#中使用声明为布局和控件定义各类状态，并轻松更新您的UI。 这是一个处理纵向和横向切换的相机视图：

要根据方向更改更改捕获按钮，关闭按钮和最后一个图像按钮的位置，请使用Visual State Manager。 首先，在您的页面资源中定义您的状态：

<ContentPage.Resources>
    <Style TargetType="FlexLayout">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList x:Name="CommonStates">
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.Setters>
                            <Setter Property="Direction" Value="Column"/>
                            <Setter Property="Margin">
                                <OnPlatform x:TypeArguments="Thickness" Default="0">
                                    <On Platform="iOS" Value="0,30"/>
                                </OnPlatform>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Horizontal">
                        <VisualState.Setters>
                            <Setter Property="Direction" Value="Row"/>
                            <Setter Property="Margin">
                                <OnPlatform x:TypeArguments="Thickness" Default="0">
                                    <On Platform="iOS" Value="30,0"/>
                                </OnPlatform>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
    <Style TargetType="Image">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList x:Name="CommonStates">
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.Setters>
                            <Setter Property="AbsoluteLayout.LayoutBounds" 
                                    Value="30, 0.5, 40, 40"/>
                            <Setter Property="AbsoluteLayout.LayoutFlags" 
                                    Value="YProportional"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Horizontal">
                        <VisualState.Setters>
                            <Setter Property="AbsoluteLayout.LayoutBounds" 
                                    Value="0.5, 0.9, 40, 40"/>
                            <Setter Property="AbsoluteLayout.LayoutFlags" 
                                    Value="PositionProportional"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>

这里有两个组; 一个用于须要更新的每一个控件，为简单起见，它们共享相同的状态名称。 要更改页面的C#文件中的状态，请使用如下命令进行调用：

VisualStateManager.GoToState(Container, (width > height) ? "Horizontal" : "Portrait");
VisualStateManager.GoToState(LastImage, (width > height) ? "Horizontal" : "Portrait");

为了肯定方向和目标状态，可能须要进行一些计算。

有关如何充分利用Xamarin.Forms中的Visual State Manager的更多信息，请参考如下内容：

• Visual State Manager文档
• Xamarin大学讲座 - Xamarin.Forms 3.0视觉状态管理器

FlexLayout

FlexLayout是一个新布局，由Web开发中的Flexbox启发而来。 就像浏览器能够是任何大小同样，Xamarin.Forms应用程序能够运行的各类屏幕尺寸已经增长了不少。 FlexLayout能够促进实现扁平化，高性能和灵活的用户界面。 FlexLayout很是适合处理布局中的内容分配和间距。 它还使您可以控制布局的方向，对齐方式以及其余属性之间的对齐方式。

如今就开始使用FlexLayout，探索这些全新的资源：

• FlexLayout Documentation
• Xamarin University Lightning Lecture – Xamarin.Forms 3.0 FlexLayout

StyleSheets

层叠样式表（CSS）是FlexLayout的一个天然搭配，具备共同的传统。 使用CSS设计布局风格是与XAML一块儿实现样式的最佳方式。 咱们知道不少人都喜欢使用Web技术的CSS，而且咱们也认可XAML开发人员喜欢在XAML中实现本身的样式。 咱们很是高兴可以为您提供这两种高效的选项！ 使用让你工做效率最高的东西。

样式表能够做为单独的CSS文件添加到您的项目中，也能够内嵌到您的资源中。 可使用各类经常使用选择器组合您的样式。

有关使用CSS对FlexLayouts和其余应用程序进行样式设置的更多信息：

• Browse our User Interface Documentation
• Sign up for the Xamarin University Lightning Lecture – Xamarin.Forms 3.0 CSS

Right-To-Left Localization

当支持从右向左流动的阿拉伯语和希伯来语等语言时，您如今能够在任何VisualElement中轻松使用FlowDirection属性，而无需像之前使用过的那样使用特定于平台的选项或效果。 由于您已经经过访问Device.FlowDirection知道了设备的方向，因此更新您的UI能够很简单，只需将它添加到XAML页面的头部便可：

FlowDirection="{x:Static Device.FlowDirection}"

有关更新应用程序以支持从右至左布局的更多信息，请参考如下内容：

• Right-To-Left Localization in Xamarin.Forms Blog
• Localization Documentation
• Xamarin University Lightning Lecture – Xamarin.Forms 3.0 Right-to-Left

Community Contributions

Xamarin.Forms 3.0还以咱们的专业社区提供的一些重要贡献而自豪，其中包括“F100”合做来补充一些内容，而且会继续在Xamarin.Forms中获得支持。 这个代号表明了改善Xamarin.Forms中100个小缺陷的挑战。 请继续向 GitHub project board作出贡献！

也许最出色的贡献是还处在预览版的Xamarin.Forms与WPF合做的功能。 这使您能够经过Native Forms将Xamarin.Forms UI带入现有的WPF应用程序，并为旧版Windows构建您的Xamarin.Forms应用程序。 有关此新技术 的其余信息：

• WPF Documentation
• Xamarin University Lightning Lecture – Xamarin.Forms 3.0 WPF
• WPF Progress Status 

Update Today and Start Exploring!

Xamarin.Forms 3.0现已在NuGet上提供。 请务必阅读包含大量错误修复的完整版本说明。

请fork Conference Camera prototype 应用程序，它演示了全部这些惊人的功能，并包括一些很棒的特性，来自Azure认知服务的自定义视觉集成！

喜欢这篇文章？ 在Xamarin论坛上讨论它！

 

 

探索Xamarin Forms 3.0中的新特性

随着Xamarin Forms 3.0的发布，每一个人都在谈论这些新功能：Flex Layout，css，Visual State Manager和Right to Left。 在这篇文章中，咱们不会讨论它们，由于有不少文章已经讨论过了。（如上面这个）。

咱们要讨论的是一些新的特性，在这个版本发布以前，若是要实现这些特性的话，须要使用自定义渲染器或Behavior。

1-Max Length

在开发时，您须要限制Entry的文本长度，在达到限制时不容许用户继续写入。 为了解决这个问题，你可能使用了一个Behavior。

如今，您能够在Entry中使用MaxLength属性。 只需添加该属性并设置最大数量便可。

结果是：

2-Progress bar Color

使用进度条时，咱们没法更改进度栏颜色，所以咱们只能使用默认颜色，所以为了设置进度条的颜色，要使用原生APIs，使用自定义渲染器或效果。

如今咱们可使用ProgressColor属性：

结果是：

3-Picker Font Family

如今你能够给Picker设置一个字体（不再须要使用自定义渲染器了）。

结果是：

4-ListView full width separators (iOS)

默认状况下，iOS列表在左侧有一个边距，若是设计须要咱们删除这个边距，可能更简单的方法是隐藏行分隔符并使用BoxView添加一个新行。

使用最新版本，并得益于平台特性，如今真的很容易。

只需添加iOS引用：

 xmlns:ios=“clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core“

而后将该属性添加到您的列表中ios：ListView.SeparatorStyle =“FullWidth”

结果是：

5-Ime Options (Android)

此功能用于在Entry控件具备焦点时自定义Android键盘上的返回键。

默认的是这样的：

若是咱们想改变它，能够经过使用属性ImeOption的平台特性，来作相似以前iOS上的操做。

只需添加Android引用：

xmlns:android=“clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core“

而后将属性添加到您的Entry控件，android：Entry.ImeOptions =“Search”

结果是：

如下是如何在后面的代码中执行以及可使用的其余ImeFlags：

 

此功能将扩展到支持v3.1.0中的iOS和UWP，这里有更多信息。

我刚刚提到了我最喜欢的几个功能，但还有更多有用的特性。 如需更多信息，请点击此处查看发布说明。

享受编码吧！🙂