Windows 10で摺動可能なリストビューを作成するマップアプリケーションのようなUWPアプリケーション

Question

私はスライディングメニューに結果の配列を表示する必要があるUWPアプリケーションを作成しています。スライドメニューはスクロール可能で、スライド10月のモバイルアプリケーションのMapsアプリケーションの検索結果と同様に、その高さをに変更することができます。 このような経験を作成するチュートリアルは見つかりません。事前に

おかげ

Answer 1

あなたがこれを行うにはUserControlとUIElement.RenderTransform propertyを使用することができます。ここで

はサンプルです：

のUserControl "SlidableControl" XAML：背後

<Grid x:Name="SlidRoot" ManipulationMode="All" HorizontalAlignment="Stretch" ManipulationStarted="SlidRoot_ManipulationStarted" 
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" ManipulationDelta="SlidRoot_ManipulationDelta" 
      ManipulationCompleted="SlidRoot_ManipulationCompleted"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="30" /> 
     </Grid.RowDefinitions> 
     <Border x:Name="SlidArea" BorderBrush="Black" BorderThickness="1" Grid.Row="0" Height="{x:Bind maxheight}" Background="AliceBlue" 
       VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Child="{x:Bind SlidChild, Mode=OneWay}"> 
      <Border.RenderTransform> 
       <CompositeTransform x:Name="SlidAreaTransform" TranslateY="{Binding ElementName=SlidTitle, Path=RenderTransform.TranslateY, Mode=TwoWay}" /> 
      </Border.RenderTransform> 
     </Border> 
     <Grid x:Name="SlidTitle" Background="Gray" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1"> 
      <Grid.RenderTransform> 
       <CompositeTransform x:Name="SlidTitleTransform" /> 
      </Grid.RenderTransform> 
      <TextBlock Text="&#xE76F;" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black" FontFamily="Segoe MDL2 Assets" FontSize="25" /> 
     </Grid> 
</Grid> 

のUserControl "SlidableControl" コード：

private double maxheight; 
private double Y; 
private double finalY; 

public SlidableControl() 
{ 
    this.InitializeComponent(); 
    maxheight = Window.Current.Bounds.Height/3; 
    SlidArea.Visibility = Visibility.Collapsed; 
} 

private void SlidRoot_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e) 
{ 
    SlidArea.Visibility = Visibility.Visible; 
    SlidTitleTransform.TranslateY = -maxheight; 
} 

private void SlidRoot_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) 
{ 
    Y = e.Delta.Translation.Y; 
    finalY = SlidTitleTransform.TranslateY + Y; 
    if (Y >= 0 && finalY <= 0) 
    { 
     if (finalY < maxheight) 
      SlidTitleTransform.TranslateY = finalY; 
     else 
      SlidTitleTransform.TranslateY = 0; 
    } 
    else if (Y < 0 && finalY >= -maxheight) 
    { 
     if (finalY > -maxheight) 
      SlidTitleTransform.TranslateY = finalY; 
     else 
     { 
      SlidTitleTransform.TranslateY = -maxheight; 
     } 
    } 
} 

private void SlidRoot_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) 
{ 
    if (finalY <= -maxheight) 
    { 
     SlidArea.Visibility = Visibility.Collapsed; 
     SlidTitleTransform.TranslateY = 0; 
    } 
} 

public static readonly DependencyProperty ChildProperty = DependencyProperty.Register("SlidChild", typeof(UIElement), typeof(SlidableControl), new PropertyMetadata(null)); 

public UIElement SlidChild 
{ 
    get { return (UIElement)GetValue(ChildProperty); } 
    set { SetValue(ChildProperty, value); } 
} 

あなたは、私が公開していること、私のコードから見ることができますSlidChildプロパティです。したがって、この "SlidableControl"に他のコントロールを追加することができます。例えば、

これはコントロールの非常に初期のバージョンです。コントロールの高さなど、いくつかのプロパティを公開することができます。

ここは私のdemoです。あなたはテストを受けることができます。

この私のテストのレンダリング画像です：私たちは、上記のあなたの例の動作に変更するために探しています

Answer 2

、我々は以下の画像のように動作を変更したい（リストは上でなければなりません地図（青色のセクション）と画像の下から上へのリストの動き）、それを行うために何を変えなければならないのですか？

Answer 3

また、あなたはこれを行うにはUserControlを使用することができます。

XAML：

<ScrollViewer x:Name="scrollViewer" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden"> 
    <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="AliceBlue"></Border> 
     <Grid x:Name="SlidButton" Background="Gray" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" 
       ManipulationStarted="SlidButton_ManipulationStarted" ManipulationCompleted="SlidButton_ManipulationCompleted" 
       ManipulationMode="All" ManipulationDelta="SlidButton_ManipulationDelta"> 
      <TextBlock Text="&#xE76F;" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black" FontFamily="Segoe MDL2 Assets" FontSize="15" /> 
     </Grid> 
     <Border x:Name="Area2" Grid.Row="2" Height="{x:Bind childheight}" HorizontalAlignment="Stretch" Background="Transparent"></Border> 
    </Grid> 
</ScrollViewer> 

コードの背後にある：

private double height; 
private double childheight; 

public SlidableView() 
{ 
    this.InitializeComponent(); 
    height = Window.Current.Bounds.Height * 2 - 40; 
    childheight = Window.Current.Bounds.Height - 40; 
} 

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) 
{ 
    Y = Y + e.Delta.Translation.Y; 
    scrollViewer.ChangeView(null, -Y, null); 
} 

これは非常に単純なバージョンは、それがPCに適用される場合、 "高さ" と "childheight" を変更してください、携帯電話上で動作しています

height = Window.Current.Bounds.Height * 2 - 20; 
childheight = Window.Current.Bounds.Height - 20; 

これは非常に単純なバージョンです。このユーザーコントロールは、私の最後の答えとして2つのBorderコントロールの両方の子プロパティを公開することができます。