在 StoryBoard 中移动 UserControl

Question

在我的应用程序中，我有以下 XAML-代码来为 SearchInputView 设置动画。

<Grid Grid.Row="1" HorizontalAlignment="Right" Grid.RowSpan="4" Panel.ZIndex="200" VerticalAlignment="Top" 
      Margin="0,-29,6,0">
    <Grid.Resources>
        <Duration x:Key="SearchAnimationDuration">0:0:0.4</Duration>
        <system:Double x:Key="Hidden">0.0</system:Double>
        <system:Double x:Key="Visible">1.0</system:Double>
        <system:Double x:Key="Transparent">0.5</system:Double>
        <Style TargetType="{x:Type view:SearchInputView}">
            <Style.Triggers>
                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Hidden}" To="{StaticResource Visible}" 
                                                 Duration="{StaticResource SearchAnimationDuration}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}" 
                                                 Duration="{StaticResource SearchAnimationDuration}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}" 
                                                 Duration="{StaticResource SearchAnimationDuration}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <view:SearchInputView Visibility="{Binding DataContext.SearchIsVisible, Mode=TwoWay, Converter={converter:BoolToVisibilityConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
</Grid>

SearchInputView位于我的window右上角。现在我想要控件，如果鼠标没有结束，淡出屏幕一点，这样只有一半的控件在可见区域。我在 ExitActions 中使用以下 DoubleAnimation 进行了尝试：

<DoubleAnimation Storyboard.TargetProperty="Margin.Left" To="50" Duration="0:0:0.4"/>

现在，当鼠标离开控件时，我的应用程序立即崩溃。

如何在鼠标离开时移动控件？

Answer 1

Margin.Left 不是 DependencyProperty 所以你不能只用左边的动画。您可以将 ThicknessAnimation to animate whole margin or use TranslateTransform 用作 RenderTransform 并制作动画

<Style TargetType="{x:Type view:SearchInputView}">
   <Setter Property="RenderTransform">
      <Setter.Value>
         <TranslateTransform X="0" Y="0"/>
      </Setter.Value>                     
   </Setter>
   <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
         <Trigger.EnterActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}" Duration="{StaticResource SearchAnimationDuration}"/>
                  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="0:0:0.4"/>
               </Storyboard>
            </BeginStoryboard>
         </Trigger.EnterActions>
         <Trigger.ExitActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}" Duration="{StaticResource SearchAnimationDuration}"/>
                  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="50" Duration="0:0:0.4"/>
               </Storyboard>
            </BeginStoryboard>
         </Trigger.ExitActions>
      </Trigger>
   </Style.Triggers>
</Style>

在 StoryBoard 中移动 UserControl

Move UserControl in StoryBoard

c#

wpf

animation