[foldable] TwoPaneView .NET7 sample (dotnet#293)

* [foldable] add TwoPaneView sample

* [foldable] fix TwoPaneView README

7.0/UserInterface/Controls/TwoPaneView/App.xaml

@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MauiTwoPaneViewDemo"
+             x:Class="MauiTwoPaneViewDemo.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

7.0/UserInterface/Controls/TwoPaneView/App.xaml.cs

@@ -0,0 +1,11 @@
+namespace MauiTwoPaneViewDemo;
+
+public partial class App : Application
+{
+	public App()
+	{
+		InitializeComponent();
+
+		MainPage = new AppShell();
+	}
+}

7.0/UserInterface/Controls/TwoPaneView/AppShell.xaml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="MauiTwoPaneViewDemo.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:MauiTwoPaneViewDemo"
+    Shell.FlyoutBehavior="Disabled">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

7.0/UserInterface/Controls/TwoPaneView/AppShell.xaml.cs

@@ -0,0 +1,9 @@
+namespace MauiTwoPaneViewDemo;
+
+public partial class AppShell : Shell
+{
+	public AppShell()
+	{
+		InitializeComponent();
+	}
+}

7.0/UserInterface/Controls/TwoPaneView/MainPage.xaml

@@ -0,0 +1,90 @@
+<?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"
+             xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"
+             x:Class="MauiTwoPaneViewDemo.MainPage">
+
+    <foldable:TwoPaneView x:Name="twoPaneView"
+                        MinTallModeHeight="{Binding Source={x:Reference MinTallModeHeight}, Path=Value}"
+                        MinWideModeWidth="{Binding Source={x:Reference MinWideModeWidth}, Path=Value}"
+                        TallModeConfiguration="{Binding Source={x:Reference TallModeConfiguration}, Path=SelectedItem}"
+                        WideModeConfiguration="{Binding Source={x:Reference WideModeConfiguration}, Path=SelectedItem}"
+                        PanePriority="{Binding Source={x:Reference PanePriority}, Path=SelectedItem, Mode=TwoWay}"
+        >
+        <foldable:TwoPaneView.Pane1
+            BackgroundColor="#dddddd">
+            <Frame BorderColor="Red">
+                <StackLayout BackgroundColor="Blue"
+                                 Orientation="Vertical"
+                                 VerticalOptions="StartAndExpand"
+                                 Padding="5"
+                                 >
+
+                    <Label Text="ScreenSize" x:Name="sizeLabel"/>
+                    <Label Text="SinglePane" x:Name="spanLabel"/>
+                    <Label Text="Hinge" x:Name="hingeLabel"/>
+
+                    <Label Text=""/>
+                    <Label Text="MinTallModeHeight"/>
+                    <Slider x:Name="MinTallModeHeight" Maximum="2000" />
+                    <Label Text="MinWideModeWidth"/>
+                    <Slider x:Name="MinWideModeWidth" Maximum="2000" />
+
+                    <Label Text=""/>
+                    <Label Text="Pane1Length"/>
+                    <Slider x:Name="Pane1Length" Maximum="1" Value="0.5" />
+                    <Label Text="Pane2Length"/>
+                    <Slider x:Name="Pane2Length" Maximum="1" Value="0.5" />
+
+                    <Label Text=""/>
+                    <Picker x:Name="PanePriority" Title="PanePriority" SelectedIndex="0" />
+                    <Picker x:Name="TallModeConfiguration" Title="TallModeConfiguration" SelectedIndex="1" />
+                    <Picker x:Name="WideModeConfiguration" Title="WideModeConfiguration" SelectedIndex="1" />
+
+                    <Label Text=""/>
+                    <Label Text="Jetpack Window Manager 1.0.0"/>
+                    <Button Text="Reset TwoPaneView" Clicked="OnReset" HorizontalOptions="Center"/>
+                </StackLayout>
+            </Frame>
+        </foldable:TwoPaneView.Pane1>
+        <foldable:TwoPaneView.Pane2>
+            <ScrollView>
+                <VerticalStackLayout
+                    Spacing="25"
+                    Padding="30,0"
+                    VerticalOptions="Center">
+
+                    <Image
+                        Source="dotnet_bot.png"
+                        SemanticProperties.Description="Cute dot net bot waving hi to you!"
+                        HeightRequest="200"
+                        HorizontalOptions="Center" />
+
+                    <Label
+                        Text="Hello, foldable!"
+                        SemanticProperties.HeadingLevel="Level1"
+                        FontSize="32"
+                        HorizontalOptions="Center" />
+
+                    <Label
+                        Text="Welcome to .NET Multi-platform App UI"
+                        SemanticProperties.HeadingLevel="Level2"
+                        SemanticProperties.Description="Welcome to dot net Multi platform App U I"
+                        FontSize="18"
+                        HorizontalOptions="Center" />
+
+                    <Button
+                        x:Name="CounterBtn"
+                        Text="Click me"
+                        SemanticProperties.Hint="Counts the number of times you click"
+                        Clicked="OnCounterClicked"
+                        HorizontalOptions="Center" />
+
+                    <Button Text="Reset TwoPaneView" Clicked="OnReset"
+                        HorizontalOptions="Center"/>
+
+                </VerticalStackLayout>
+            </ScrollView>
+        </foldable:TwoPaneView.Pane2>
+    </foldable:TwoPaneView>
+</ContentPage>

7.0/UserInterface/Controls/TwoPaneView/MainPage.xaml.cs

@@ -0,0 +1,83 @@
+using Microsoft.Maui.Controls.Foldable;
+using Microsoft.Maui.Foldable;
+
+namespace MauiTwoPaneViewDemo;
+
+public partial class MainPage : ContentPage
+{
+    int count = 0;
+
+    public MainPage()
+    {
+        InitializeComponent();
+
+        Pane1Length.ValueChanged += PaneLength_ValueChanged;
+        Pane2Length.ValueChanged += PaneLength_ValueChanged;
+        PanePriority.ItemsSource = System.Enum.GetValues(typeof(TwoPaneViewPriority));
+        TallModeConfiguration.ItemsSource = System.Enum.GetValues(typeof(TwoPaneViewTallModeConfiguration));
+        WideModeConfiguration.ItemsSource = System.Enum.GetValues(typeof(TwoPaneViewWideModeConfiguration));
+
+        OnReset(null, null);
+    }
+
+    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);
+    }
+
+    private void PaneLength_ValueChanged(object sender, Microsoft.Maui.Controls.ValueChangedEventArgs e)
+    {
+        twoPaneView.Pane1Length = new GridLength(Pane1Length.Value, GridUnitType.Star);
+        twoPaneView.Pane2Length = new GridLength(Pane2Length.Value, GridUnitType.Star);
+    }
+
+    protected override async void OnAppearing()
+    {
+        base.OnAppearing();
+        System.Diagnostics.Debug.Write("TwoPaneViewPage.OnAppearing - hinge angle prepped", "JWM");
+        DualScreenInfo.Current.HingeAngleChanged += Current_HingeAngleChanged;
+        DualScreenInfo.Current.PropertyChanged += Current_PropertyChanged;
+
+        PanePriority.SelectedIndex = 0;
+        TallModeConfiguration.SelectedIndex = 1;
+        WideModeConfiguration.SelectedIndex = 1;
+
+        hingeLabel.Text = "Hinge prepped " + await DualScreenInfo.Current.GetHingeAngleAsync();
+    }
+
+    private void Current_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
+    {
+        spanLabel.Text += "Spanmode: " + DualScreenInfo.Current.SpanMode;
+    }
+
+    protected override void OnDisappearing()
+    {
+        DualScreenInfo.Current.HingeAngleChanged -= Current_HingeAngleChanged;
+        DualScreenInfo.Current.PropertyChanged -= Current_PropertyChanged;
+    }
+    private void Current_HingeAngleChanged(object sender, HingeAngleChangedEventArgs e)
+    {
+        System.Diagnostics.Debug.Write("TwoPaneViewPage.Current_HingeAngleChanged - " + e.HingeAngleInDegrees, "JWM");
+
+        hingeLabel.Text = "Hinge angle: " + e.HingeAngleInDegrees + " degrees";
+    }
+
+    void OnReset(object sender, System.EventArgs e)
+    {
+        PanePriority.SelectedIndex = 0;
+        Pane1Length.Value = 0.5;
+        Pane2Length.Value = 0.5;
+        TallModeConfiguration.SelectedIndex = 1;
+        WideModeConfiguration.SelectedIndex = 1;
+        MinTallModeHeight.Value = 0;
+        MinWideModeWidth.Value = 0;
+    }
+}
+

7.0/UserInterface/Controls/TwoPaneView/MauiProgram.cs

@@ -0,0 +1,28 @@
+using Microsoft.Extensions.Logging;
+using Microsoft.Maui.Foldable;
+
+namespace MauiTwoPaneViewDemo;
+
+public static class MauiProgram
+{
+	public static MauiApp CreateMauiApp()
+	{
+		var builder = MauiApp.CreateBuilder();
+		builder
+			.UseMauiApp<App>()
+			.ConfigureFonts(fonts =>
+			{
+				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+			});
+
+#if DEBUG
+		builder.Logging.AddDebug();
+#endif
+
+        // Adapt to dual-screen and foldable Android devices like Surface Duo, includes TwoPaneView layout control
+        builder.UseFoldable();
+
+        return builder.Build();
+	}
+}

7.0/UserInterface/Controls/TwoPaneView/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+</manifest>

7.0/UserInterface/Controls/TwoPaneView/Platforms/Android/MainActivity.cs

@@ -0,0 +1,10 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+
+namespace MauiTwoPaneViewDemo;
+
+[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
+public class MainActivity : MauiAppCompatActivity
+{
+}

7.0/UserInterface/Controls/TwoPaneView/Platforms/Android/MainApplication.cs

@@ -0,0 +1,15 @@
+using Android.App;
+using Android.Runtime;
+
+namespace MauiTwoPaneViewDemo;
+
+[Application]
+public class MainApplication : MauiApplication
+{
+	public MainApplication(IntPtr handle, JniHandleOwnership ownership)
+		: base(handle, ownership)
+	{
+	}
+
+	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+}

7.0/UserInterface/Controls/TwoPaneView/Platforms/Android/Resources/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#512BD4</color>
+    <color name="colorPrimaryDark">#2B0B98</color>
+    <color name="colorAccent">#2B0B98</color>
+</resources>

7.0/UserInterface/Controls/TwoPaneView/Platforms/MacCatalyst/AppDelegate.cs

@@ -0,0 +1,9 @@
+using Foundation;
+
+namespace MauiTwoPaneViewDemo;
+
+[Register("AppDelegate")]
+public class AppDelegate : MauiUIApplicationDelegate
+{
+	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+}

7.0/UserInterface/Controls/TwoPaneView/Platforms/MacCatalyst/Info.plist

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>UIDeviceFamily</key>
+	<array>
+		<integer>1</integer>
+		<integer>2</integer>
+	</array>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>XSAppIconAssets</key>
+	<string>Assets.xcassets/appicon.appiconset</string>
+</dict>
+</plist>

7.0/UserInterface/Controls/TwoPaneView/Platforms/MacCatalyst/Program.cs

@@ -0,0 +1,15 @@
+using ObjCRuntime;
+using UIKit;
+
+namespace MauiTwoPaneViewDemo;
+
+public class Program
+{
+	// This is the main entry point of the application.
+	static void Main(string[] args)
+	{
+		// if you want to use a different Application Delegate class from "AppDelegate"
+		// you can specify it here.
+		UIApplication.Main(args, null, typeof(AppDelegate));
+	}
+}

7.0/UserInterface/Controls/TwoPaneView/Platforms/Tizen/Main.cs

@@ -0,0 +1,16 @@
+using System;
+using Microsoft.Maui;
+using Microsoft.Maui.Hosting;
+
+namespace MauiTwoPaneViewDemo;
+
+class Program : MauiApplication
+{
+	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+
+	static void Main(string[] args)
+	{
+		var app = new Program();
+		app.Run(args);
+	}
+}

7.0/UserInterface/Controls/TwoPaneView/Platforms/Tizen/tizen-manifest.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest package="maui-application-id-placeholder" version="0.0.0" api-version="7" xmlns="http://tizen.org/ns/packages">
+  <profile name="common" />
+  <ui-application appid="maui-application-id-placeholder" exec="MauiTwoPaneViewDemo.dll" multiple="false" nodisplay="false" taskmanage="true" type="dotnet" launch_mode="single">
+    <label>maui-application-title-placeholder</label>
+    <icon>maui-appicon-placeholder</icon>
+    <metadata key="http://tizen.org/metadata/prefer_dotnet_aot" value="true" />
+  </ui-application>
+  <shortcut-list />
+  <privileges>
+    <privilege>http://tizen.org/privilege/internet</privilege>
+  </privileges> 
+  <dependencies />
+  <provides-appdefined-privileges />
+</manifest>

7.0/UserInterface/Controls/TwoPaneView/Platforms/Windows/App.xaml

@@ -0,0 +1,8 @@
+<maui:MauiWinUIApplication
+    x:Class="MauiTwoPaneViewDemo.WinUI.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:maui="using:Microsoft.Maui"
+    xmlns:local="using:MauiTwoPaneViewDemo.WinUI">
+
+</maui:MauiWinUIApplication>