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的更多信息，请参考以下内容：

FlexLayout

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


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

StyleSheets

层叠样式表（CSS）是FlexLayout的一个自然搭配，具有共同的传统。 使用CSS设计布局风格是与XAML一起实现样式的最佳方式。 我们知道很多人都喜欢使用Web技术的CSS，并且我们也承认XAML开发人员喜欢在XAML中实现自己的样式。 我们非常高兴能够为您提供这两种高效的选项！ 使用让你工作效率最高的东西。

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

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

Right-To-Left Localization

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

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

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

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应用程序。 有关此新技术 的其他信息：

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，这里有更多信息。

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

享受编码吧！🙂

 

posted @ 2018-06-22 08:39  yan_xiaodi  阅读(2841)  评论(6)  编辑  收藏  举报