c# - Groove風プレイリストの作り方

Question

現在再生中の曲を上にスクロールした後に利用できる、Groove のようなプレイリストを実装したいと思います。Visual State Manager でアニメーションを使用することでこれが可能かどうか疑問に思っていますか?

Answer 1

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

また、Slide が上か下かに関係なく、SlideButton アイコンを変更するための 2 つの視覚的状態を追加しました。

あなたの助けをどうもありがとう:)