UWP ContentControl 未应用 ContentThemeTransition

Question

我正在尝试让ContentControl 应用ContentThemeTransition，其中内容将是一个字符串，因此当字符串通过绑定更改时，新字符串将动画化。我不能使用ContentThemeTransition带有TextBlock，因为这不是从ContentControl 派生的。

下面是一些显示问题的示例 XAML。如果我编辑 Textbox 中的文本（它表示我的 ViewModel 中 ContentControl 真正绑定到的文本），我希望 ContentControl 中显示的文本能够动画化，但事实并非如此。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition/>  
        <RowDefinition/>
    </Grid.RowDefinitions>

    <TextBox Grid.Row="0" x:Name="text" Text="Hello" Width="100" Height="30"/>
    <ContentControl  Grid.Row="1" Width="100"  Height="100" Content="{Binding ElementName=text , Path=Text}">
        <ContentControl.Transitions>
            <TransitionCollection>
                <ContentThemeTransition HorizontalOffset="40"/>
            </TransitionCollection>
        </ContentControl.Transitions>
    </ContentControl>
</Grid>

我做错了什么？

更新

我现在正在到达某个地方。如果将ContentControl XAML 替换为

<ContentPresenter Background="Black" Foreground="Red"  Grid.Row="1" Width="100"  Height="100" Content="{Binding ElementName=text , Path=Text}">
        <ContentPresenter.ContentTransitions>
            <TransitionCollection>
                <ContentThemeTransition VerticalOffset="-100"/>
            </TransitionCollection>
        </ContentPresenter.ContentTransitions>
    </ContentPresenter>

然后就可以了。奇怪的是，VerticalOffset =-100 如上所述，新值在ContentControli.e 之外向下动画。它在控件范围之外可见。任何人都知道如何更改内容以使动画仅出现在ContentPresenter 的范围内？

Answer 1

经过我的测试，您的第一个<ContentThemeTransition HorizontalOffset="40"/> 和第二个<ContentThemeTransition VerticalOffset="-100"/> 都有效，但只是第一次，您可以放大HorizontalOffset 进行测试并检查它是否有效。

由于您希望动画在每次更改文本时都能正常工作，因此我认为您需要创建一个直接针对TextBlock 的Text 的动画，而不是针对ContentControl 的Content。

在这种情况下，XAML Behaviors 将是一个很好的帮手。您可以参考@Jerry Nixon - MSFT 在线程中的回答：How to animate TextBlock when its value changes in WinRT XAML?

更新：

我的错误是我只注意到您将HorizontalOffset 更改为VerticalOffset。您实际上还将ContentControl 更改为ContentPresenter。

根据 UWP 的 UI 坐标，既然你的动画目标是 ContentPresenter，那么你的 ContentPresent 的左上角点是 (0, 0)。当您设置<ContentThemeTransition VerticalOffset="-100"/> 时，它会从上 (0, -100) 转换回 (0, 0) 并且肯定会在您的ContentPresent 之外进行动画处理，我认为它就是这样设计的，我们是无法改变它。在这里我只能建议像<ContentThemeTransition VerticalOffset="100"/>那样修改从下到上的过渡，这会有所帮助，但最终会改变你的动画，所以我认为这不是一个好方法。