在 WPF 中旋转一组可见的元素

Question

这更多是为了向潜在客户宣传交易，因此没有人工交互组件。

现在我只是将元素绑定到 ItemsControl 并且故事板动画循环播放。不幸的是，我想一次显示 4 个项目，暂停 10 秒，然后显示接下来的 4 个。我可以有 5 个优惠券，我可以有 30 个，所以我不能静态输入任何东西，除非我知道我的可见宽度（它们将水平旋转）为 1920 像素。

我当前的实现，显示 1 到 4，然后显示 5 到 8 并循环回到“1”是：

        <ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" ItemsSource="{Binding Path=VisibleDigitalCoupons}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Storyboard x:Key="RotateDigitalCoupons" BeginTime="0:0:0" Duration="0:0:10" RepeatBehavior="Forever" Completed="RotateDigitalCouponsCompleted">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="digitalCouponView">
                                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"></EasingDoubleKeyFrame>
                                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="-1920">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <CubicEase EasingMode="EaseInOut"></CubicEase>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </DataTemplate.Resources>
                    <views:DigitalCouponView x:Name="digitalCouponView" Margin="40,40,20,20" Height="240" Width="420" RenderTransformOrigin="0.5,0.5" >
                        <views:DigitalCouponView.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform/>
                            </TransformGroup>
                        </views:DigitalCouponView.RenderTransform>
                    </views:DigitalCouponView>
                    <DataTemplate.Triggers>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <BeginStoryboard x:Name="RotateDigitalCoupons_BeginStoryboard" Storyboard="{StaticResource RotateDigitalCoupons}"/>
                        </EventTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

尝试使用 Completed 事件触发刷新“可见优惠券”并重用动画失败了，因为动画永远处于重复行为状态。但是，即使关闭它，我也没有完成事件触发，所以这是一条死胡同。

之前有人对此有任何想法或处理过吗？我的流程是否存在某种缺陷？

Answer 1

创建一个包含状态机的调度计时器，该状态机将根据当前状态执行逻辑并处理将要显示的内容的数据驱动组件。在计时器内根据需要打开和关闭动画。

当然，您需要使动画更通用，但您拥有可供计时器使用的框架。