How to make a Groove like playlist

Question

I would like to implement a Groove like playlist that is available after scrolling up now playing song. I am wondering if this is possible by using Animations with Visual State Manager?

Answer 1

@GraceFeng, Your solution did the work :) Here is my code:

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>

Code behind:

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

I have also added 2 visual states to change SlidButton icon whether Slid is on top or at the bottom.

Thanks so much for your help :)

Answer 2

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

I'm afraid no, it's more like a slid-able cover over a ListView, I think what you can do is create a UserControl for displaying the information about playing song.

You can refer to my earlier case here. There I created a UserControl which can be slide from up to down or down to up, although it's not exactly same as in the Groove app, but I think they are similar and you can use for reference.