Question

如何使用内容视图或任何其他视图以xamarin形式的幻灯片动画创建自定义抽屉

不使用任何付费控件，如何创建它？

Answer 1

我创建了与此类似的内容。在Android和iOS上均可使用。

步骤1：添加一个堆栈布局，该布局的背景色为Aqua色，其中包含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

Answer 2

我们使用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>

在运行中的抽屉下面的屏幕截图中。注意很酷的功能：抽屉在系统区域也是可见的。

如何在Xamarin表单中创建自定义抽屉？

2 个答案: