对 FrameworkElement 的大小进行动画处理

对 FrameworkElement 的大小进行动画处理        

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： Visual Studio 2015 * SQL Server

作者：

撰写时间：2019年07月07日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

要进行动画处理的大小FrameworkElement，也可以动态显示其Width并Height属性或使用经过动画处理的ScaleTransform。

 

在下面的示例之间进行动画处理使用这两种方法的两个按钮的大小。 通过对进行动画处理调整一个按钮的大小及其Width由进行动画处理调整大小属性，另一个ScaleTransform应用于其RenderTransform属性。 每个按钮包含一些文本。 最初的文本将出现在这两个按钮中相同，但这些按钮会调整大小时，第二个按钮中的文本会显得失真。

 

 

<Canvas Width="650" Height="400">

        <Button Name="AnimatedWidthButton"

      Canvas.Left="20" Canvas.Top="20"      

      Width="200" Height="150"

      BorderBrush="Red" BorderThickness="5">

            Click Me

            <Button.Triggers>

 

                <!-- Animate the button's Width property. -->

                <EventTrigger RoutedEvent="Button.Loaded">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation

                Storyboard.TargetName="AnimatedWidthButton"

                Storyboard.TargetProperty="(Button.Width)"

                To="500" Duration="0:0:10" AutoReverse="True" 

                RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Button.Triggers>

        </Button>

        <Button 

      Canvas.Left="20" Canvas.Top="200"

      Width="200" Height="150"

      BorderBrush="Black" BorderThickness="3">

            Click Me

            <Button.RenderTransform>

                <ScaleTransform x:Name="MyAnimatedScaleTransform" 

          ScaleX="1" ScaleY="1"  />

            </Button.RenderTransform>

            <Button.Triggers>

 

                <!-- Animate the ScaleX property of a ScaleTransform

             applied to the button. -->

                <EventTrigger RoutedEvent="Button.Loaded">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation

                Storyboard.TargetName="MyAnimatedScaleTransform"

                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"

                To="3.0" Duration="0:0:10" AutoReverse="True"

                RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Button.Triggers>

        </Button>

</Canvas>

 

在转换元素时，转换整个元素及其内容。 直接更改的大小的元素，如下所示的第一个按钮，这种情况时除非其大小和位置取决于其父元素的大小，否则无法调整大小的元素的内容。

通过将应用到动画的转换对元素的大小进行动画处理其RenderTransform属性提供了更好的性能不是进行动画处理其Width并Height直接，因为RenderTransform属性不会触发布局过程。