[譯文] 有 5 項關於 Xamarin.Forms 4.5 的驚豔事要來說說!

原文出處:
https://devblogs.microsoft.com/xamarin/xamarin-forms-4-5


話說每次的 Xamarin.Forms 新版發佈是都有很多特別的改進之處,但今天我們除了要說 Xamarin.Forms 4.5 可供正式取得使用之外,還要告訴各位幾項有關能使用 AndroidX 與更便捷的 UI 並反饋到開發實務上的事情。

就讓我們來看看以下這幾個 Xamarin.Forms 4.5 令人特別驚豔的事吧!


One: AndroidX

在今 (2020) 年的 2 月 14 日,我們發佈了 Google 推出的最新 AndroidX library 所適用的 Nuget 套件。這一個系列的 Library 取代了過去我們熟悉的 Android Support Libraries。而現在 Xamarin.Forms 4.5 跟 輔助建構跨平台 UI 與 服務 的 Xamarin.Essentials version 1.5 一樣,皆預設採用 AndroidX。而在你的程式碼當中不需要做任何特別的改變,如果有注意到或發現到任何問題,請歡迎到 GitHub 上面發 issue 給我們。 

而確保在現有的專案當中皆升級成功,且同時上述提到的兩個 Nuget 套件都能正確運作,可以參考我們的這份 Blog 文章做為參考指引。
 

Two: VisualStateManager Target

到現在為止 VisualStateManager 只聚焦在直接控制元件本身的設定值,加入 Target 屬性提供了控制整個 visual tree 當中任何控制項的彈性。舉例來說,在我們的 XamairnTV 的 Sample App 有個影音撥放元件,而 Play 按鈕有兩個 State 的處理,利用 ImageButton 控制項呈現 "撥放" 與 "暫停" 的效果。

vsm_targetname_videoplayer

<BoxView x:Name="Screen" BackgroundColor="Black" Opacity="0.6"/>
<ImageButton x:Name="PlayPauseToggle" 
        Source="{StaticResource PauseIcon}" 
        Clicked="PlayPauseToggle_Clicked"
        BackgroundColor="Transparent"
        HorizontalOptions="Center" 
        VerticalOptions="Center">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="PlaybackStates">
            <VisualState Name="paused">
                <VisualState.Setters>
                    <Setter Property="Source" Value="{StaticResource PlayIcon}"/>
                    <Setter TargetName="Screen" Property="BoxView.Opacity" Value="0.9"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState Name="playing">
                <VisualState.Setters>
                    <Setter Property="Source" Value="{StaticResource PauseIcon}"/>
                    <Setter TargetName="Screen" Property="BoxView.Opacity" Value="0.6"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>


要使用 程式碼 透過 Trigger 在兩種狀態當中調整時,只要寫:

VisualStateManager.GoToState(PlayPauseToggle,
    (e.State == MediaElementState.Playing)
    ? "playing"
    : "paused");

甚至在按鈕根據 trigger 的狀態改變時,只要根據對應到 BoxView 中的 TargetName  就可以改變控制項的 opacity 屬性。如果要使用這個新功能,像是在 Resources 當中使用,請參考我們之前的 blog 文章,並且了解下列的資訊:

Three: Shell Modals

無論你是使用 tabs (索引標籤) 或是 fly-out (飛出視窗) 選單,Shell 是一個極為簡單上手的行動應用設計。其中 Shell 提供了很便捷的 URI 導覽系統,現在更可以透過相同的 URI (路由)導覽模式來呈現 Modals 的畫面效果。透過新提供的 Shell.PresentationModel 附加屬性,即可針對需要展現類似意圖的頁面提供 Modal 的效果來呈現。

<ContentPage x:Class="RegistrationModal" Shell.PresentationMode="ModalAnimated">
    // your content
</ContentPage>


由於頁面可能不在本來的主要導覽結構哩,相關的路由沒有被定義在 AppShell.xaml 當中,若要導覽到該頁面,請先註冊該頁面的路由後再呼叫 GotoAsync 方法。

下列的寫法跟過去使用 Navigation.PushModalAsync(new RegistrationModal()) 所呈現的畫面效果是一樣的:

Routing.RegisterRoutes("registration", typeof(RegistrationModal));
Shell.Current.GoToAsync("//login/registration");

modal-registration

 

Four: PlatformSpecifics

感謝有 Xamarin.Android、Xamarin.iOS 與 Windows,使用 Xamarin.Forms 會有個很具特色的好處是可以輕鬆地建立出原生平台的 UI。我們可以帶入具有一致性的通用概念,並且提供跨平台的 API。而當無法達成相關的一致性時,就會需要更多的調整來提供特定的平台設計。而在 4.5 開始我們也根據過去反饋的問題,再更進一步增加了一部份這樣的處理與設計,在此特別感謝 Joe MankeAndrei Misiukevich 的無私貢獻,其下列出相關的貢獻:

想要了解更完整的 platform specifics 來存取 Android, iOS, Windows 可以到此連結多多了解。
 

Five: Features in Preview

預覽功能的使用可以直接在 App.xaml.cs 的建構子當中直接加入:

Xamarin.Forms.Device.SetFlags(new List<string>() { 
    "StateTriggers_Experimental", 
    "IndicatorView_Experimental", 
    "CarouselView_Experimental", 
    "MediaElement_Experimental" 
});


(預覽功能介紹翻譯...略...)


Get Started with Xamarin.Forms 4.5 Today!

此次的 release 有超過 50+ 的 fixes,例如完全的移除 UIWebView 以避免 App Store 的發版警告。趕緊更新專案所參考的 Nuget 套件到 4.5,並且若有發現相關的使用問題請回報 issue 給我們

以下列出相關資源的連結:


 


I'm a Microsoft MVP - Developer Technologies (From 2015 ~).
MVP_Logo

I focus on the following topics: Xamarin Technology, Azure, Mobile DevOps, and Microsoft EM+S.

If you want to know more about them, welcome to my website:
https://jamestsai.tw 


相關 Xamarin(.Forms) 推廣活動與課程,請詳見下列 Accupass (活動通) 列表:
https://www.accupass.com/organizer/detail/1910170752158115281580
 

本部落格文章之圖片相關後製處理皆透過 Techsmith 公司 所贊助其授權使用之 "Snagit" 與 "Snagit Editor" 軟體製作。