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位于我窗口的右上角。现在我希望控件，如果鼠标没有结束，稍微淡出屏幕，这样只有一半控件位于可见区域。我在ExitActions中使用以下DoubleAnimation尝试了它：

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

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

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

Answer 1

Margin.Left不是DependencyProperty因此您无法仅为左侧制作动画。您可以使用ThicknessAnimation为整个页边距设置动画，也可以使用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

1 个答案: