xamarin.form MasterDetailPage

Posted 2021-01-23 jiecaoge

新建一个大纲-细节页面(MasterDetail)，是内容页面，在左侧滑动出列表

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.controls.MasterDetailPage1"
             xmlns:pages="clr-namespace:App1.controls">
  <MasterDetailPage.Master>
        这里存放Master，即选单部分
    </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
        这里存放Detail，即内容部分
    </MasterDetailPage.Detail>
</MasterDetailPage>

　　可以使用代码控制列表是否显示或者隐藏，通过代码(thisParent as MasterDetail).IsPresented = true;

如果你不想使用xamarin自带的，可以自定义一个

<RelativeLayout>
            <ContentView
                RelativeLayout.XConstraint="0"
                RelativeLayout.YConstraint="0"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
                >
                <StackLayout>
                    <Label Text="这里是Detail内容"></Label>
                    <Button Text="show more" Clicked="Button_Clicked"></Button>
                </StackLayout>
                <ContentView.GestureRecognizers>
                    <PanGestureRecognizer PanUpdated="PanGestureRecognizer_PanUpdated"></PanGestureRecognizer>
                </ContentView.GestureRecognizers>
            </ContentView>
            <BoxView BackgroundColor="Black" Opacity="0.2" x:Name="box1"
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=-1,Constant=0}"
                     RelativeLayout.YConstraint="0"
                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"    
                >
                <BoxView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                </BoxView.GestureRecognizers>
            </BoxView>
            <ContentView BackgroundColor="Red" x:Name="Master"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=-0.5,Constant=0}"
                RelativeLayout.YConstraint="0"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.5,Constant=0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
                >
                <Label Text="这里是Master内容"></Label>
            </ContentView>
        </RelativeLayout>

　　后台代码

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            
        }
        public void showMenu()
        {
            master_contraint = this.Master.X;
            box1_contraint = RelativeLayout.GetXConstraint(this.box1);
            //RelativeLayout.SetXConstraint(this.Master, Constraint.Constant(0));
            this.Master.LayoutTo(new Rectangle(0, 0, this.Master.Width, this.Master.Height));
            RelativeLayout.SetXConstraint(this.box1, Constraint.Constant(0));
        }
        public void hideMenu()
        {
            //RelativeLayout.SetXConstraint(this.Master, master_contraint);
            this.Master.LayoutTo(new Rectangle(master_contraint,0, this.Master.Width, this.Master.Height));
            RelativeLayout.SetXConstraint(this.box1, box1_contraint);
        }
        double master_contraint = 0;
        Constraint box1_contraint = null;
        private void Button_Clicked(object sender, EventArgs e)
        {
            showMenu();
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            hideMenu();
        }

        double startX = -1;
        private void PanGestureRecognizer_PanUpdated(object sender, PanUpdatedEventArgs e)
        {
            Debug.WriteLine("TotalX：{0},TotalY：{1}", e.TotalX, e.TotalY);
            switch (e.StatusType)
            {
                case GestureStatus.Started:
                    startX = e.TotalX;
                    break;
                case GestureStatus.Running:
                    if (startX != -1 && (e.TotalX - startX) > this.Width / 3)
                    {
                        showMenu();
                        startX = -1;
                    }
                    break;
                case GestureStatus.Completed:
                    startX = 0;
                    break;
            }
        }
    }

　

乞丐版的。。。。