Раскадровка анимации данных и обратный

Question

У меня есть наблюдаемая коллекция из 10 объектов, связанных на холсте контроля элементов. Каждый объект имеет свое значение canvas.right canvas.top. Идея состояла в том, чтобы щелкнуть по объекту, чтобы отредактировать его, объект должен переместиться в определенную позицию, отредактировать его, и когда он будет готов, щелкните по нему go, чтобы вернуться в исходное положение. Таким образом, я использовал флажок, чтобы иметь источник данных для анимации, у меня есть две анимации, одна для редактирования, другая для возврата. Проблема в том, что только первая анимация запускает вторую никогда, поэтому элемент управления никогда не перемещается обратно на свою позицию.

Вот код:

<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. Но в вашем случае вам нужен только один триггер с 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, go вернется к исходным значениям.