如何在Xamarin的形式创建自定义抽屉？

Posted 2023-01-13

如何使用内容视图或任何其他视图创建滑下在xamarin形式的动画自定义抽屉

不使用任何支付控件，如何建立呢？

答案

我创建了类似的措施。这个工作在两个android和ios。

步骤1：添加其具有水族颜色，因为它的背景颜色和在其内的标签2的堆叠布局。

  <StackLayout x:Name="stackLayout" Margin="0,0,0,0" WidthRequest="0" HeightRequest="0" Orientation="Vertical" BackgroundColor="Aqua">
                <Label Text="Welcome" 
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand" />
                <Label Text=" Xamarin.Forms!" 
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand" />
            </StackLayout>

步骤2：在精选按钮的点击我这个动画栈布局的高度。当堆栈布局的高度为0，我是动画〜200栈布局的高度是200，我有动画显示为0。

   private void OnNextButtonClicked(object sender, EventArgs e)
            
                if (stackLayout.Height == 0)
                
                    Action<double> callback = input => stackLayout.HeightRequest = input;
                    double startingHeight = 0;
                    double endingHeight = 200;
                    uint rate = 16;
                    uint length = 3000;
                    Easing easing = Easing.CubicOut;
                    stackLayout.Animate("invis", callback, startingHeight, endingHeight, rate, length, easing);
                
                else
               
                    Action<double> callback = input => stackLayout.HeightRequest = input;
                    double startingHeight = 200;
                    double endingHeight = 0;
                    uint rate = 16;
                    uint length = 3000;
                    Easing easing = Easing.CubicIn;
                    stackLayout.Animate("inviss", callback, startingHeight, endingHeight, rate, length, easing);

                
            

你可以看到完整的文件here

另一答案

我们在使用Rg.Plugins.Popup的解决了这个。使用这个插件，你可以创建一个单独的页面代表了抽屉。这使得它易于重用它在你的应用程序。

下面是一个示例，它可以让抽屉从右边飞英寸需要注意的是，半透明的背景和填充，使下部页若隐若现。

<?xml version="1.0" encoding="UTF-8" ?>
<pages:PopupPage
    x:Class="MyNameSpace.ContextMenuPopup"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
    BackgroundColor="StaticResource Colors.TransparentMediumGray"
    Padding="113,0,0,0"
    HasSystemPadding="False">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation
            DurationIn="200"
            DurationOut="100"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"
            PositionIn="Right"
            PositionOut="Right" />
    </pages:PopupPage.Animation>
    <ContentPage.Content>
        ...
    </ContentPage.Content>
</pages:PopupPage>

在行动抽屉下面的截图。注意很酷的功能：抽屉在系统区域中可见为好。