如何重置我的 WPF 动画

Question

所以我创建了一个 UserControl，并为它创建了一个依赖项属性，这样我就可以将它用于我的动画。动画有效，它启动了，但是当我单击一个新项目时它不会滑动返回它跳回到开始然后重新启动。

如何让动画滑回。这是由于 OnSelectionChanged 中的 true 和 false 语句。

<Grid.Resources>
            <system:Double x:Key="SlideOffSet">50</system:Double>
            <Storyboard x:Key="SlideRight">
                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                 From="0" To="{StaticResource SlideOffSet}"
                                 Duration="0:0:0.2" />
            </Storyboard>
            <Storyboard x:Key="SlideLeft">
                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                 From="{StaticResource SlideOffSet}" To="0"
                                 Duration="0:0:0.2" />
            </Storyboard>
        </Grid.Resources>

<local:CustomizedList x:Name="uc" Margin="5" Grid.Column="0" DataContext="{Binding}" />

 <StackPanel Grid.Column="2"
                    Width="50"
                    Height="50"
                    Background="Gray">

            <StackPanel.Style>
                <Style TargetType="StackPanel">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=uc, Path=SelectedItem}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource SlideRight}" />
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource SlideLeft}" />
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </StackPanel.Style>

            <StackPanel.RenderTransform>
                <TranslateTransform />
            </StackPanel.RenderTransform>

        </StackPanel>

用户控件

<ListBox ItemsSource="{Binding}" x:Name="list" HorizontalContentAlignment="Stretch" SelectionChanged="List_OnSelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Margin="2" BorderThickness="2" CornerRadius="3" BorderBrush="Brown">
                        <TextBlock Text="{Binding}" Margin="1">
                            <TextBlock.Background>
                                <LinearGradientBrush>
                                    <GradientStop Offset="0" Color="AliceBlue"/>
                                    <GradientStop Offset="1" Color="Blue"/>
                                </LinearGradientBrush>
                            </TextBlock.Background>
                        </TextBlock>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

以及依赖项的 SelectionChanged 事件属性

public static readonly DependencyProperty SelectedItemProperty =
            DependencyProperty.Register("SelectedItem", typeof(bool), typeof(CustomizedList));

        public bool SelectedItem
        {
            get { return (bool)GetValue(SelectedItemProperty); }
            set { SetValue(SelectedItemProperty, value); }
        }

        private void List_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            SelectedItem = false;
            SelectedItem = true;
        }

Answer 1

When the item is selected I want it to be true and when another item is selected, make it slide back and slide out again

那么，在将属性设置回 true 之前，您需要异步等待动画发生。试试这个：

private async void List_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    SelectedItem = false;
    await Task.Delay(1000); //wait for a second
    SelectedItem = true;
}

如何重置我的 WPF 动画

How do I reset my WPF Animation

c#

wpf

animation

dependency-properties

mvvm