スライドアップパネルを表示する方法はありますか？ユーザーがそれをスライドさせると、より多くのデータが表示されますか？

Question

画像に表示されているデータを表示するためにパネルを上下にスライドさせたいと思います。クロスプラットフォームソリューションが望ましい私はSlideOverKitを使用しようとしましたが、この種の能力を持っていないようです - あるいは間違っている可能性がありますか？そのようなシナリオのためのよりよい解決策がありますか？

Answer 1

スライドパネルを達成するための多くの方法がありますが、ここでは絶対的なレイアウト上のスワイプアップ/ダウンのためPanGestureRecognizerを使用していずれかになります。

<AbsoluteLayout BackgroundColor="Silver" AbsoluteLayout.LayoutBounds="0,1,1,1"> 
<!--   
    Your page's content here 
--> 
    <StackLayout x:Name="bottomDrawer" BackgroundColor="Olive" AbsoluteLayout.LayoutBounds="0.5,1.00,0.9,0.04" AbsoluteLayout.LayoutFlags="All"> 
     <StackLayout.GestureRecognizers> 
      <PanGestureRecognizer PanUpdated="PanGestureHandler" /> 
     </StackLayout.GestureRecognizers> 
<!--   
    Your sliding panel's content here 
--> 
     <Label x:Name="swipeLabel" Text="Swipe me up" TextColor="Black" HorizontalOptions="Center" /> 
     <Button Text="Click Me" BackgroundColor="Silver" TextColor="Black" BorderColor="Gray" BorderWidth="5" BorderRadius="20" /> 
     <Image Source="whome" /> 
    </StackLayout> 
</AbsoluteLayout> 

PanGestureRecognizerハンドラ：

double? layoutHeight; 
double layoutBoundsHeight; 
int direction; 
const double layoutPropHeightMax = 0.75; 
const double layoutPropHeightMin = 0.04; 
void PanGestureHandler(object sender, PanUpdatedEventArgs e) 
{ 
    layoutHeight = layoutHeight ?? ((sender as StackLayout).Parent as AbsoluteLayout).Height; 
    switch (e.StatusType) 
    { 
     case GestureStatus.Started: 
      layoutBoundsHeight = AbsoluteLayout.GetLayoutBounds(sender as StackLayout).Height; 
      break; 
     case GestureStatus.Running: 
      direction = e.TotalY < 0 ? 1 : -1; 
      break; 
     case GestureStatus.Completed: 
      if (direction > 0) // snap to max/min, you could use an animation.... 
      { 
       AbsoluteLayout.SetLayoutBounds(bottomDrawer, new Rectangle(0.5, 1.00, 0.9, layoutPropHeightMax)); 
       swipeLabel.Text = "Swipe me down"; 
      } 
      else 
      { 
       AbsoluteLayout.SetLayoutBounds(bottomDrawer, new Rectangle(0.5, 1.00, 0.9, layoutPropHeightMin)); 
       swipeLabel.Text = "Swipe me up"; 
      } 
      break; 
    } 
} 

は、

「p」を設定することで、パンのジェスチャーにドラッグを追加することができます「GestureStatus.Runningケースステートメント」の「anel」サイズ。以下のようなものは、あなたが開始されます：

case GestureStatus.Running: 
    direction = e.TotalY < 0 ? 1 : -1; 
    var yProp = layoutBoundsHeight + (-e.TotalY/(double)layoutHeight); 
    if ((yProp > layoutPropHeightMin) & (yProp < layoutPropHeightMax)) 
     AbsoluteLayout.SetLayoutBounds(bottomDrawer, new Rectangle(0.5, 1.00, 0.9, yProp)); 
    break; 

注：個人的に私はそれがグリッチであるとしてのみプロトタイプとして、ドラッグのこのスタイルを使用します。 Formsのレイアウトマネージャを避けるために、プラットフォームごとにカスタムレンダラを作成します。