第二十一章：变换（七）

最新推荐文章于 2023-12-06 08:22:28 发布

flybirding10011

最新推荐文章于 2023-12-06 08:22:28 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/686413

本文探讨了在Xamarin.Forms中使用AnchorX和AnchorY属性控制视觉元素缩放中心的方法，详细介绍了如何通过调整这些属性实现元素的精确定位和旋转，同时指出了iOS平台上的实现差异及存在的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

锚定规模
当你尝试使用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>

以下是一些屏幕截图，显示（从左到右）相对于左下角相对于右下角和相对于中心底部的缩放：
2019_01_12_135427
如果您熟悉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以试图避免问题，但只要手机可以改变从纵向到横向的方向，问题就无法避免，并且应用程序无法解决问题做以弥补这个问题。