第二十一章：变换（三）

文字效果
TranslationX和TranslationY的一个常见应用是将少量偏移应用于将它们从布局位置略微偏移的元素。 如果在单单元格网格中有多个重叠元素并且需要移动一个以便从另一个网格下面查看，这有时很有用。
您甚至可以将此技术用于常见文本效果。 仅XAML TextOffsets程序将三对Label元素放在三个单格网格布局中。 每个网格中的一对Label元素大小相同，并显示相同的文本：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TextOffsets.TextOffsetsPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="backgroundColor">White</Color>
            <Color x:Key="foregroundColor">Black</Color>
            <Style TargetType="Grid">
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
            </Style>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="72" />
                <Setter Property="FontAttributes" Value="Bold" />
                <Setter Property="HorizontalOptions" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout BackgroundColor="{StaticResource backgroundColor}">
        <Grid>
            <Label Text="Shadow"
                   TextColor="{StaticResource foregroundColor}"
                   Opacity="0.5"
                   TranslationX="5"
                   TranslationY="5" />
            <Label Text="Shadow"
                   TextColor="{StaticResource foregroundColor}" />
        </Grid>
        <Grid>
            <Label Text="Emboss"
                   TextColor="{StaticResource foregroundColor}"
                   TranslationX="2"
                   TranslationY="2" />
            <Label Text="Emboss"
                   TextColor="{StaticResource backgroundColor}" />
        </Grid>
        <Grid>
            <Label Text="Engrave"
                   TextColor="{StaticResource foregroundColor}"
                   TranslationX="-2"
                   TranslationY="-2" />
            <Label Text="Engrave"
                   TextColor="{StaticResource backgroundColor}" />
        </Grid>
    </StackLayout>
</ContentPage>

通常，网格的Children集合中的第一个Label将被第二个Label遮挡，但应用于第一个Label的TranslationX和TranslationY值允许它部分可见。 相同的基本技术会产生三种不同的文本效果：投影，看似从屏幕表面抬起的文本，以及看起来像是凿入屏幕的文本：

这些效果为其他平面图像提供了一些3D外观。 光学错觉基于光从左上角照亮屏幕的惯例。 因此，阴影被抛出到凸起物体的下方和右侧。 浮雕和雕刻效果之间的差异完全是由于模糊的黑色文本和顶部的白色文本的相对位置。 如果黑色文本略低于右侧，则会成为凸起的白色文本的阴影。 如果黑色文本位于白色文本的上方和左侧，则它将成为沉入表面下方的文本阴影。
下一个示例不是您要定期使用的内容，因为它需要多个Label元素，但如果您想为文本提供一点“深度”，则BlockText程序中说明的技术非常有用：

BlockText XAML文件使用单格网格在白色背景上显示黑色文本。 但是，为Label定义的隐式（和扩展）样式指定了Gray的TextColor属性：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BlockText.BlockTextPage">
    <Grid x:Name="grid"
          BackgroundColor="White">
        <Grid.Resources>
            <ResourceDictionary>
                <Style TargetType="Label">
                    <Setter Property="Text" Value="DEPTH" />
                    <Setter Property="FontSize" Value="72" />
                    <Setter Property="FontAttributes" Value="Bold" />
                    <Setter Property="TextColor" Value="Gray" />
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="VerticalOptions" Value="Center" />
                </Style>
            </ResourceDictionary>
        </Grid.Resources>
        <Label TextColor="Black" />
 
    </Grid>
</ContentPage>

代码隐藏文件中的构造函数向Grid添加了几个Label元素。 Style确保它们都具有相同的属性（包括灰色），但每个属性都偏离XAML文件中的Label：

public partial class BlockTextPage : ContentPage
{
    public BlockTextPage()
    {
        InitializeComponent();
        for (int i = 0; i < Device.OnPlatform(12, 12, 18); i++)
        {
            grid.Children.Insert(0, new Label
            {
                TranslationX = i,
                TranslationY = -i
            });
        }
    }
}

这是另一种情况，其中标签元素在单格网格中相互重叠，但现在还有更多。 XAML文件中的黑色标签必须是Children集合中的最后一个子标签，以便它位于所有其他子集之上。 具有最大TranslationX和TranslationY偏移量的元素必须是Children集合中的第一个子元素，因此它必须位于堆栈的最底部。 这就是为什么每个连续的Label都插入到Children集合的开头。