Xamarin.Forms 的轉換應用

什麼是轉換 Transform

在 Xamarin.Forms 中的每個 View，都可以使用 Transform，其中透過這些轉換屬性定義，可以將特定 View 的某個座標空間之相關點，經過數學運算，對應或轉換到另一個座標空間。經過這樣的處理，此時，View 就會在螢幕上呈現在不同的位置與不同樣棒，如同下圖所示。

範例專案 https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFTransforms

XAML 轉換使用說明

在這個範例中，並不需要透過任何 ViewModel 或者 Code Behind 的C#程式碼，就可以做到這樣的效果。

在底下的 XAML 範例中，將會透過資料繫結的方式，只要使用者變更了 Slider 的值，就會變更頁面上的 Frame 的座標轉換。

<?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="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFTransforms.Views.MainPage"
             Title="MainPage"> 
  <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
        <Frame x:Name="frame" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" OutlineColor="Accent">
            <Label Text="這是Xamarin.Forms" FontSize="Large" />
        </Frame>
        <StackLayout
          HorizontalOptions="Fill" VerticalOptions="End">
            <Grid
                HorizontalOptions="Fill" VerticalOptions="Center"
                >
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Slider Grid.Row="0" Grid.Column="0" Minimum="-200" Maximum="200" Value="{Binding Source={x:Reference frame}, Path=TranslationX}" />
                <Slider Grid.Row="0" Grid.Column="1" Minimum="-200" Maximum="200" Value="{Binding Source={x:Reference frame}, Path=TranslationY}" />
                <Slider Grid.Row="1" Grid.Column="0" Minimum="-10" Maximum="10" Value="{Binding Source={x:Reference frame}, Path=Scale}" />
                <Slider Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="360" Value="{Binding Source={x:Reference frame}, Path=Rotation}" />
                <Slider Grid.Row="2" Grid.Column="0" Minimum="-1" Maximum="2" Value="{Binding Source={x:Reference frame}, Path=AnchorX}" />
                <Slider Grid.Row="2" Grid.Column="1" Minimum="-1" Maximum="2" Value="{Binding Source={x:Reference frame}, Path=AnchorY}" />
                <Slider Grid.Row="3" Grid.Column="0" Maximum="360" Value="{Binding Source={x:Reference frame}, Path=RotationX}" />
                <Slider Grid.Row="3" Grid.Column="1" Maximum="360" Value="{Binding Source={x:Reference frame}, Path=RotationY}" />
            </Grid>
        </StackLayout>
    </Grid>
</ContentPage>