第二十一章:变换(七)

简介: 锚定规模当你尝试使用Scale属性时,你可能已经注意到视觉元素的任何扩展都是从元素的中心向外发生的,如果你将视觉元素缩小到任何东西,它也会向中心收缩。这是另一种思考方式:无论Scale属性的设置如何,视觉元素正中心的点都保持在同一位置。

锚定规模
当你尝试使用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以试图避免问题,但只要手机可以改变从纵向到横向的方向,问题就无法避免,并且应用程序无法解决问题做以弥补这个问题。

目录
相关文章
|
1天前
|
人工智能 API 开发工具
Claude Code国内安装:2026最新保姆教程(附cc-switch配置)
Claude Code是我目前最推荐的AI编程工具,没有之一。 它可能不是最简单的,但绝对是上限最高的。一旦跑通安装、接上模型、定好规范,你会发现很多原本需要几小时的工作,现在几分钟就能搞定。 这套方案的核心优势就三个字:可控性。你不用依赖任何不稳定服务,所有组件都在自己手里。模型效果不好?换一个。框架更新了?自己决定升不升。 这才是AI时代开发者该有的姿势——不是被动等喂饭,而是主动搭建自己的生产力基础设施。 希望这篇保姆教程,能帮你顺利上车。做出你自己的作品。
Claude Code国内安装:2026最新保姆教程(附cc-switch配置)
|
9天前
|
缓存 人工智能 自然语言处理
我对比了8个Claude API中转站,踩了不少坑,总结给你
本文是个人开发者耗时1周实测的8大Claude中转平台横向评测,聚焦Claude Code真实体验:以加权均价(¥/M token)、内部汇率、缓存支持、模型真实性及稳定性为核心指标。
3549 21
|
1天前
|
API iOS开发 MacOS
号外号外,最新 Claude Code Desktop 支持配置第三方大模型了
最新版Claude Code Desktop支持免登录接入第三方大模型(如Ollama/gemma4),无需CLI命令行。启用Developer Mode后,通过图形化界面配置Gateway地址与API Key即可快速切换模型,国内用户使用更便捷。(239字)
1974 0
|
4天前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
1994 8
|
3天前
|
人工智能 缓存 BI
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro,跑完 Skills —— OA 审批、大屏、报表、部署 5 大实战场景后的真实体验 ![](https://oscimg.oschina.net/oscnet/up608d34aeb6bafc47f
1609 3
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
|
21天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
18174 60
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
1天前
|
SQL 人工智能 弹性计算
阿里云发布 Agentic NDR,威胁检测与响应进入智能体时代
欢迎前往阿里云云防火墙控制台体验!
1161 2

热门文章

最新文章