James's Tech & Life Blog

而除了在 CollectionView 每個項目指引上提供了SwipeView，更也在 Image 中提供了新版的 GIF 動畫支援能力。

讓我們來看看吧~~~

Xamarin.Forms 4.4 功能

GIF 動畫是很棒很好的簡單方式來回應使用者，而在 Image 只要使用新的 IsAnimationPlaying 屬性來啟用或關閉回應。而預設是無限反覆撥放動畫，只要將 IsAnimationPlaying 設定為 false，就能停止動畫的撥放。

<Image Source="https://cataas.com/cat/gif?type=sq" IsAnimationPlaying="True"/>

這樣在你的 App 中看起來就擁有很棒的動畫效果了，並且若是 Embedded 圖片的方式嵌入在你的應用中，那則代表了用了更小的圖片資源達到了這樣的效果。另外，請確認在 Android 當中你有啟用 fast renderers 的功能以獲得最好的效果。

 

CarouselView and IndicatorView

基於跟 CollectionView 類似控制項原理，新的 CarouselView 在 App 當中，無論是要加入水平或垂直的 Carousels 呈現都變得更輕鬆，只要跟 CollectionView 的使用一樣，設定其:

• ItemsLayout
• ItemSource
• ItemTemplate
• EmptyTemplate

<CarouselView HeightRequest="160">
    <CarouselView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>h01.jpg</x:String>
            <x:String>h02.jpg</x:String>
            <x:String>h03.jpg</x:String>
            <x:String>h04.jpg</x:String>
        </x:Array>
    </CarouselView.ItemsSource>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding .}"/>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

更可以透過 carousel 特別的屬性 PeekAreaInsets ，來控制前後項目在 "peek" 的密度過程。

<CarouselView PeekAreaInsets="50"
              ...>

加入 IndicatorView 時可以透過指定 CarouselView 名稱，來設定 IndicatorView 並更能正確的指引相關的畫面呈現:

<CarouselView x:Name="walletCarousel">
// implementation here
</CarouselView>
<IndicatorView 
  IndicatorColor="LightGray"
  SelectedIndicatorColor="Black"
  IndicatorSize="10" HorizontalOptions="Center"
  IndicatorView.ItemsSourceBy="walletCarousel"/>

若想要了解更多 CarouselView 與 IndicatorView 更棒的功能，請參考我們的文件。

 

SwipeView

這個控制項可以提供選擇項目時多一些不同的呈現效果，如果你想要有更豐富的呈現，只要透過 template 的設定即可完成。

<SwipeView>
        <SwipeView.RightItems>
                <SwipeItems Mode="Execute">
                        <SwipeItem Text="Favourite" Command="{Binding Favourite}">
                                <SwipeItem.Icon>
                                        <FontIconSource Glyph="&#xE74D;"/>
                                </SwipeItem.Icon>
                        </SwipeItem>
                </SwipeItems>
        </SwipeView.RightItems>

        <!-- Swipeable content -->
        <Frame>
          // content here
        </Frame>
</SwipeView>

而你也可以使用根據 Android 或 iOS 平台而特定 swipe 效果，若想要了解更多有關於 SwipeView 的使用，請參考文件。

 

感謝熱情的貢獻者們

Xamarin.Forms 4.4 還有更多的新功能與改進，Check out these great improvements 列出了 34 個開發貢獻者，在這邊列舉幾位:

• Use named sizes with FontImageSource – @tuyen-vuduc
• Scaling animation methods ScaleXTo and ScaleYTo – @sthewissen
• Letter-spacing – @KSemenenko
• Placeholder text alignment – @krdmllr

 

今天就開始使用 Xamarin.Forms 4.4 的新功能吧!

如果要使用時，現在請透由在方案中來設定 SetFlags 確保啟用了 preview feature，只要在 App.xaml.cs 當中加入以下:

public App()
{
    InitializeComponent();
 
    Device.SetFlags(new[] { 
        "CarouselView_Experimental", 
        "IndicatorView_Experimental",
        "SwipeView_Experimental" 
    } );
 
    MainPage = new AppShell();
}

大家都可以透過 GitHub 來給予我們回饋，我們會持續保持進度前進到 4.5，謝謝大家!

Ouick Links:

• Release Notes – lots of quality improvements including Shell and CollectionView
• Animated GIFs
  documentation
• CarouselView
  documentation
  sample
• IndicatorView
  documentation
• SwipeView
  documentation
• Carousel Gallery
  GitHub

如果針對 Xamarin.Forms 4.4 有發現任何問題，也請歡迎到 GitHub 聯繫我們，想知道未來的發展與規劃也請參考 Feature roadmap。

 

 

---

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

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 

---

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