Question

我们正在开发跨平台Xamarin.Forms的应用程序。到目前为止，我们专注于Android。我们想在我们的一个页面上添加一个汉堡包菜单，但是我们不能使用Master-Detail页面，因为它改变了我们到目前为止的结构。因此，我们决定自己做。我们提出了这个解决方案：

我们创建了一个布局，其中网格用作工具栏，另一个网格用于页面内容。我们基本上将这个和StackLayout包装成AbsoluteLayout。 StackLayout包含菜单，并使用TranslateTo()移入或移出屏幕。

XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MenuTest.Test"
         xmlns:local="clr-namespace:MenuTest;assembly=MenuTest"
         NavigationPage.HasNavigationBar="false">
<AbsoluteLayout x:Name="content" 
                BackgroundColor="#003137" 
                AbsoluteLayout.LayoutBounds="1,1,1,1" 
                AbsoluteLayout.LayoutFlags="All">
    <Grid AbsoluteLayout.LayoutBounds="1,1,1,1" 
          AbsoluteLayout.LayoutFlags="All">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Tapped="CloseMenu"/>
            <PanGestureRecognizer PanUpdated="CloseMenu" />
        </Grid.GestureRecognizers>

        <Image Aspect="Fill">
            <Image.Source>
                <OnPlatform x:TypeArguments="ImageSource"
                        Android="Background" />
            </Image.Source>
        </Image>

        <Grid HeightRequest="60"
          BackgroundColor="#000F37"
          VerticalOptions="Start">
            <Image Source="icon_hamburger"
               Margin="10,0"
               HeightRequest="30"
               VerticalOptions="Center"
               HorizontalOptions="Start">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OpenMenu"/>
                </Image.GestureRecognizers>
            </Image>

            <Image Source="Logo"
               Margin="0"
               HeightRequest="40"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
        </Grid>

        <Grid Margin="0,60,0,0">

            <!-- Actual content of the page -->

        </Grid>
    </Grid>

    <StackLayout SizeChanged="menu_SizeChanged"  
                 x:Name="menu" BackgroundColor="#003137" 
                 AbsoluteLayout.LayoutBounds="0, 0, 0.7, 1"  
                 AbsoluteLayout.LayoutFlags="All">

        <!-- Menu content -->

    </StackLayout>
</AbsoluteLayout>
</ContentPage>

代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MenuTest
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Test : ContentPage
    {
        public Test()
        {
            InitializeComponent();
        }

        public void CloseMenu(object sender, EventArgs e)
        {
            AbsoluteLayout content = this.FindByName<AbsoluteLayout>("content");
            content.TranslateTo(0, 0, 150, Easing.Linear);
        }

        public void OpenMenu(object sender, EventArgs e)
        {
            AbsoluteLayout content = this.FindByName<AbsoluteLayout>("content");
            StackLayout menu = this.FindByName<StackLayout>("menu");
            if (content.TranslationX != menu.Width)
            {
                content.TranslateTo(menu.Width, 0, 150, Easing.Linear);
            }
            else
            {
                content.TranslateTo(0, 0, 150, Easing.Linear);
            }
        }

        private void menu_SizeChanged(object sender, EventArgs e)
        {
            StackLayout menu = this.FindByName<StackLayout>("menu");
            menu.TranslationX = -menu.Width;
        }
    }
}

我们的问题是，我们放入菜单中的任何控件都不起作用，您仍然可以打开和关闭菜单而不会出现任何问题，但是如果您在内部放置一个按钮，则可以看到它但不能点击它。

跨平台Xamarin.Forms

0 个答案: