Xamarin.Forms - 如何使左侧边栏滑出，主页面滑动

Question

我希望创建一个特定的动画，您可以从折叠的侧边栏（仍然可见但很瘦）和主页内容开始：

当您拉出左侧边栏时，侧边栏会展开，主要内容随之移动（以便主要内容的右侧部分滑出视图）：

另外，请注意侧边栏中的内容不会移动（尽管会显示其他内容（底部的按钮）），但侧边栏容器的宽度只会展开。最后，我希望用手指滑动，而不仅仅是静态动画。

如何在Xamarin.Forms中完成此操作？ （有可能吗？）

Answer 1

您可以在Telerik Xamarin Forms示例中找到它（SlideDrawer - ＆gt; Transitions / Location）

登录您的帐户（telerik.com），我认为它是免费的..

Answer 2

使用Xamarin Studio XAML预览：

将扩展事件绑定到第一个＆＃34;列中的WidthRequest＆＃34;调整它的大小并推动'＃34;正确＆＃34;一边过来。根据第一列中的控件设置，它们将展开以填充新的＆＃34;列＆＃34;宽度或保持固定的大小...

注意：我个人会使用ConstraintExpression来做这件事，以使设计真正动态，适应方向变化，不同屏幕尺寸等......

<StackLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
                   RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.75}"
</StackLayout>

上面预览图中的示例XAML：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="OpenDrawer.TestLayoutPreview">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Blue" Orientation="Horizontal">
            <StackLayout Orientation="Vertical">
                <StackLayout Orientation="Vertical" BackgroundColor="Maroon" HorizontalOptions="Start" VerticalOptions="FillAndExpand" MinimumWidthRequest="100" WidthRequest="100">
                    <Button Text="Left 1" BackgroundColor="Aqua"></Button>
                    <Button Text="Left 2" BackgroundColor="Aqua"></Button>
                    <Button Text="Left 3" BackgroundColor="Aqua"></Button>
                </StackLayout>
                <StackLayout Orientation="Vertical" VerticalOptions="End">
                    <Button Text="Left Bottom" BackgroundColor="Lime"></Button>
                </StackLayout>
            </StackLayout>
            <StackLayout Orientation="Vertical" BackgroundColor="Red" HorizontalOptions="FillAndExpand">
                <Label Text="Right" BackgroundColor="Aqua"></Label>
                <ScrollView>
                    <WebView Source="https://xamarin.com" WidthRequest="1000" HeightRequest="1000" ></WebView>
                </ScrollView>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>