使用 Xamarin.Plugin.SharedTransitions 製作出具有跨頁面之共用項目動畫效果

最近觀看完 .NET Conf: Focus on Xamarin 的 Building Beautiful Apps with Xamarin.Forms 影片，頓時間覺得 Xamarin.Forms 似乎又進化了許多，在這個影片中我看到許多驚豔內容，對於 Xamarin.Plugin.SharedTransitions 這個套件所產生出來的效果，更讓我想要能夠親自來嘗試看看，因此，我先從 Xamarin.Forms-Monkeys 這裡取得許多猴子介紹的紀錄內容，並且將這些內容包裝到練習使用的 NuGet 套件內，接著，實做出如下面影片中的動畫效果。

這個說明專案的原始碼為 xfSharedTransitions

範例專案說明

在這個測試範例專案中，將會使用 Prism Template Pack 建立一個 Xamarin.Forms 的專案，接著要安裝 Xamarin.FFImageLoading.Forms & Xamarin.Plugin.SharedTransitions 這兩個 NuGet 套件；這裡會用到 Xamarin.FFImageLoading.Forms 這個套件，這是因為一開始建立這個測試專案的時候，使用的是 Xamarin.Forms 內的 Image 元件，不過，由於要顯示的猴子圖片是來自於 Internet 上，因此，當要進行頁面切換的時候，對於共用圖片元件的動畫動作，變得不自然與動畫路徑怪怪的，可是，若使用 GiampaoloGabba / Xamarin.Plugin.SharedTransitions 內提供的範例專案，卻可以正常運作，經過了解，發現到該範例專案內使用的貓狗圖片，都是專案內的圖片檔案，不是透過 Internet 方式取得的，所以，就根據該專案的說明內容，嘗試使用 Xamarin.FFImageLoading.Forms 這個元件，讓圖片從 Internet 下載下來，使用本機上快取的圖片檔案，發現到就可以順利運作。

首先，在 [MainPage.xaml] 檔案中，建立底下的 XAML 宣告

在這裡因為會使用到 amarin.FFImageLoading.Forms & Xamarin.Plugin.SharedTransitions 功能，因此，加入了兩個命名空間 sharedTransitions & ffimageloading

而在 ContentPage 內，也使用到兩個附加屬性，用來宣告動畫需要多久的時間，這裡使用 sharedTransitions:SharedTransitionNavigationPage.TransitionDuration="500" 來宣告需要花費 500ms，並且使用 sharedTransitions:SharedTransitionNavigationPage.TransitionSelectedGroup="{Binding SelectedMonkeyId}" 用於宣告點選了哪個集合項目中的紀錄，若僅是做兩個頁面之間的切換，並沒有牽扯到集合項目，例如 ListView，這裡是可以不用使用這個附加屬性哦。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="xfSharedTransitions.Views.MainPage"
             xmlns:behavior="http://prismlibrary.com"
             xmlns:sharedTransitions="clr-namespace:Plugin.SharedTransitions;assembly=Plugin.SharedTransitions"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             sharedTransitions:SharedTransitionNavigationPage.TransitionDuration="500"
             sharedTransitions:SharedTransitionNavigationPage.TransitionSelectedGroup="{Binding SelectedMonkeyId}"
             Title="猴仔們">

    <Grid>
        <ListView
            HasUnevenRows="True"
            ItemsSource="{Binding AllMonkey}"
            SelectionMode="None"
            Footer="">
            <ListView.Behaviors>
                <behavior:EventToCommandBehavior
                    EventName="ItemTapped"
                    Command="{Binding MonkeyCommand}"
                    EventArgsParameterPath="Item"/>
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label
                                Grid.Row="0" Grid.Column="1"
                                HorizontalOptions="Start" VerticalOptions="End"
                                FontSize="24"
                                Text="{Binding Name}"/>

                            <Label
                                Grid.Row="1" Grid.Column="1"
                                HorizontalOptions="Start" VerticalOptions="Start"
                                FontSize="16"
                                Text="{Binding Location}"/>
                            <ffimageloading:CachedImage HeightRequest="80"
                                                        Grid.Row="0" Grid.RowSpan="2"
                                                        Aspect="AspectFit"
                                                        Source="{Binding ImageUrl}"
                                                        sharedTransitions:Transition.Name="MonkeyImage"
                                                        sharedTransitions:Transition.Group="{Binding Id}"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </Grid>
</ContentPage>

在這裡因為會使用到 amarin.FFImageLoading.Forms & Xamarin.Plugin.SharedTransitions 功能，因此，加入了兩個命名空間 sharedTransitions & ffimageloading

而在 ContentPage 內，也使用到兩個附加屬性，用來宣告動畫需要多久的時間，這裡使用 sharedTransitions:SharedTransitionNavigationPage.TransitionDuration="500" 來宣告需要花費 500ms，並且使用 sharedTransitions:SharedTransitionNavigationPage.TransitionSelectedGroup="{Binding SelectedMonkeyId}" 用於宣告點選了哪個集合項目中的紀錄，若僅是做兩個頁面之間的切換，並沒有牽扯到集合項目，例如 ListView，這裡是可以不用使用這個附加屬性哦。

在 ItemsTemplate 內，需要使用 sharedTransitions:Transition.Name="MonkeyImage" 這樣的附加屬性宣告，指定兩個頁面都有的共同視覺項目，宣告這裡需要進行動畫的變化動作，而 sharedTransitions:Transition.Group="{Binding Id}" 則是同樣用於集合檢視內才會用到的宣告，這裡將會指定這筆紀錄的 ID 到 Group 屬性內，而這個屬性可以是整數或者是字串，不過，必須具有唯一值特性。

對 MainPage 的 ViewModel，將會使用底下的 C# 程式碼來設計

public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
{
    public event PropertyChangedEventHandler PropertyChanged;

    private readonly INavigationService navigationService;
    public string Title { get; set; }
    public ObservableCollection<Monkey> AllMonkey { get; set; } = new ObservableCollection<Monkey>();
    public DelegateCommand<Monkey> MonkeyCommand { get; set; }
    public int SelectedMonkeyId { get; set; }
    public MainPageViewModel(INavigationService navigationService)
    {
        this.navigationService = navigationService;
        Title = MonkeyData.Monkeys.Count.ToString();
        MonkeyCommand = new DelegateCommand<Monkey>(async x =>
        {
            SelectedMonkeyId = x.Id;

            NavigationParameters para = new NavigationParameters();
            para.Add(nameof(Monkey), x);
            await Task.Delay(100);
            await navigationService.NavigateAsync(nameof(DetailPage), para);
        });
    }

    public void OnNavigatedFrom(INavigationParameters parameters)
    {
    }

    public void OnNavigatedTo(INavigationParameters parameters)
    {
        int idx = 1;
        foreach (var item in MonkeyData.Monkeys)
        {
            AllMonkey.Add(item);
            idx++;
        }
    }

    public void OnNavigatingTo(INavigationParameters parameters)
    {
    }

}

對於點選 ListView 的某個紀錄，將會觸發 MonkeyCommand 這個命令，從這個命令參數中，可以取得使用者所點選的物件值，在這裡，將會把所點選的紀錄物件值，透過導航參數的鍵值 Monkey 傳送到下個頁面去

對於要切換過去的頁面，這裡新增一個 DetailPage.xaml 頁面與 DetailPageViewModel.cs 這兩個檔案，其中，對於頁面部分，將會設計底下的 XAML 宣告內容

從這裡可以很清楚的看到，僅有在圖片檢視的地方，使用到 sharedTransitions:Transition.Name="MonkeyImage" 宣告，這是用來串接兩個頁面共用檢視的宣告方式。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="http://prismlibrary.com"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:sharedTransitions="clr-namespace:Plugin.SharedTransitions;assembly=Plugin.SharedTransitions"
             x:Class="xfSharedTransitions.Views.DetailPage"
             Title="{Binding Monkey.Name, StringFormat='猴子:{0}'}"
             >

    <Grid>
        <ScrollView>
            <StackLayout Orientation="Vertical">
                <ffimageloading:CachedImage HeightRequest="300" WidthRequest="300"
                                                        Aspect="AspectFit"
                                                        Source="{Binding Monkey.ImageUrl}"
                                                        sharedTransitions:Transition.Name="MonkeyImage"
                                                        />
                <Label
                    HorizontalOptions="Center" VerticalOptions="End"
                    FontSize="24"
                    Text="{Binding Monkey.Name}"/>

                <Label
                    HorizontalOptions="Center" VerticalOptions="Start"
                    FontSize="16"
                    Text="{Binding Monkey.Location}"/>
                <Label
                    HorizontalOptions="Start" VerticalOptions="Start"
                    FontSize="14"
                    Text="{Binding Monkey.Details}"/>
            </StackLayout>
        </ScrollView>
    </Grid>
</ContentPage>