如何制作类似 Groove 的播放列表

Question

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

Answer 1

I am wondering if this is possible by using Animations with Visual State Manager?

恐怕不是，它更像是一个 ListView 上的可滑动封面，我想你可以做的是创建一个 UserControl 来显示有关播放歌曲的信息。

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

Answer 2

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

XAML:

<ScrollViewer x:Name="scrollViewer" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="SlidButtonTop">
                <VisualState.Setters>
                    <Setter Target="SlidButtonText.Text" Value="&#xE74B;"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="SlidButtonBottom">
                <VisualState.Setters>
                    <Setter Target="SlidButtonText.Text" Value="&#xE74A;"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border x:Name="Area1" Grid.Row="0" Height="{x:Bind childheight}" HorizontalAlignment="Stretch" Background="Transparent" 
                Child="{x:Bind TopContent, Mode=OneWay}"></Border>
        <Grid x:Name="SlidButton" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1"
          ManipulationStarted="SlidButton_ManipulationStarted" ManipulationCompleted="SlidButton_ManipulationCompleted" 
          ManipulationMode="All" ManipulationDelta="SlidButton_ManipulationDelta">
            <TextBlock x:Name="SlidButtonText" Text="&#xE74A;" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontFamily="Segoe MDL2 Assets" FontSize="15" />
        </Grid>
        <Border x:Name="Area2" Grid.Row="2" Height="{x:Bind childheight}" HorizontalAlignment="Stretch" Background="Transparent"
                Child="{x:Bind BottomContent, Mode=OneWay}"></Border>
    </Grid>
</ScrollViewer>

后面的代码：

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);
    }

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

非常感谢您的帮助:)

如何制作类似 Groove 的播放列表

How to make a Groove like playlist

c#

groove

uwp

uwp-xaml