WIP: flyout page menu + graphics

MobileApp1/App.xaml.cs

@@ -17,7 +17,8 @@ namespace MobileApp1
 
             //MainPage = new AppShell();
 
-            MainPage = new NavigationPage(new LoginPage());
+            //MainPage = new NavigationPage(new LoginPage());
+            MainPage = new MainPage();
         }
 
         protected override void OnStart()

MobileApp1/MobileApp1.csproj

@@ -13,6 +13,9 @@
     <Compile Remove="Views\ItemDetailPage.xaml.cs" />
     <Compile Remove="Views\ItemsPage.xaml.cs" />
     <Compile Remove="Views\LoginPage1.xaml.cs" />
+    <Compile Remove="Views\MainPageDetail.xaml.cs" />
+    <Compile Remove="Views\MainPageFlyout.xaml.cs" />
+    <Compile Remove="Views\MainPageFlyoutMenuItem.cs" />
     <Compile Remove="Views\NewItemPage.xaml.cs" />
   </ItemGroup>
 
@@ -21,6 +24,8 @@
     <EmbeddedResource Remove="Views\ItemDetailPage.xaml" />
     <EmbeddedResource Remove="Views\ItemsPage.xaml" />
     <EmbeddedResource Remove="Views\LoginPage1.xaml" />
+    <EmbeddedResource Remove="Views\MainPageDetail.xaml" />
+    <EmbeddedResource Remove="Views\MainPageFlyout.xaml" />
     <EmbeddedResource Remove="Views\NewItemPage.xaml" />
   </ItemGroup>
 
@@ -36,6 +41,9 @@
     <Compile Update="Views\Content\CompanyHeaderView.xaml.cs">
       <DependentUpon>CompanyHeaderView.xaml</DependentUpon>
     </Compile>
+    <Compile Update="Views\BlankPage.xaml.cs">
+      <DependentUpon>BlankPage.xaml</DependentUpon>
+    </Compile>
     <Compile Update="Views\PasswordResetPage.xaml.cs">
       <DependentUpon>PasswordResetPage.xaml</DependentUpon>
     </Compile>
@@ -54,11 +62,17 @@
   </ItemGroup>
 
   <ItemGroup>
+    <EmbeddedResource Update="Views\FlyoutMenuPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
     <EmbeddedResource Update="Views\LoginPage.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
     <EmbeddedResource Update="Views\Content\Login\LoginView.xaml">
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
+    <EmbeddedResource Update="Views\MainPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
   </ItemGroup>
 </Project>

MobileApp1/Models/FlyoutPageItem.cs

@@ -0,0 +1,13 @@
+using System;
+
+namespace MobileApp1.Models
+{
+    public class FlyoutPageItem
+    {
+        public string Title { get; set; }
+
+        public string Icon { get; set; }
+
+        public Type TargetType { get; set; }
+    }
+}

MobileApp1/Views/BlankPage.xaml

@@ -0,0 +1,22 @@
+<?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="MobileApp1.Views.BlankPage"
+             xmlns:views="clr-namespace:MobileApp1.Views"
+             Title="Blank">
+    <ContentPage.Content>
+        <StackLayout Margin="20">
+            <views:CompanyHeaderView />
+
+            <StackLayout HorizontalOptions="Fill">
+                <ScrollView>
+                    <StackLayout>
+                        <Label x:Name="label1" Text="" Margin="0, 0, 0, 20" FontSize="Body" />
+
+                    </StackLayout>
+                </ScrollView>
+            </StackLayout>
+
+        </StackLayout>
+    </ContentPage.Content>
+</ContentPage>

MobileApp1/Views/BlankPage.xaml.cs

@@ -0,0 +1,16 @@
+using System;
+using Xamarin.Forms;
+
+namespace MobileApp1.Views
+{
+    public partial class BlankPage : ContentPage
+    {
+        public BlankPage()
+        {
+            InitializeComponent();
+
+            label1.Text = Guid.NewGuid().ToString();
+        }
+
+    }
+}

MobileApp1/Views/FlyoutMenuPage.xaml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage
+    xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:models="clr-namespace:MobileApp1.Models"
+    xmlns:views="clr-namespace:MobileApp1.Views"
+    x:Class="MobileApp1.Views.FlyoutMenuPage"
+    Padding="0, 20, 0, 0"
+    Title="Menu">
+    <StackLayout>
+        <Image Source="company_logo.png" WidthRequest="{OnPlatform iOS=180, Android=180}" HorizontalOptions="Center" Margin="0, 0, 0, 20" />
+
+        <ListView x:Name="listView" x:FieldModifier="Public">
+            <ListView.ItemsSource>
+                <x:Array Type="{x:Type models:FlyoutPageItem}">
+                    <models:FlyoutPageItem Title="Home" Icon="home.png" TargetType="{x:Type views:BlankPage}" />
+                    <models:FlyoutPageItem Title="My Stuff" Icon="layers.png" TargetType="{x:Type views:BlankPage}" />
+                    <models:FlyoutPageItem Title="Settings" Icon="settings.png" TargetType="{x:Type views:BlankPage}" />
+                    <models:FlyoutPageItem Title="About" Icon="help.png" TargetType="{x:Type views:BlankPage}" />
+                    <models:FlyoutPageItem Title="Logout" Icon="logout.png" TargetType="{x:Type views:BlankPage}" />
+                </x:Array>
+            </ListView.ItemsSource>
+            <ListView.ItemTemplate>
+                <DataTemplate>
+                    <ViewCell>
+                        <Grid Padding="5, 10">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="30"/>
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <Image Source="{Binding Icon}" />
+                            <Label Grid.Column="1" Text="{Binding Title}" />
+                        </Grid>
+                    </ViewCell>
+                </DataTemplate>
+            </ListView.ItemTemplate>
+        </ListView>
+    </StackLayout>
+</ContentPage>

MobileApp1/Views/FlyoutMenuPage.xaml.cs

@@ -0,0 +1,14 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace MobileApp1.Views
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class FlyoutMenuPage : ContentPage
+    {
+        public FlyoutMenuPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

MobileApp1/Views/MainPage.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:MobileApp1.Views"
+            x:Class="MobileApp1.Views.MainPage">
+    <FlyoutPage.Flyout>
+        <views:FlyoutMenuPage x:Name="flyoutPage" />
+    </FlyoutPage.Flyout>
+    <FlyoutPage.Detail>
+        <NavigationPage>
+            <x:Arguments>
+                <views:BlankPage />
+            </x:Arguments>
+        </NavigationPage>
+    </FlyoutPage.Detail>
+</FlyoutPage>

MobileApp1/Views/MainPage.xaml.cs

@@ -0,0 +1,47 @@
+using MobileApp1.Models;
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace MobileApp1.Views
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class MainPage : FlyoutPage
+    {
+        public MainPage()
+        {
+            InitializeComponent();
+
+            flyoutPage.listView.ItemSelected += listView1_OnItemSelected;
+        }
+
+        //private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
+        //{
+        //    var item = e.SelectedItem as MainPageFlyoutMenuItem;
+        //    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;
+        //}
+
+        private void listView1_OnItemSelected(object sender, SelectedItemChangedEventArgs e)
+        {
+            var item = e.SelectedItem as FlyoutPageItem;
+            if (item == null)
+            {
+                return;
+            }
+
+            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
+            flyoutPage.listView.SelectedItem = null;
+            IsPresented = false;
+        }
+
+    }
+}