Essential Studio 2019v3功能解读:材料设计在Syncfusion组件中进行的UI增强

翻译|使用教程|编辑:莫成敏|2019-11-19 15:29:59.717|阅读 23 次

概述:我们对材料设计进行了很多改进。我将引导您逐步了解如何在应用程序中启用此支持,并向您展示其在Xamarin.Forms和Syncfusion组件中进行的UI增强。

Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。

点击下载Essential Studio for Xamarin正式版


Google的Material Design概念彻底改变了Android应用程序的开发方式。通过遵循提供的有关如何设计UI的准则,应用程序变得超级交互,具有令人印象深刻且富有创意的设计。

Xamarin.Forms充分利用了该指南,并为其iOS和Android平台中3.6中最常用的框架控件提供了Material Design支持。这种支持不仅为应用程序提供了漂亮的外观,而且还为iOS和Android平台提供了统一的外观。在应用程序中启用它时,所有受支持的视图均以统一的外观呈现。

尽管如此,仅仅拥有框架控件的新功能总是不够的。我们了解这一点,并确保Syncfusion控件始终与Xamarin.Forms的这些新功能兼容。因此,我们在2019年第3版的组件中对此提供了内置支持。我们还对材料设计进行了很多改进。我将引导您逐步了解如何在应用程序中启用此支持,并向您展示其在Xamarin.Forms和Syncfusion组件中进行的UI增强。

如何设置可视化属性

在这篇文章中,我们将不再关注所需的配置以及Visual属性的工作方式,因为本文已经对此进行了详细讨论。因此,让我向您展示如何设置Visual。

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">    <StackLayout Spacing =“ 50” VerticalOptions =“ Center” HorizontalOptions =“ Center”></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        <Button Text =“默认” /></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        <Button Text =“ Material” Visual =“ Material” /></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    </ StackLayout></font></font><font></font>

Essential Studio 2019v3功能解读:材料设计在Syncfusion组件中进行的UI增强

您可以看到它对按钮的影响。此外,Visual是可以设置为元素或其父元素或页面本身的属性。由于这个原因,你可以设置可视作为材料的根元素,并覆盖其作为默认,如果需要一个特定的元素。

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">    <StackLayout Visual =“ Material” Spacing =“ 50” VerticalOptions =“ Center” HorizontalOptions =“ Center”></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        <ProgressBar Progress =“ 0.5” ProgressColor =“ Black” WidthRequest =“ 200” /></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        <ProgressBar Progress =“ 0.5” ProgressColor =“ Black” WidthRequest =“ 200” Visual =“ Default” /></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    </ StackLayout></font></font><font></font>

Essential Studio 2019v3功能解读:材料设计在Syncfusion组件中进行的UI增强

支持Syncfusion控件

材料设计的最重要方面之一是所有UI元素都应具有响应能力。因此,我们在适用的控件中添加了波纹和突出效果。如果要以任何视图实现此效果,请使用我们的新的Effect View控件,该控件于2019年第3卷中引入。

注意:对于Calendar控件,我们已将默认外观更改为此改进的Material设计,以使UI更具吸引力。

让我向您展示为Syncfusion控件所做的Material设计改进。以下图像是在iOS或Android平台上拍摄的。但是,iOS和Android平台都将具有统一的UI。

日历和时间表

Accordion,ListView,Expander和TreeView

选择器和弹出窗口

按钮,单选按钮,复选框和芯片

开关,范围滑块和选项卡式视图

输入组件

将Visual属性设置为Material时,前面列出的控件将自动更改为Material design 。但是,以下输入组件将被我们的“文本输入布局”控件包装,以在“材质”设计中进行渲染。

  • 数据表

  • 数值输入

  • Masked Entry

  • 自动完成

  • 组合框

  • NumericUpDown(自2019 v3起)

除了现有控件外,我们还在2019 v3 发行版中添加了对NumericUpDown的支持。

Essential Studio 2019v3功能解读:材料设计在Syncfusion组件中进行的UI增强

结论

在此文章中,我们介绍了Xamarin.Forms引入的Material设计支持以及如何通过将Visual属性设置为Material来实现它。此外,我们已经看到Syncfusion Xamarin控件对Material UI进行了改进,并且设计提供了在iOS和Android平台上实现统一外观的功能。我们将根据即将发布的版本中的要求继续改进UI。


想要购买该产品正版授权,或了解更多产品信息请点击“咨询在线客服”

850×68.png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Syncfusion https://www.syncfusion.com/blogs/post/material-design-xamarin-forms-controls.aspx

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Essential Studio for Xamarin

全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat