FlyoutPage1.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="MobileAPP.FlyoutPage1"
+             xmlns:pages="clr-namespace:MobileAPP">
+  <FlyoutPage.Flyout>
+    <pages:FlyoutPage1Flyout x:Name="FlyoutPage" />
+  </FlyoutPage.Flyout>
+  <FlyoutPage.Detail>
+    <NavigationPage>
+      <x:Arguments>
+        <pages:FlyoutPage1Detail />
+      </x:Arguments>
+    </NavigationPage>
+  </FlyoutPage.Detail>
+</FlyoutPage>

FlyoutPage1.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 MobileAPP
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class FlyoutPage1 : FlyoutPage
+    {
+        public FlyoutPage1()
+        {
+            InitializeComponent();
+            FlyoutPage.ListView.ItemSelected += ListView_ItemSelected;
+        }
+
+        private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
+        {
+            var item = e.SelectedItem as FlyoutPage1FlyoutMenuItem;
+            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;
+        }
+    }
+}

FlyoutPage1Detail.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="MobileAPP.FlyoutPage1Detail"
+             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>

FlyoutPage1Detail.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 MobileAPP
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class FlyoutPage1Detail : ContentPage
+    {
+        public FlyoutPage1Detail()
+        {
+            InitializeComponent();
+        }
+    }
+}

FlyoutPage1Flyout.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="MobileAPP.FlyoutPage1Flyout"
+             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>

FlyoutPage1Flyout.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 MobileAPP
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class FlyoutPage1Flyout : ContentPage
+    {
+        public ListView ListView;
+
+        public FlyoutPage1Flyout()
+        {
+            InitializeComponent();
+
+            BindingContext = new FlyoutPage1FlyoutViewModel();
+            ListView = MenuItemsListView;
+        }
+
+        private class FlyoutPage1FlyoutViewModel : INotifyPropertyChanged
+        {
+            public ObservableCollection<FlyoutPage1FlyoutMenuItem> MenuItems { get; set; }
+
+            public FlyoutPage1FlyoutViewModel()
+            {
+                MenuItems = new ObservableCollection<FlyoutPage1FlyoutMenuItem>(new[]
+                {
+                    new FlyoutPage1FlyoutMenuItem { Id = 0, Title = "Page 1" },
+                    new FlyoutPage1FlyoutMenuItem { Id = 1, Title = "Page 2" },
+                    new FlyoutPage1FlyoutMenuItem { Id = 2, Title = "Page 3" },
+                    new FlyoutPage1FlyoutMenuItem { Id = 3, Title = "Page 4" },
+                    new FlyoutPage1FlyoutMenuItem { 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
+        }
+    }
+}

MainPage.xaml

@@ -3,36 +3,34 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="MobileAPP.MainPage">
 
-    <Grid>
+    <ScrollView>
-        <Grid.RowDefinitions>
+        <VerticalStackLayout
-            <RowDefinition Height="100"/>
+            Padding="30,0"
-            <RowDefinition Height="450"/>
+            Spacing="25">
-            <RowDefinition Height="*"/>
+            <Image
-        </Grid.RowDefinitions>
+                Source="dotnet_bot.png"
-        <StackLayout>
+                HeightRequest="185"
-            <Label
+                Aspect="AspectFit"
-                Text="Привет!"
+                SemanticProperties.Description="dot net bot in a race car number eight" />
-                Style="{StaticResource Headline}" TextColor="Black" FontSize="32"/>
-            <Label
-                Text="Заолните Свои Данные Или Продолжие Через Социальные Медиа"
-                Style="{StaticResource SubHeadline}" TextColor="#707B81" FontSize="16"/>
-        </StackLayout>
-        <StackLayout Grid.Row="1">
-            <Label Text="Email" Margin="20" FontSize="16"/>
-            <Frame CornerRadius="30" BackgroundColor="#F7F7F9" Padding="5" BorderColor="Transparent">
-                <Entry Placeholder="xyz@gmail.com" TextColor="#D8D8D8" Background="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
-            </Frame>
-            <Label Text="Пароль" Margin="20" FontSize="16"/>
-            <Frame CornerRadius="30" BackgroundColor="#F7F7F9" Padding="5" BorderColor="Transparent">
-                <Entry Placeholder="*******" TextColor="#D8D8D8" Background ="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
-            </Frame>
-            <Button Text="Восстановить" Background="Transparent" TextColor="#D8D8D8" HorizontalOptions="End"/>
-            <Button Text="Войти" BackgroundColor="#48B2E7" Margin="10"/>
-        </StackLayout>
-        <HorizontalStackLayout Grid.Row="2" VerticalOptions="Center" HorizontalOptions="Center">
-            <Label FontSize="12" Text="Вы Впервые?" TextColor="#707B81" Margin="5"/>
-            <Button FontSize="12" BackgroundColor="Transparent" Text=" Создать Пользователя" TextColor="Black" Margin="-10"/>
-        </HorizontalStackLayout>
-    </Grid>
 
-</ContentPage>
+            <Label
+                Text="Hello, World!"
+                Style="{StaticResource Headline}"
+                SemanticProperties.HeadingLevel="Level1" />
+
+            <Label
+                Text="Welcome to &#10;.NET Multi-platform App UI"
+                Style="{StaticResource SubHeadline}"
+                SemanticProperties.HeadingLevel="Level2"
+                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
+
+            <Button
+                x:Name="CounterBtn"
+                Text="Click me" 
+                SemanticProperties.Hint="Counts the number of times you click"
+                Clicked="OnCounterClicked"
+                HorizontalOptions="Fill" />
+        </VerticalStackLayout>
+    </ScrollView>
+
+</ContentPage>

MainPage.xaml.cs

@@ -8,6 +8,18 @@
         {
             InitializeComponent();
         }
+
+        private void OnCounterClicked(object sender, EventArgs e)
+        {
+            count++;
+
+            if (count == 1)
+                CounterBtn.Text = $"Clicked {count} time";
+            else
+                CounterBtn.Text = $"Clicked {count} times";
+
+            SemanticScreenReader.Announce(CounterBtn.Text);
+        }
     }
 
 }

MobileAPP.csproj

@@ -62,10 +62,4 @@
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
 	</ItemGroup>
 
-	<ItemGroup>
-	  <MauiXaml Update="NewPage1.xaml">
-	    <Generator>MSBuild:Compile</Generator>
-	  </MauiXaml>
-	</ItemGroup>
-
 </Project>

MobileAPP.csproj.user

@@ -11,11 +11,6 @@
     </Compile>
   </ItemGroup>
   <ItemGroup>
-    <MauiXaml Update="NewPage1.xaml">
-      <SubType>Designer</SubType>
-    </MauiXaml>
-  </ItemGroup>
-  <ItemGroup>
     <None Update="App.xaml">
       <SubType>Designer</SubType>
     </None>

NewPage1.xaml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="MobileAPP.NewPage1"
-             Title="NewPage1">
-    <VerticalStackLayout>
-        <Label 
-            Text="Welcome to .NET MAUI!"
-            VerticalOptions="Center" 
-            HorizontalOptions="Center" />
-    </VerticalStackLayout>
-</ContentPage>

NewPage1.xaml.cs

@@ -1,9 +0,0 @@
-namespace MobileAPP;
-
-public partial class NewPage1 : ContentPage
-{
-	public NewPage1()
-	{
-		InitializeComponent();
-	}
-}