Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms組件套包，包含最快的圖表和網(wǎng)格。

點(diǎn)擊下載Essential Studio for Xamarin正式版

Google的Material Design概念徹底改變了Android應(yīng)用程序的開發(fā)方式。通過遵循提供的有關(guān)如何設(shè)計(jì)UI的準(zhǔn)則，應(yīng)用程序變得超級交互，具有令人印象深刻且富有創(chuàng)意的設(shè)計(jì)。

Xamarin.Forms充分利用了該指南，并為其iOS和Android平臺中3.6中最常用的框架控件提供了Material Design支持。這種支持不僅為應(yīng)用程序提供了漂亮的外觀，而且還為iOS和Android平臺提供了統(tǒng)一的外觀。在應(yīng)用程序中啟用它時，所有受支持的視圖均以統(tǒng)一的外觀呈現(xiàn)。

盡管如此，僅僅擁有框架控件的新功能總是不夠的。我們了解這一點(diǎn)，并確保Syncfusion控件始終與Xamarin.Forms的這些新功能兼容。因此，我們在2019年第3版的組件中對此提供了內(nèi)置支持。我們還對材料設(shè)計(jì)進(jìn)行了很多改進(jìn)。我將引導(dǎo)您逐步了解如何在應(yīng)用程序中啟用此支持，并向您展示其在Xamarin.Forms和Syncfusion組件中進(jìn)行的UI增強(qiáng)。

如何設(shè)置可視化屬性

在這篇文章中，我們將不再關(guān)注所需的配置以及Visual屬性的工作方式，因?yàn)楸疚囊呀?jīng)對此進(jìn)行了詳細(xì)討論。因此，讓我向您展示如何設(shè)置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 =“默認(rèn)” /></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>

您可以看到它對按鈕的影響。此外，Visual是可以設(shè)置為元素或其父元素或頁面本身的屬性。由于這個原因，你可以設(shè)置可視作為材料的根元素，并覆蓋其作為默認(rèn)，如果需要一個特定的元素。

<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>

支持Syncfusion控件

材料設(shè)計(jì)的最重要方面之一是所有UI元素都應(yīng)具有響應(yīng)能力。因此，我們在適用的控件中添加了波紋和突出效果。如果要以任何視圖實(shí)現(xiàn)此效果，請使用我們的新的Effect View控件，該控件于2019年第3卷中引入。

注意：對于Calendar控件，我們已將默認(rèn)外觀更改為此改進(jìn)的Material設(shè)計(jì)，以使UI更具吸引力。

讓我向您展示為Syncfusion控件所做的Material設(shè)計(jì)改進(jìn)。以下圖像是在iOS或Android平臺上拍攝的。但是，iOS和Android平臺都將具有統(tǒng)一的UI。

日歷和時間表

Accordion，ListView，Expander和TreeView

選擇器和彈出窗口

按鈕，單選按鈕，復(fù)選框和芯片

開關(guān)，范圍滑塊和選項(xiàng)卡式視圖

輸入組件

將Visual屬性設(shè)置為Material時，前面列出的控件將自動更改為Material design 。但是，以下輸入組件將被我們的“文本輸入布局”控件包裝，以在“材質(zhì)”設(shè)計(jì)中進(jìn)行渲染。

• 數(shù)據(jù)表

• 數(shù)值輸入

• Masked Entry

• 自動完成

• 組合框

• NumericUpDown（自2019 v3起）

除了現(xiàn)有控件外，我們還在2019 v3 發(fā)行版中添加了對NumericUpDown的支持。

結(jié)論

在此文章中，我們介紹了Xamarin.Forms引入的Material設(shè)計(jì)支持以及如何通過將Visual屬性設(shè)置為Material來實(shí)現(xiàn)它。此外，我們已經(jīng)看到Syncfusion Xamarin控件對Material UI進(jìn)行了改進(jìn)，并且設(shè)計(jì)提供了在iOS和Android平臺上實(shí)現(xiàn)統(tǒng)一外觀的功能。我們將根據(jù)即將發(fā)布的版本中的要求繼續(xù)改進(jìn)UI。

想要購買該產(chǎn)品正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊