flyout page

XamarinStudy/XamarinStudy/XamarinStudy/App.xaml.cs

@@ -22,7 +22,9 @@ namespace XamarinStudy
 			//tabbed.Children.Add(new SampleContentPage() { Title = "Page1" });
 			//tabbed.Children.Add(new SampleToolbarPage() { Title = "Page2" });
 			//MainPage = tabbed;
-			MainPage = new SampleCarouselPage();
+			//MainPage = new SampleCarouselPage();
+			//MainPage = new SampleFlyoutPage();
+			MainPage = new SampleFlyoutPage2();
 		}
 
 		protected override void OnStart()

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPage.xaml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="XamarinStudy.Views.SampleFlyoutPage"
+             xmlns:pages="clr-namespace:XamarinStudy.Views">
+  <FlyoutPage.Flyout>
+    <pages:SampleFlyoutPageFlyout x:Name="FlyoutPage" />
+  </FlyoutPage.Flyout>
+  <FlyoutPage.Detail>
+    <NavigationPage>
+      <x:Arguments>
+        <pages:SampleFlyoutPageDetail />
+      </x:Arguments>
+    </NavigationPage>
+  </FlyoutPage.Detail>
+</FlyoutPage>

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPage.xaml.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace XamarinStudy.Views
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class SampleFlyoutPage : FlyoutPage
+	{
+		public SampleFlyoutPage()
+		{
+			InitializeComponent();
+			FlyoutPage.ListView.ItemSelected += ListView_ItemSelected;
+		}
+
+		private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
+		{
+			var item = e.SelectedItem as SampleFlyoutPageFlyoutMenuItem;
+			if (item == null)
+				return;
+
+			var page = (Page)Activator.CreateInstance(item.TargetType);
+			page.Title = item.Title;
+
+			Detail = new NavigationPage(page);
+			IsPresented = false;
+
+			FlyoutPage.ListView.SelectedItem = null;
+		}
+	}
+}

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPage2.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Xamarin.Forms;
+
+namespace XamarinStudy.Views
+{
+	internal class SampleFlyoutPage2 : FlyoutPage
+	{
+		public SampleFlyoutPage2()
+		{
+			Flyout = new SampleContentPage() { Title = "FlyOutPage" };
+			Detail = new NavigationPage(new SampleToolbarPage());
+		}
+	}
+}

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPageDetail.xaml

@@ -0,0 +1,9 @@
+<?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="XamarinStudy.Views.SampleFlyoutPageDetail"
+             Title="Detail">
+  <StackLayout Padding="10">
+    <Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Flyout' page with an Icon that references it."/>
+  </StackLayout>
+</ContentPage>

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPageDetail.xaml.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace XamarinStudy.Views
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class SampleFlyoutPageDetail : ContentPage
+	{
+		public SampleFlyoutPageDetail()
+		{
+			InitializeComponent();
+		}
+	}
+}

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPageFlyout.xaml

@@ -0,0 +1,45 @@
+<?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="XamarinStudy.Views.SampleFlyoutPageFlyout"
+             Title="Flyout">
+  <StackLayout>
+    <ListView x:Name="MenuItemsListView"
+              SeparatorVisibility="None"
+              HasUnevenRows="true"
+              ItemsSource="{Binding MenuItems}">
+      <ListView.Header>
+        <Grid BackgroundColor="#03A9F4">
+          <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="10"/>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="10"/>
+          </Grid.ColumnDefinitions>
+          <Grid.RowDefinitions>
+            <RowDefinition Height="30"/>
+            <RowDefinition Height="80"/>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="10"/>
+          </Grid.RowDefinitions>
+          <Label
+              Grid.Column="1"
+              Grid.Row="2"
+              Text="AppName"
+              Style="{DynamicResource SubtitleStyle}"/>
+        </Grid>
+      </ListView.Header>
+      <ListView.ItemTemplate>
+        <DataTemplate>
+          <ViewCell>
+            <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
+              <Label VerticalOptions="FillAndExpand" 
+                    VerticalTextAlignment="Center" 
+                    Text="{Binding Title}" 
+                    FontSize="24"/>
+            </StackLayout>
+          </ViewCell>
+        </DataTemplate>
+      </ListView.ItemTemplate>
+    </ListView>
+  </StackLayout>
+</ContentPage>

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPageFlyout.xaml.cs

@@ -0,0 +1,56 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
+using System.Runtime.CompilerServices;
+using System.Text;
+using System.Threading.Tasks;
+
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace XamarinStudy.Views
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class SampleFlyoutPageFlyout : ContentPage
+	{
+		public ListView ListView;
+
+		public SampleFlyoutPageFlyout()
+		{
+			InitializeComponent();
+
+			BindingContext = new SampleFlyoutPageFlyoutViewModel();
+			ListView = MenuItemsListView;
+		}
+
+		private class SampleFlyoutPageFlyoutViewModel : INotifyPropertyChanged
+		{
+			public ObservableCollection<SampleFlyoutPageFlyoutMenuItem> MenuItems { get; set; }
+
+			public SampleFlyoutPageFlyoutViewModel()
+			{
+				MenuItems = new ObservableCollection<SampleFlyoutPageFlyoutMenuItem>(new[]
+				{
+					new SampleFlyoutPageFlyoutMenuItem { Id = 0, Title = "Page 1" },
+					new SampleFlyoutPageFlyoutMenuItem { Id = 1, Title = "Page 2" },
+					new SampleFlyoutPageFlyoutMenuItem { Id = 2, Title = "Page 3" },
+					new SampleFlyoutPageFlyoutMenuItem { Id = 3, Title = "Page 4" },
+					new SampleFlyoutPageFlyoutMenuItem { Id = 4, Title = "Page 5" },
+				});
+			}
+
+			#region INotifyPropertyChanged Implementation
+			public event PropertyChangedEventHandler PropertyChanged;
+			void OnPropertyChanged([CallerMemberName] string propertyName = "")
+			{
+				if (PropertyChanged == null)
+					return;
+
+				PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
+			}
+			#endregion
+		}
+	}
+}

XamarinStudy/XamarinStudy/XamarinStudy/Views/SampleFlyoutPageFlyoutMenuItem.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace XamarinStudy.Views
+{
+	public class SampleFlyoutPageFlyoutMenuItem
+	{
+		public SampleFlyoutPageFlyoutMenuItem()
+		{
+			TargetType = typeof(SampleFlyoutPageFlyoutMenuItem);
+		}
+		public int Id { get; set; }
+		public string Title { get; set; }
+
+		public Type TargetType { get; set; }
+	}
+}

XamarinStudy/XamarinStudy/XamarinStudy/XamarinStudy.csproj

@@ -14,6 +14,15 @@
     <EmbeddedResource Update="Views\SampleContentPage.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
+    <EmbeddedResource Update="Views\SampleFlyoutPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
+    <EmbeddedResource Update="Views\SampleFlyoutPageDetail.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
+    <EmbeddedResource Update="Views\SampleFlyoutPageFlyout.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
     <EmbeddedResource Update="Views\SampleTabPage.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>