Grooveのようなプレイリストを作成するには

Question

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

Answer 1

これは、Visual状態マネージャでアニメーションを使用することにより可能である場合、私は疑問に思って？

ノー、それはListView上をスライド可能なカバーのようなより多くのです怖い、私は何を行うことができますが、曲を演奏についての情報を表示するためのUserControlを作成していると思います。

私の以前のcase hereを参照できます。そこでは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つの視覚的な状態をもを追加しましたSlidが上か下かにかかわらずSlidButtonアイコンを変更します。

ありがとうございます。