Question

我想实现一个类似Groove的播放列表，现在滚动播放歌曲后可用。我想知道这是否可以通过使用动画与状态管理器动画？

Groove playlist

Answer 1

我想知道这是否可以通过使用动画状态管理器的动画来实现？

我害怕不，它更像是ListView上的滑动覆盖，我认为你可以做的是创建一个UserControl来显示有关的信息播放歌曲。

您可以参考我之前的case here。在那里，我创建了一个UserControl，可以从上到下或从下到上滑动，虽然它与Groove应用程序中的不完全相同，但我认为它们类似，你可以用作参考。

Answer 2

@GraceFeng，你的解决方案完成了工作:)这是我的代码：

XAML：

private double height;
    private double childheight;

    public SlidableControl()
    {
        this.InitializeComponent();

        height = Window.Current.Bounds.Height * 2 - 20;
        childheight = Window.Current.Bounds.Height - 20;
    }

    public static readonly DependencyProperty TopContentProperty = DependencyProperty.Register("TopContent", typeof(UIElement), typeof(SlidableControl), new PropertyMetadata(null));

    public UIElement TopContent
    {
        get { return (UIElement)GetValue(TopContentProperty); }
        set { SetValue(TopContentProperty, value); }
    }

    public static readonly DependencyProperty BottomContentProperty = DependencyProperty.Register("BottomContent", typeof(UIElement), typeof(SlidableControl), new PropertyMetadata(null));

    public UIElement BottomContent
    {
        get { return (UIElement)GetValue(BottomContentProperty); }
        set { SetValue(BottomContentProperty, value); }
    }

    public static readonly DependencyProperty MaxSlideHeightProperty = DependencyProperty.Register("MaxSlideHeight", typeof(double), typeof(SlidableControl), new PropertyMetadata(0.0));

    public double MaxSlideHeight
    {
        get { return (double)GetValue(MaxSlideHeightProperty); }
        set { SetValue(MaxSlideHeightProperty, value); }
    }

    private void SlidButton_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        scrollViewer.VerticalScrollMode = ScrollMode.Enabled;
    }

    private void SlidButton_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        scrollViewer.VerticalScrollMode = ScrollMode.Disabled;
    }

    private static double Y;

    private void SlidButton_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        var delta = Y + e.Delta.Translation.Y;

        if (delta >= -(childheight - MaxSlideHeight))
        {
            Y = Y + e.Delta.Translation.Y;
        }
        else
        {
            Y = -(childheight - MaxSlideHeight);
        }

        if (delta < (-(childheight - MaxSlideHeight) / 2))
        {
            VisualStateManager.GoToState(this, "SlidButtonTop", true);
        }
        else
        {
            VisualStateManager.GoToState(this, "SlidButtonBottom", true);
        }
        scrollViewer.ChangeView(null, -Y, null);
    }

代码背后：

Collection

我还添加了两个视觉状态来更改SlidButton图标，无论Slid是在顶部还是在底部。

非常感谢你的帮助:)。

如何制作像播放列表一样的Groove

2 个答案: