xamarin.forms - 页面底部的滑动信息框

时间:2017-09-22 05:44:34

标签: c# animation xamarin mvvm xamarin.forms

我正在学习xamarin.forms技术。标题是什么意思是我想制作滑动信息框(从屏幕的底部,左侧或右侧)。一切都应该在页面/视图的底部。在xamarin.forms中放置底部的内容也很小巧。

Slides

我想这样做而不是对话,因为当警报对话框弹出而我不想让用户点击任何东西时,我不想让ui感到虚弱

你们能告诉我我该怎么办?

3 个答案:

答案 0 :(得分:2)

You should use AbsoluteLayout for this, there goes an example:

// ContentPage:

var layout = new StackLayout {
 // you page content
};

Content = new NotifyLayoutView(layout);

And view class:

public class NotifyLayoutView : AbsoluteLayout
{
   public NotifyLayoutView(View content)
   {
        var flash = new StackLayout
        {
            BackgroundColor = Color.Red,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            Children = {
               new Label { Text = "My notification" }
            }
        };

        SetLayoutFlags(content, AbsoluteLayoutFlags.All);
        SetLayoutBounds(content, new Rectangle(0f, 0f, 1f, 1f));
        SetLayoutFlags(flash, AbsoluteLayoutFlags.WidthProportional | 
        AbsoluteLayoutFlags.PositionProportional);
        SetLayoutBounds(flash, new Rectangle(0.5, 0.99, 0.95, AutoSize));
        Children.Add(content);
        Children.Add(flash);
   }
}

To change flash visibility you can use:

// open
await flash.ScaleTo(1.0f, 100);
await flash.FadeTo(1.0f, 100);

// hide
await layout.ScaleTo(0.0f);
await layout.FadeTo(0.0f);

答案 1 :(得分:0)

或尝试使用SlideOverKit(nuget package:https://www.nuget.org/packages/SlideOverKit/

答案 2 :(得分:0)

而不是去任何nuget包。您可以自己创建它,以便对其进行控制。 使用PanGesture和TranslateTo方法以及具有约束的相对布局来创建它。

void PanGestureRecognizer_PanUpdated(System.Object sender, Xamarin.Forms.PanUpdatedEventArgs e)
{
y = e.TotalY;
switch (e.StatusType)
{
case GestureStatus.Started:
break;
case GestureStatus.Canceled:
break;
case GestureStatus.Running:
if ((y >= 5 || y <= -5) && !IsTurnY)
{
IsTurnY = true;
}
if (IsTurnY)
{
if (y <= valueY)
{
//iOS devices has top and bottom insets so the value is changed accordingly.
//get the top and bottom insets and adjst the values accordingly for bottom sheet to work correct in real devices
double valueToDeduct = 180;
//upwards dragged
if ((currentY + (-1 * y)) < (App.screenHeight — valueToDeduct))
{
BottomSheet.TranslateTo(BottomSheet.X, -(currentY + (-1 * y)));
currentY = currentY — y;
//Task.Delay(200);
}
else
{
//to avoid the bottomsheet go beyond the device height
BottomSheet.TranslateTo(BottomSheet.X, -(App.screenHeight — valueToDeduct));
currentY = (App.screenHeight — valueToDeduct);
}
}
if (y >= valueY)
{
//downwards dragged
if ((currentY — y) > 0)
{
BottomSheet.TranslateTo(BottomSheet.X, -(currentY — y));
currentY = currentY — y;
//Task.Delay(200);
}
else
{
//to avoid bottomsheet to hide below the screen height
BottomSheet.TranslateTo(BottomSheet.X, -0);
currentY = 0;
}
}
}
}
break;
case GestureStatus.Completed:
//store the translation applied during the pan
valueY = y;
IsTurnY = false;
break;
}
}

这是您可以参考的资源,

https://youtu.be/zIIoCJ2r7xs