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

Question

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

Answer 1

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

恐怕不，它更像是一个可滑动的封面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 是在顶部还是在底部。

非常感谢你的帮助 ：）