C# 分辨率在通过模板的第二个动画上很奇怪

在我的Universal Windows 10应用程序中，我有一个动画，可以收缩通过模板应用其外观的自定义控件。它在第一次运行时按预期工作。第二次运行时，动画的开始以可怕的分辨率渲染，显然受到上一次运行的污染：

第一次在左边；第二次在右边

如果不使用带有模板的自定义控件，而是用XAML硬编码所有内容，那么问题就不会出现

如果我增加而不是缩小目标，问题就不会发生

让我从非模板版本开始，它比模板版本更短，更容易阅读：

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="AnimationStates">
                <VisualState x:Name="Show">
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleX"
                            To="0.1"
                            BeginTime="0:00:2"
                            Duration="0:00:1">
                        </DoubleAnimation>
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleY"
                            To="0.1"
                            BeginTime="0:00:2"
                            Duration="0:00:1">
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Hide" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="16"
            FontSize="122"
            Text="Q">
            <TextBlock.RenderTransform>
                <ScaleTransform x:Name="transform" />
            </TextBlock.RenderTransform>
        </TextBlock>
        <Button
            Grid.Row="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="16"
            Content="Animate!"
            Click="OnAnimateClicked" />
    </Grid>
</Page>

每次都很好用。但是我没有直接将

ScaleTransform

应用于

TextBlock

的

RenderTransform

，而是使用了一个应用了模板的自定义控件。为了便于说明，我们可以使用一个自定义控件，它只不过是一个占位符：

public sealed class CustomControl : Control
{
}

然后更改XAML以将

文本块

替换为

自定义控件

，并将模板应用于

自定义控件

：

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp">
    <Grid>
        <Grid.Resources>
            <Style TargetType="local:CustomControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:CustomControl">
                            <Grid>
                                <TextBlock Text="Q" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="AnimationStates">
                <VisualState x:Name="Show">
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleX"
                            To="0.1"
                            BeginTime="0:00:2"
                            Duration="0:00:1">
                        </DoubleAnimation>
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleY"
                            To="0.1"
                            BeginTime="0:00:2"
                            Duration="0:00:1">
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Hide" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <local:CustomControl
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="16"
            FontSize="122">
            <local:CustomControl.RenderTransform>
                <ScaleTransform x:Name="transform" />
            </local:CustomControl.RenderTransform>
        </local:CustomControl>
        <Button
            Grid.Row="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="16"
            Content="Animate!"
            Click="OnAnimateClicked"/>
    </Grid>
</Page>

第一次单击“动画”按钮时，其工作原理与第一个版本完全相同。第二次和后续时间，初始动画渲染使用右侧显示的真正粗略的分辨率：

---

粗糙度似乎与收缩系数成正比。这是某种缺陷（优化失败？），还是我对模板的理解有缺陷？

只是为了好玩和推敲，你是否尝试过在内部文本块上设置字体大小，这样就不会让系统缩放首选项了？我没有尝试过。但是现在我知道了，行为还是一样的。因为我知道我最终会遇到这个问题，我稍后会尝试使用你的例子。除了在你的控件上没有设置RenderTransferMorigin之外，没有什么特别的，但我不认为这在这个例子中有什么关系。让我想知道别名是否发生在实际字体上。好问题！呵呵。祝你好运（我提炼出的实际代码或多或少是一个独立的复制程序，但它确实设定了一个原点，所以问题出在别处。）

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp">
    <Grid>
        <Grid.Resources>
            <Style TargetType="local:CustomControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:CustomControl">
                            <Grid>
                                <TextBlock Text="Q" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="AnimationStates">
                <VisualState x:Name="Show">
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleX"
                            To="0.1"
                            BeginTime="0:00:2"
                            Duration="0:00:1">
                        </DoubleAnimation>
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleY"
                            To="0.1"
                            BeginTime="0:00:2"
                            Duration="0:00:1">
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Hide" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <local:CustomControl
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="16"
            FontSize="122">
            <local:CustomControl.RenderTransform>
                <ScaleTransform x:Name="transform" />
            </local:CustomControl.RenderTransform>
        </local:CustomControl>
        <Button
            Grid.Row="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="16"
            Content="Animate!"
            Click="OnAnimateClicked"/>
    </Grid>
</Page>