WPF：更改角度动画前RotateTransform中心 [英] WPF: Change the RotateTransform center before angle animation

问题描述

我试图为我的用户控制做一个简单的旋转动画。当控件获得键盘焦点这部动画被触发。我希望它围绕其中心旋转。

的问题是，我设置原始中心点上所装载的动画控制的左下角。因此，纠正，我设置中心在上IsFocused触发器的控制的中间

但我GetKeyboardFocus动画保持原来的中心。

是的EventTrigger后执行触发器？还是我做错了什么。

 ＆LT;用户控件X：类=testtuile.rectangle
         的xmlns =htt​​p://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
         的xmlns：X =htt​​p://schemas.microsoft.com/winfx/2006/xaml
         的xmlns：MC =htt​​p://schemas.openxmlformats.org/markup-compatibility/2006
         的xmlns：D =htt​​p://schemas.microsoft.com/ex$p$pssion/blend/2008
         MC：可忽略=D
         D：DesignHeight =300D：DesignWidth =300HEIGHT =150WIDTH =300填充=4调焦=真的MouseDown =UserControl_MouseDownIsTabStop =真＆GT;
＆LT; UserControl.RenderTransform＆GT;
    ＆所述; RotateTransform角度=0的centerX =0CenterY =150＆GT;＆下; / RotateTransform＆GT;
＆LT; /UserControl.RenderTransform>
＆LT; UserControl.Style＆GT;
    ＆LT;样式和GT;
        ＆LT; Style.Triggers＆GT;
            ＆LT;触发属性=Control.IsFocusedVALUE =真＆GT;
                ＆LT; setter属性=Control.BorderBrushVALUE =黄金＆GT;＆LT; /二传手＆GT;
                ＆LT; setter属性=Control.BorderThicknessVALUE =2＆GT;＆LT; /二传手＆GT;
                ＆LT; setter属性=Control.RenderTransform＆GT;
                    ＆LT; Setter.Value＆GT;
                        ＆LT; RotateTransform的centerX =150CenterY =75/＆GT;
                    ＆LT; /Setter.Value>
                ＆LT; /二传手＆GT;
            ＆LT; /触发＆GT;
        ＆LT; /Style.Triggers>
    ＆LT; /样式和GT;
＆LT; /UserControl.Style>
＆LT; UserControl.Triggers＆GT;
    ＆LT;的EventTrigger RoutedEvent =装＆GT;
        ＆LT; EventTrigger.Actions＆GT;
            ＆LT; BeginStoryboard＆GT;
                ＆LT;情节提要＆GT;
                    ＆LT; D​​oubleAnimation是
                        Storyboard.TargetProperty =（的RenderTransform）。（RotateTransform.Angle）
                        从=90为=0时长=0：0：0.8
                        自动翻转=FALSE
                    /＆GT;
                    ＆LT; D​​oubleAnimation是
                        Storyboard.TargetProperty =透明度
                        从=0时长=0：0：0.6
                        自动翻转=FALSE
                    /＆GT;
                ＆LT; /故事板＆GT;
            ＆LT; / BeginStoryboard＆GT;
        ＆LT; /EventTrigger.Actions>
    ＆LT; /＆的EventTrigger GT;
    ＆LT;的EventTrigger RoutedEvent =GotKeyboardFocus＆GT;
        ＆LT; EventTrigger.Actions＆GT;
            ＆LT; BeginStoryboard NAME =ButtonFocusedAnimation＆GT;
                ＆LT;情节提要＆GT;                    ＆LT; D​​oubleAnimation是
                        Storyboard.TargetProperty =（的RenderTransform）。（RotateTransform.Angle）
                        从= -  2要=2持续时间=0：0：1
                        自动翻转=真的repeatBehavior =永远
                    /＆GT;
                ＆LT; /故事板＆GT;
            ＆LT; / BeginStoryboard＆GT;
        ＆LT; /EventTrigger.Actions>
    ＆LT; /＆的EventTrigger GT;
    ＆LT;的EventTrigger RoutedEvent =LostKeyboardFocus＆GT;
        ＆LT; StopStoryboard BeginStoryboardName =ButtonFocusedAnimation/＆GT;
    ＆LT; /＆的EventTrigger GT;
＆LT; /UserControl.Triggers>＆LT;网格背景=海蓝宝石＆GT;
＆LT; /网格和GT;
 

感谢您的帮助。

解决方案

您不必动画之前去改变它。要旋转轮中心点集<一href=\"http://msdn.microsoft.com/en-us/library/system.windows.uielement.rendertransformorigin.aspx\"><$c$c>UIElement.RenderTransformOrigin对用户控件：

 ＆LT;用户控件RenderTransformOrigin =0.5,0.5...＆GT;
 

  

获取或设置的中心点的任何可能的渲染由RenderTransform声明变换，相对于该元素的边界

和后来

  

RenderTransformOrigin具有稍微非标准使用Point结构值的，在该点不重present在一个坐标系中的绝对位置。相反，0和1之间的值PTED作为因数为当前元素的每个x，y轴的范围间$ P $。例如，（0.5,0.5）将导致渲染​​变换元素，或为中心（1,1）将放置在渲染元素的右下角变换

I try to do a simple rotation animation for my user control. This animation is triggered when the control get the keyboard focus. I want it to rotate around its center.

The problem is, I set the original center point on the lower left corner of the control for the loaded animation. So, to correct that, I set the center in the middle of the control on the trigger IsFocused.

But my GetKeyboardFocus animation keep the original center.

Is the trigger executed after the eventtrigger? Or I'm doing something wrong.

<UserControl x:Class="testtuile.rectangle"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" Height="150" Width="300" Padding="4" Focusable="True" MouseDown="UserControl_MouseDown" IsTabStop="True">
<UserControl.RenderTransform>
    <RotateTransform Angle="0" CenterX="0" CenterY="150"></RotateTransform>
</UserControl.RenderTransform>
<UserControl.Style>
    <Style>
        <Style.Triggers>
            <Trigger Property="Control.IsFocused" Value="True">
                <Setter Property="Control.BorderBrush" Value="Gold"></Setter>
                <Setter Property="Control.BorderThickness" Value="2"></Setter>
                <Setter Property="Control.RenderTransform">
                    <Setter.Value>
                        <RotateTransform CenterX="150" CenterY="75"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
                        From="90" To="0" Duration="0:0:0.8" 
                        AutoReverse="False" 
                    />
                    <DoubleAnimation
                        Storyboard.TargetProperty="Opacity"
                        From="0" Duration="0:0:0.6"
                        AutoReverse="False"
                    />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="GotKeyboardFocus">
        <EventTrigger.Actions>
            <BeginStoryboard Name="ButtonFocusedAnimation">
                <Storyboard>

                    <DoubleAnimation
                        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
                        From="-2" To="2" Duration="0:0:1" 
                        AutoReverse="True" RepeatBehavior="Forever" 
                    />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="LostKeyboardFocus">
        <StopStoryboard BeginStoryboardName="ButtonFocusedAnimation" />
    </EventTrigger>
</UserControl.Triggers>

<Grid Background="Aquamarine">


</Grid>

Thank you for your help.

解决方案

You don't have to change it before animation. To rotate round centre point set UIElement.RenderTransformOrigin against UserControl:

<UserControl RenderTransformOrigin="0.5,0.5" ...>

Gets or sets the center point of any possible render transform declared by RenderTransform, relative to the bounds of the element

and later

RenderTransformOrigin has a somewhat nonstandard use of the Point structure value, in that the Point does not represent an absolute location in a coordinate system. Instead, values between 0 and 1 are interpreted as a factor for the range of the current element in each x,y axis. For example, (0.5,0.5) will cause the render transform to be centered on the element, or (1,1) would place the render transform at the bottom right corner of the element

这篇关于WPF：更改角度动画前RotateTransform中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！