第二十一章：變換（七）

錨定規模

當你嘗試使用Scale屬性時，你可能已經注意到視覺元素的任何擴充都是從元素的中心向外發生的，如果你将視覺元素縮小到任何東西，它也會向中心收縮。

這是另一種思考方式：無論Scale屬性的設定如何，視覺元素正中心的點都保持在同一位置。

如果您正在使用“縮放”屬性來展開“按鈕”以進行視覺回報，或者為了使視覺元素适合特定空間，那麼這可能正是您想要的。但是，對于某些其他應用程式，您可能更喜歡将另一個點保留在同一位置，并更改Scale屬性。也許您希望視覺元素的左上角保持在同一位置，并使對象的擴充向右和向下發生。

您可以使用AnchorX和AnchorY屬性控制縮放中心。這些屬性的類型為double，并且與要轉換的元素相關。 AnchorX值為0表示元素的左側，值為1表示元素的右側。 AnchorY值為0，頂部為1，底部為1。預設值為0.5，即中心。将兩個屬性都設定為0允許縮放相對于元素的左上角。

您還可以将屬性設定為小于0或大于1的值，在這種情況下，縮放中心位于元素的邊界之外。

如您所見，AnchorX和AnchorY屬性也會影響旋轉。旋轉發生在稱為旋轉中心的特定點周圍，并且這兩個屬性相對于旋轉的元素設定該點。

AnchoredScaleDemo程式允許您使用AnchorX和AnchorY進行實驗，因為它們會影響Scale屬性。 XAML檔案包含兩個Stepper視圖，可讓您将AnchorX和AnchorY屬性從-1更改為2，增量為0.25：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AnchoredScaleDemo.AnchoredScaleDemoPage">
    <StackLayout Padding="20, 10">
        <Frame x:Name="frame"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               OutlineColor="Accent">
            <Label Text="TEXT"
                   FontSize="Large" />
        </Frame>
 
        <Slider x:Name="scaleSlider"
                Minimum="-10"
                Maximum="10"
                Value="{Binding Source={x:Reference frame},
                                Path=Scale}" />
        <Label Text="{Binding Source={x:Reference scaleSlider},
                              Path=Value,
                              StringFormat='Scale = {0:F1}'}"
               HorizontalTextAlignment="Center" />
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center">
            <Stepper x:Name="anchorXStepper"
                     Minimum="-1"
                     Maximum="2"
                     Increment="0.25"
                     Value="{Binding Source={x:Reference frame},
                                     Path=AnchorX}" />
            <Label Text="{Binding Source={x:Reference anchorXStepper},
                                  Path=Value,
                                  StringFormat='AnchorX = {0:F2}'}"
                   VerticalOptions="Center"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center">
            <Stepper x:Name="anchorYStepper"
                     Minimum="-1"
                     Maximum="2"
                     Increment="0.25"
                     Value="{Binding Source={x:Reference frame},
                                     Path=AnchorY}" />
            <Label Text="{Binding Source={x:Reference anchorYStepper},
                                  Path=Value,
                                  StringFormat='AnchorY = {0:F2}'}"
                   VerticalOptions="Center"/>
        </StackLayout>
    </StackLayout>
</ContentPage>           

以下是一些螢幕截圖，顯示（從左到右）相對于左下角相對于右下角和相對于中心底部的縮放：

如果您熟悉iOS程式設計，則可以了解類似的anchorPoint屬性。在iOS中，此屬性會影響定位和轉換中心。在Xamarin.Forms中，AnchorX和AnchorY屬性僅指定轉換中心。

這意味着Xamarin.Forms的iOS實作必須彌補anchorPoint與AnchorX和AnchorY屬性之間的差異，并且在此版本列印的最新版本的Xamarin.Forms中，補償工作不正常。

要檢視問題，請将AnchoredScaleDemo程式部署到iPhone或iPhone模拟器。将Scale設定為其預設值1，但将AnchorX和AnchorY都設定為1.帶有Label的Frame不應從StackLayout中其插槽的中心移動，因為AnchorX和AnchorY屬性應僅影響縮放中心和回轉。

現在将手機或模拟器的方向從縱向更改為橫向。架構不再居中。現在将其改回肖像。它不會傳回其原始的居中位置。

此問題會影響本章（以及下一章）中使用AnchorX和AnchorY的非預設值的每個程式。有時這些章節中的示例程式在調整元素大小後設定AnchorX和AnchorY以試圖避免問題，但隻要手機可以改變從縱向到橫向的方向，問題就無法避免，并且應用程式無法解決問題做以彌補這個問題。