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 阅读(...) 评论(...) 编辑 收藏