feat(html_samples): Added HtmlControls samples. Demonstrate how to co…

…nnect to _native_ HTML elements.

README.md

@@ -40,7 +40,12 @@ A simple example using the `TwoPaneView` control spanned across dual screens (su
 An example that demonstrates the use of embedded resources and how to read them from your app.
 Note that the [`Default namespace`](https://stackoverflow.com/questions/2871314/change-project-namespace-in-visual-studio) property of all projects is the same in order for the embedded resources names to be the same on all platforms.
 
+### HtmlControls
+
+This is a WASM-only sample. It is creating _native_ HTML elements that can be used directly in XAML.
+
 ## LocalizationSamples
+
 A collection samples related to localization:
 - Localization: A sample showcasing the basics of localization.  
   [Browse source](UI/Localization/Localization)

UI/HtmlControls/HtmlControls.Shared/App.xaml

@@ -0,0 +1,11 @@
+<Application
+    x:Class="HtmlControls.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:HtmlControls">
+
+	<Application.Resources>
+		<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+	</Application.Resources>
+
+</Application>

UI/HtmlControls/HtmlControls.Shared/App.xaml.cs

@@ -0,0 +1,185 @@
+using Microsoft.Extensions.Logging;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace HtmlControls
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    public sealed partial class App : Application
+    {
+#if NET5_0 && WINDOWS
+        private Window _window;
+
+#else
+        private Windows.UI.Xaml.Window _window;
+#endif
+
+        /// <summary>
+        /// Initializes the singleton application object.  This is the first line of authored code
+        /// executed, and as such is the logical equivalent of main() or WinMain().
+        /// </summary>
+        public App()
+        {
+            InitializeLogging();
+
+            this.InitializeComponent();
+
+#if HAS_UNO || NETFX_CORE
+            this.Suspending += OnSuspending;
+#endif
+        }
+
+        /// <summary>
+        /// Invoked when the application is launched normally by the end user.  Other entry points
+        /// will be used such as when the application is launched to open a specific file.
+        /// </summary>
+        /// <param name="e">Details about the launch request and process.</param>
+        protected override void OnLaunched(LaunchActivatedEventArgs e)
+        {
+#if DEBUG
+            if (System.Diagnostics.Debugger.IsAttached)
+            {
+                // this.DebugSettings.EnableFrameRateCounter = true;
+            }
+#endif
+
+#if NET6_0_OR_GREATER && WINDOWS
+            _window = new Window();
+            _window.Activate();
+#else
+            _window = Windows.UI.Xaml.Window.Current;
+#endif
+
+            var rootFrame = _window.Content as Frame;
+
+            // Do not repeat app initialization when the Window already has content,
+            // just ensure that the window is active
+            if (rootFrame == null)
+            {
+                // Create a Frame to act as the navigation context and navigate to the first page
+                rootFrame = new Frame();
+
+                rootFrame.NavigationFailed += OnNavigationFailed;
+
+                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
+                {
+                    //TODO: Load state from previously suspended application
+                }
+
+                // Place the frame in the current Window
+                _window.Content = rootFrame;
+            }
+
+#if !(NET6_0_OR_GREATER && WINDOWS)
+            if (e.PrelaunchActivated == false)
+#endif
+            {
+                if (rootFrame.Content == null)
+                {
+                    // When the navigation stack isn't restored navigate to the first page,
+                    // configuring the new page by passing required information as a navigation
+                    // parameter
+                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
+                }
+                // Ensure the current window is active
+                _window.Activate();
+            }
+        }
+
+        /// <summary>
+        /// Invoked when Navigation to a certain page fails
+        /// </summary>
+        /// <param name="sender">The Frame which failed navigation</param>
+        /// <param name="e">Details about the navigation failure</param>
+        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
+        {
+            throw new Exception($"Failed to load {e.SourcePageType.FullName}: {e.Exception}");
+        }
+
+        /// <summary>
+        /// Invoked when application execution is being suspended.  Application state is saved
+        /// without knowing whether the application will be terminated or resumed with the contents
+        /// of memory still intact.
+        /// </summary>
+        /// <param name="sender">The source of the suspend request.</param>
+        /// <param name="e">Details about the suspend request.</param>
+        private void OnSuspending(object sender, SuspendingEventArgs e)
+        {
+            var deferral = e.SuspendingOperation.GetDeferral();
+            //TODO: Save application state and stop any background activity
+            deferral.Complete();
+        }
+
+        /// <summary>
+        /// Configures global Uno Platform logging
+        /// </summary>
+        private static void InitializeLogging()
+        {
+            var factory = LoggerFactory.Create(builder =>
+            {
+#if __WASM__
+                builder.AddProvider(new global::Uno.Extensions.Logging.WebAssembly.WebAssemblyConsoleLoggerProvider());
+#elif __IOS__
+                builder.AddProvider(new global::Uno.Extensions.Logging.OSLogLoggerProvider());
+#elif NETFX_CORE
+                builder.AddDebug();
+#else
+                builder.AddConsole();
+#endif
+
+                // Exclude logs below this level
+                builder.SetMinimumLevel(LogLevel.Information);
+
+                // Default filters for Uno Platform namespaces
+                builder.AddFilter("Uno", LogLevel.Warning);
+                builder.AddFilter("Windows", LogLevel.Warning);
+                builder.AddFilter("Microsoft", LogLevel.Warning);
+
+                // Generic Xaml events
+                // builder.AddFilter("Windows.UI.Xaml", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.VisualStateGroup", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.StateTriggerBase", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.UIElement", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.FrameworkElement", LogLevel.Trace );
+
+                // Layouter specific messages
+                // builder.AddFilter("Windows.UI.Xaml.Controls", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.Controls.Layouter", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.Controls.Panel", LogLevel.Debug );
+
+                // builder.AddFilter("Windows.Storage", LogLevel.Debug );
+
+                // Binding related messages
+                // builder.AddFilter("Windows.UI.Xaml.Data", LogLevel.Debug );
+                // builder.AddFilter("Windows.UI.Xaml.Data", LogLevel.Debug );
+
+                // Binder memory references tracking
+                // builder.AddFilter("Uno.UI.DataBinding.BinderReferenceHolder", LogLevel.Debug );
+
+                // RemoteControl and HotReload related
+                // builder.AddFilter("Uno.UI.RemoteControl", LogLevel.Information);
+
+                // Debug JS interop
+                // builder.AddFilter("Uno.Foundation.WebAssemblyRuntime", LogLevel.Debug );
+            });
+
+            global::Uno.Extensions.LogExtensionPoint.AmbientLoggerFactory = factory;
+        }
+    }
+}

UI/HtmlControls/HtmlControls.Shared/Assets/SharedAssets.md

@@ -0,0 +1,34 @@
+See documentation about assets here : https://github.com/unoplatform/uno/blob/master/doc/articles/features/working-with-assets.md
+
+# Here is a cheat sheet:
+
+1. Add the image file to the `Assets` directory of a shared project.
+2. Set the build action to `Content`.
+3. (Recommended) Provide an asset for various scales/dpi
+
+## Examples
+
+```
+\Assets\Images\logo.scale-100.png
+\Assets\Images\logo.scale-200.png
+\Assets\Images\logo.scale-400.png
+
+\Assets\Images\scale-100\logo.png
+\Assets\Images\scale-200\logo.png
+\Assets\Images\scale-400\logo.png
+```
+
+## Table of scales
+
+| Scale | UWP         | iOS      | Android |
+|-------|:-----------:|:--------:|:-------:|
+| `100` | scale-100   | @1x      | mdpi    |
+| `125` | scale-125   | N/A      | N/A     |
+| `150` | scale-150   | N/A      | hdpi    |
+| `200` | scale-200   | @2x      | xhdpi   |
+| `300` | scale-300   | @3x      | xxhdpi  |
+| `400` | scale-400   | N/A      | xxxhdpi |
+
+
+
+

UI/HtmlControls/HtmlControls.Shared/HtmlControls.Shared.projitems

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+	<PropertyGroup>
+		<MSBuildAllProjects>$(MSBuildAllProjects);$(MSBuildThisFileFullPath)</MSBuildAllProjects>
+		<HasSharedItems>true</HasSharedItems>
+		<SharedGUID>6279c845-92f8-4333-ab99-3d213163593c</SharedGUID>
+	</PropertyGroup>
+	<PropertyGroup Label="Configuration">
+		<Import_RootNamespace>HtmlControls</Import_RootNamespace>
+	</PropertyGroup>
+	<ItemGroup>
+		<ApplicationDefinition Include="$(MSBuildThisFileDirectory)App.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</ApplicationDefinition>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="$(MSBuildThisFileDirectory)App.xaml.cs">
+			<DependentUpon>App.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="$(MSBuildThisFileDirectory)MainPage.xaml.cs">
+			<DependentUpon>MainPage.xaml</DependentUpon>
+		</Compile>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="$(MSBuildThisFileDirectory)MainPage.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<None Include="$(MSBuildThisFileDirectory)Assets\SharedAssets.md" />
+	</ItemGroup>
+	<ItemGroup>
+		<PRIResource Include="$(MSBuildThisFileDirectory)Strings\en\Resources.resw" />
+	</ItemGroup>
+</Project>

UI/HtmlControls/HtmlControls.Shared/HtmlControls.Shared.shproj

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+	<PropertyGroup Label="Globals">
+		<ProjectGuid>6279c845-92f8-4333-ab99-3d213163593c</ProjectGuid>
+		<MinimumVisualStudioVersion>14.0</MinimumVisualStudioVersion>
+	</PropertyGroup>
+	<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+	<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.Common.Default.props" />
+	<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.Common.props" />
+	<PropertyGroup />
+	<Import Project="HtmlControls.Shared.projitems" Label="Shared" />
+	<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.CSharp.targets" />
+</Project>

UI/HtmlControls/HtmlControls.Shared/MainPage.xaml

@@ -0,0 +1,32 @@
+<Page
+    x:Class="HtmlControls.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:HtmlControls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:html="using:HtmlControls"
+    mc:Ignorable="d">
+
+    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="20" Spacing="6">
+        <TextBlock FontSize="20">HtmlTimePicker <Span FontWeight="Bold">&lt;input type='time' /&gt;</Span></TextBlock>
+        <html:HtmlTimePicker HorizontalAlignment="Left" x:Name="time1" />
+        <html:HtmlTimePicker HorizontalAlignment="Left" x:Name="time2" Time="{Binding Time, ElementName=time1, Mode=TwoWay}" />
+
+        <TextBlock FontSize="20">HtmlDatePicker <Span FontWeight="Bold">&lt;input type='date' /&gt;</Span></TextBlock>
+        <html:HtmlDatePicker HorizontalAlignment="Left" x:Name="date1" />
+        <html:HtmlDatePicker HorizontalAlignment="Left" x:Name="date2" Date="{Binding Date, ElementName=date1, Mode=TwoWay}" />
+
+        <TextBlock FontSize="20">HtmlNumberInput <Span FontWeight="Bold">&lt;input type='number' /&gt;</Span></TextBlock>
+        <html:HtmlNumberInput HorizontalAlignment="Left" x:Name="number1" />
+        <html:HtmlNumberInput HorizontalAlignment="Left" x:Name="number2" Value="{Binding Value, ElementName=number1, Mode=TwoWay}" />
+
+        <TextBlock FontSize="20">HtmlColorPicker <Span FontWeight="Bold">&lt;input type='color' /&gt;</Span></TextBlock>
+        <html:HtmlColorPicker HorizontalAlignment="Left" x:Name="color1" />
+        <html:HtmlColorPicker HorizontalAlignment="Left" x:Name="color2" Color="{Binding Color, ElementName=color1, Mode=TwoWay}" />
+
+        <TextBlock FontSize="20">HtmlRangeInput <Span FontWeight="Bold">&lt;input type='range' /&gt;</Span></TextBlock>
+        <html:HtmlRangeInput HorizontalAlignment="Left" x:Name="range1" />
+        <html:HtmlRangeInput HorizontalAlignment="Left" x:Name="range2" Value="{Binding Value, ElementName=range1, Mode=TwoWay}" />
+    </StackPanel>
+</Page>

UI/HtmlControls/HtmlControls.Shared/MainPage.xaml.cs

@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
+
+namespace HtmlControls
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class MainPage : Page
+    {
+        public MainPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}