第二十一章:变换(二)

简介: 翻译变换应用程序使用其中一个布局类 - StackLayout,Grid,AbsoluteLayout或RelativeLayout-在屏幕上定位可视元素。 让我们将布局系统建立的位置称为“布局位置”。

翻译变换

应用程序使用其中一个布局类 - StackLayout,Grid,AbsoluteLayout或RelativeLayout-在屏幕上定位可视元素。 让我们将布局系统建立的位置称为“布局位置”。
TranslationX和TranslationY属性的非零值会更改可视元素相对于该布局位置的位置。 TranslationX的正值将元素向右移动,而TranslationY的正值将元素向下移动。
TranslationDemo程序允许您试验这两个属性。 一切都在XAML文件中:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TranslationDemo.TranslationDemoPage">
    <StackLayout Padding="20, 10">
        <Frame x:Name="frame"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               OutlineColor="Accent">
 
            <Label Text="TEXT"
                   FontSize="Large" />
        </Frame>
        <Slider x:Name="xSlider"
                Minimum="-200"
                Maximum="200"
                Value="{Binding Source={x:Reference frame},
                Path=TranslationX}" />
        <Label Text="{Binding Source={x:Reference xSlider},
               Path=Value,
               StringFormat='TranslationX = {0:F0}'}"
               HorizontalTextAlignment="Center" />
        <Slider x:Name="ySlider"
                Minimum="-200"
                Maximum="200"
                Value="{Binding Source={x:Reference frame},
                Path=TranslationY }" />
        <Label Text="{Binding Source={x:Reference ySlider},
               Path=Value,
               StringFormat='TranslationY = {0:F0}'}"
               HorizontalTextAlignment="Center" />
    </StackLayout>
</ContentPage>

框架包含一个Label,并在StackLayout的上半部分居中。 两个Slider元素绑定到Frame的TranslationX和TranslationY属性,并且它们被初始化为-200到200的范围。当您第一次运行程序时,两个滑块被设置为TranslationX和TranslationY的默认值, 为零:
2019_01_07_091521
您可以操纵滑块以在屏幕上移动框架。 TranslationX和TranslationY的值指定元素相对于其原始布局位置的偏移量:
2019_01_07_091631
如果值足够大,则可以将元素转换为与其他视觉效果重叠,或者完全移出屏幕。
诸如Frame之类的元素的转换也会影响该元素的所有子元素,在这种情况下,它只是Label。您可以在任何VisualElement上设置TranslationX和TranslationY属性,包括StackLayout,Grid,甚至Page及其派生词。变换应用于元素和该元素的所有子元素。
没有一点调查可能不那么明显的是,TranslationX和TranslationY仅影响元素的呈现方式。这些属性不会影响布局系统中元素的感知方式。
例如,VisualElement定义名为X和Y的get-only属性,指示元素相对于其父元素的位置。当元素由其父元素定位时,将设置X和Y属性,在此示例中,Frame的X和Y属性指示Frame的左上角相对于StackLayout左上角的位置。设置TranslationX和TranslationY时,X和Y属性不会更改。此外,只有Bounds属性 - 它将X和Y以及Width和Height组合在一个Rectangle中 - 也不会改变。修改TranslationX和TranslationY时,布局系统不会涉及。
如果您使用TranslationX和TranslationY将Button从其原始位置移动会发生什么? Button是否响应其原始布局位置或新渲染位置的水龙头?你会很高兴知道它是后者。 TranslationX和TranslationY会影响元素的呈现方式以及它如何响应水龙头。您很快就会在名为ButtonJump的示例程序中看到这一点。
如果需要在页面周围进行大量的元素移动,您可能想知道是否使用AbsoluteLayout并明确指定坐标或使用TranslationX和TranslationY来指定偏移。 在性能方面,实际上差别不大。 TranslationX和TranslationY的优点是你可以从StackLayout或Grid建立的位置开始,然后相对于该位置移动元素。

目录
相关文章
|
11月前
|
编解码 缓存 计算机视觉
神还原物体复杂、高频细节,4K-NeRF高保真视图合成来了
神还原物体复杂、高频细节,4K-NeRF高保真视图合成来了
|
机器学习/深度学习 人工智能 编解码
CVPR 2022 | 逆渲染中的⾼效间接光照建模
CVPR 2022 | 逆渲染中的⾼效间接光照建模
470 0
CVPR 2022 | 逆渲染中的⾼效间接光照建模
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
807 0
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
|
Android开发 索引
第二十一章:变换(十)
样式通过将AnchorX值设置为0来结束,该值将旋转中心设置为每个Label的左边缘的垂直中心。 然后每个Label都会获得一个独特的旋转设置:显然,选择“ROTATE”字符串之前的空格,以便R的垂直条组合形成一个看起来几乎像圆的16边多边形。
1019 0
|
JavaScript Android开发 索引
第二十一章:变换(九)
旋转的文字效果轮换很有趣。 旋转动画时更有趣(正如您将在下一章中看到的那样),但即使使用静态图像也很有趣。本章和下一章中的几个旋转示例涉及将视觉元素排列在一个圆圈中,所以让我们首先尝试显示一个简单的圆圈。
841 0
|
Android开发
第二十一章:变换(八)
旋转变换 “旋转”属性旋转屏幕表面上的可视元素。 将“旋转”属性设置为以度为单位的角度(不是弧度)。 正角度顺时针旋转元素。 您可以将“旋转”设置为小于0或大于360的角度。实际旋转角度是旋转属性模数360的值。
818 0
|
Android开发
第二十一章:变换(十四)
3D-ish旋转 即使计算机屏幕是平面和二维的,也可以在这些屏幕上绘制视觉对象,使其具有第三维的外观。 在本章的前面,您看到了一些文本效果,它们提供了第三个维度的提示,而Xamarin.Forms支持两个额外的旋转,名为RotationX和RotationY,它们似乎也突破了屏幕固有的二维平面度。
1344 0
|
Android开发 iOS开发
第二十一章:变换(七)
锚定规模当你尝试使用Scale属性时,你可能已经注意到视觉元素的任何扩展都是从元素的中心向外发生的,如果你将视觉元素缩小到任何东西,它也会向中心收缩。这是另一种思考方式:无论Scale属性的设置如何,视觉元素正中心的点都保持在同一位置。
935 0
|
Android开发 iOS开发 Windows
第二十一章:变换(六)
两个按钮的Clicked处理程序每个都启动一个独立的动画。 第一个Button的Clicked处理程序将其Scale属性从1设置为5并再次返回,而第二个Button的Clicked处理程序将其FontSize属性设置为1到5的比例因子,然后再返回。
940 0
|
JavaScript Android开发
第二十一章:变换(五)
规模变换 VisualElement类定义名为Scale的属性,您可以使用该属性更改元素的呈现大小。 Scale属性不会影响布局(将在ButtonScaler程序中演示)。它不会影响元素的get-only Width和Height属性,也不会影响包含Width和Height值的get-only Bounds属性。
906 0

热门文章

最新文章