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

Question

我在 itemscontrol canvas 中绑定了 10 个对象的可观察集合。每个对象都有不同的 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 时，将返回到原始值。

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

Storyboard animation datatrigger and reverse

c#

wpf

xaml

storyboard