xamarin.form MasterDetailPage
阿新 • • 發佈:2018-11-29
新建一個大綱-細節頁面(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; } } }
乞丐版的。。。。