c# - 有没有办法显示向上滑动面板，当用户向上滑动时显示更多数据？

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

您可以通过在 GestureStatus.Running case 语句中设置“面板”大小来向平移手势添加拖动。类似的东西会让你开始:

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;

注意:就我个人而言，我会使用这种拖动方式作为原型(prototype)，因为它存在故障。我会为每个平台编写一个自定义渲染器，以避免表单的布局管理器。