Silverlight / Expression Blend - 使用 RenderTransform 中的计算值制作动画答案

【问题标题】：Silverlight / Expression Blend - Animate using calculated value in RenderTransformSilverlight / Expression Blend - 使用 RenderTransform 中的计算值制作动画
【发布时间】：2013-03-08 14:09:45
【问题描述】：

我在屏幕顶部有一个Rectangle，我正在尝试将其动画到屏幕底部。所以，我试图将这个屏幕的高度减去矩形的高度。由于屏幕高度会根据分辨率和浏览器大小而有所不同，因此我尝试将用户控件上的 ActualHeight 属性的值设置为动画 - 20（矩形的高度）。

有谁知道使用这个计算值作为我想要移动矩形的距离的好方法？我可以为此使用自定义表达式吗？如果可以，表达式会是什么？我还考虑向用户控件添加另一个包含该值的属性，但对我来说似乎没有必要这样做。如果可能的话，我宁愿在自定义表达式框中简单地使用一些数学。感谢您的建议。

【问题讨论】：

标签： silverlight animation expression-blend

【解决方案1】：

如果您在动画情节提要中命名元素（即使用 x:Name），则可以更改情节提要中的值，而无需在代码中创建整个内容。

这是一个完整的示例，当您调整浏览器大小时，该矩形将移动到底部：

Animation.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="StackOvewflow2.Animation"
    d:DesignWidth="640" d:DesignHeight="480"
    SizeChanged="UserControl_SizeChanged">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimation x:Name="TargetValue" Duration="0:0:1" To="380" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Rectangle x:Name="rectangle" Fill="LightBlue" Height="100" Stroke="Blue" StrokeThickness="6" VerticalAlignment="Top" HorizontalAlignment="Center" Width="400" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</UserControl>

动画.cs

using System.Windows;
using System.Windows.Controls;

namespace StackOvewflow2
{
    public partial class Animation : UserControl
    {
        public Animation()
        {
            InitializeComponent();
        }

        private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            this.TargetValue.To = e.NewSize.Height - rectangle.Height;
            Storyboard1.Begin();
        }
    }
}

【讨论】：

【解决方案2】：

如果没有一些代码，无法想象这一点。如果您的对象始终具有相同的高度，您可以创建一个转换器，该转换器返回应用程序 (App.Current.RootVisual) 的 Layout Root 的 ActualHeight 减去对象高度 (20) 并将其绑定到 DoubleAnimation 的“To”属性。

【讨论】：

啊，谢谢内斯特。这是个好主意。我会尝试一下，看看它是如何工作的。