故事板动画数据触发和反向

Question

我有一个可观察的10个对象的集合，这些对象绑定在itemscontrol canvas中。每个对象都有一个不同的canvas.right canvas.top值。想法是单击对象以对其进行编辑，该对象应移至某个位置，进行编辑，完成后单击该对象以返回其原始位置。因此，我使用了一个复选框来为动画设置数据触发器，我有两个动画，一个用于编辑，另一个用于返回。问题在于，只有第一个动画不会触发第二个动画，因此控件永远不会移回其位置。

这里是代码：

<ItemsControl ItemsSource="{Binding SelectedButtonForEdit.Layers}">
                    <ItemsControl.Template>
                        <ControlTemplate TargetType="ItemsControl">
                            <Canvas IsItemsHost="True"/>
                        </ControlTemplate>
                    </ItemsControl.Template>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="ContentPresenter">
                            <Setter Property="Canvas.Right" x:Name="right" Value="{Binding CanvasRight}"/>
                            <Setter Property="Canvas.Top" x:Name="top" Value="{Binding CanvasTop}"/>
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <CheckBox Width="342" Height="156" IsChecked="{Binding IsEditing}" BorderBrush="Black" BorderThickness="1" Style="{StaticResource MaterialDesignRaisedAccentButton}" Background="{Binding Name,Converter={StaticResource LayerNameToColor}}" >
                                            <Grid VerticalAlignment="Stretch">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition />
                                                    <RowDefinition Height="3*"/>
                                                    <RowDefinition Height="*"/>
                                            </Grid>
                                        </CheckBox>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <DataTrigger  Binding="{Binding IsEditing}" Value="False">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" Duration="0:0:0:0.1" ></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"   Duration="0:0:0:0.1" ></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>

                            <DataTrigger  Binding="{Binding IsEditing}" Value="True">
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)"  To="200" Duration="0:0:0:0.1" ></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"   To="150" Duration="0:0:0:0.1" ></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>

                        </Style>
                    </ItemsControl.ItemContainerStyle>
                </ItemsControl>

Answer 1

在第一个触发器上，您具有EnterActions，在第二个触发器上，您具有ExitActions。但是在您的情况下，您只需要1个触发器，同时包含EnterActions和ExitActions，就像这样：

<DataTrigger  Binding="{Binding IsEditing}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)"  To="200" Duration="0:0:0:0.1" ></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"   To="150" Duration="0:0:0:0.1" ></DoubleAnimation>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" Duration="0:0:0:0.1"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"   Duration="0:0:0:0.1"></DoubleAnimation>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
</DataTrigger>

在我提供的代码中，当IsEditing将变为True时，动画会将对象移至200,150，当IsEditing将变为false时，将返回到原始值。