10-31-2020, 07:01 PM
Unified Blazor UI in the Mobile Blazor Bindings Preview 5
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5.png" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5.png" width="58" height="58" alt="Eilon Lipton" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Eilon</p>
</div>
</div>
</div>
<div class="entry-meta entry-meta-layout">
<p>October 30th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>I’m excited to announce that today we are releasing the Mobile Blazor Bindings Preview 5 update that adds support for sharing UI between web apps and mobile/desktop apps. You can now use a Razor Class Library (RCL) to build your UI and app logic once and use it in a Blazor Web app and in a Mobile Blazor Bindings app. This release also includes many other improvements, such as support for Shell with Blazor <code>@page</code> routing, SkiaSharp for rich graphics, gesture recognizers, and a whole lot more!</p>
<p>You can build one UI using Blazor Web and host it in a Blazor Server or Blazor Web Assembly app and also in a Mobile Blazor Bindings hybrid app to target Android, iOS, macOS, and Windows:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-5.png"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-1.png" alt="Image cat tracker options" width="640" height="544" class="aligncenter size-large wp-image-24286"></a></p>
<p>These are the major new features in the 0.5 Preview 5 release:</p>
<ul>
<li>Build your UI in a Razor Class Library (RCL) and share the same UI between web app and native app, including static assets such as CSS and images (community contribution from <a href="https://twitter.com/JwSpuij">Jan-Willem Spuij</a>)</li>
<li>Support for Shell with Routing, including the Razor <code>@page</code> directive (community contribution from <a href="https://twitter.com/lachlanwgordon">Lachlan Gordon</a></li>
<li>Support for SkiaSharp graphics (community contribution from <a href="https://twitter.com/lachlanwgordon">Lachlan Gordon</a></li>
<li>Gesture recognizers (tap, swipe, etc.)</li>
<li>Dual-screen device support</li>
<li>Added FontImageSource, DatePicker, TimePicker</li>
<li>Simplified Grid layout syntax</li>
<li>Update to Xamarin.Forms 4.8</li>
<li><a href="https://docs.microsoft.com/mobile-blazor-bindings/contribute/nightly-builds">Nightly package feed</a></li>
<li><a href="https://github.com/MicrosoftDocs/mobile-blazor-bindings">OSS docs on GitHub</a></li>
<li>And several bug fixes and other small improvements</li>
<li>The full list of closed issues is here: https://github.com/xamarin/MobileBlazorB...osed=1</li>
</ul>
<h2 id="get-started">Get started</h2>
<p>To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 5, <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 SDK</a>, have Visual Studio with the Mobile development with .NET (Xamarin.Forms) and ASP.NET and web development workloads installed, and then run the following command:</p>
<pre><code class="shell">dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.5.50-preview
</code></pre>
<p>And then create your first project by running this command:</p>
<pre><code class="shell">dotnet new blazorhybrid -o MyHybridApp
</code></pre>
<p>Note: For additional information on required software, please check the <a href="https://docs.microsoft.com/mobile-blazor-bindings/get-started">Getting Started</a> article.</p>
<p>Now open it in Visual Studio and run it on Android, iOS, Windows, or macOS. That’s it! You can find additional docs and tutorials on <a href="https://docs.microsoft.com/mobile-blazor-bindings/">https://docs.microsoft.com/mobile-blazor-bindings/</a>. We have a new tutorial for building a Razor Class Library and including it in a Blazor Server app as well as targeting Android, iOS, macOS, and Windows platforms.</p>
<h2 id="upgrade-an-existing-project">Upgrade an existing project</h2>
<p>To update an existing Mobile Blazor Bindings project please refer to the <a href="https://docs.microsoft.com/mobile-blazor-bindings/migrate/preview4-to-preview5">Migrate Mobile Blazor Bindings From Preview 4 to Preview 5 topic</a> for full details.</p>
<h2 id="razor-class-library-support">Razor Class Library support</h2>
<p>Razor Class Libraries are a feature of Razor that enable you to package part of your application’s UI and logic into a reusable library. This library can then be reused in multiple web applications. Now in Mobile Blazor Bindings you can use the same library in a Blazor Hybrid application as part of a mobile or desktop app. The web content is hosted in a Web View, just like any hybrid app content, and it can interact with any native parts of the application, and the reverse is true as well. Previous versions included limited support for RCLs, and this version adds improved support for them, particularly support for serving static assets such as CSS and images, as well as support for <code>JSInterop</code> for interop between JavaScript and .NET code.</p>
<h2 id="shell-navigation">Shell navigation</h2>
<p>To build a great native experience for your app you can use the Shell control that comes from Xamarin.Forms. Starting with Preview 5 you can author native Blazor pages with the <code>@page "/search/{query}"</code> syntax and integrate them with the Shell’s navigation (such as the Back button) and navigate to them using the new <code>NavigationManager.NavigateToAsync($"/search/{query}")</code> API. Pages can use the navigation manager by injecting it from the DI container as in <code>@inject ShellNavigationManager NavigationManager</code>.</p>
<h2 id="skiasharp-graphics">SkiaSharp graphics</h2>
<p>SkiaSharp is a popular cross-platform graphics library based on Google’s Skia graphics library. In Preview 5 you can directly use SkiaSharp’s Canvas APIs to render rich high-performance graphics directly in your Mobile Blazor Bindings app.</p>
<p>Here’s what a simple canvas might look like:</p>
<pre><code class="xml"><ContentView> <StackLayout Padding="20"> <SKCanvasView OnPaintSurface="PaintSurface"/> </StackLayout>
</ContentView> @code
{ void PaintSurface(SKPaintSurfaceEventArgs e) { var canvas = e.Surface.Canvas; canvas.Clear(SKColors.Green); var paint = new SKPaint { Color = SKColors.SkyBlue, }; canvas.DrawLine(0, 0, 200, 200, paint); }
}
</code></pre>
<p>And here’s what a more complex canvas might render as:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-9.png"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-2.png" alt="SkiaSharp rendering a graph in Mobile Blazor Bindings on iOS" width="148" height="300" class="aligncenter size-medium wp-image-24288"></a></p>
<h2 id="more-information">More information</h2>
<h2 id="thank-you-to-contributors">Thank you to contributors</h2>
<p>This release had several major contributions from community contributors:</p>
<ul>
<li><a href="https://twitter.com/JwSpuij">Jan-Willem Spuij</a> added support for Razor Class Libraries with static assets. He stayed up late (his time) on calls with me several times and I appreciate his hard work!</li>
<li><a href="https://twitter.com/lachlanwgordon">Lachlan Gordon</a> added support for Shell navigation and SkiaSharp. His patience in playing time-zone ping-pong (Australia vs. USA) is most appreciated and resulted in high quality contributions!</li>
</ul>
<p>Thanks you to Jan-Willem, Lachlan, and everyone else who contributed to this release!</p>
<h2 id="whats-next-let-us-know-what-you-want">What’s next? Let us know what you want!</h2>
<p>This project relies on your feedback to help shape the future of Blazor for native and hybrid scenarios. Please share your thoughts on this blog post or at the <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a> so we can keep the discussion going.</p>
</div>
https://www.sickgaming.net/blog/2020/10/...preview-5/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5.png" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5.png" width="58" height="58" alt="Eilon Lipton" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Eilon</p>
</div>
</div>
</div>
<div class="entry-meta entry-meta-layout">
<p>October 30th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>I’m excited to announce that today we are releasing the Mobile Blazor Bindings Preview 5 update that adds support for sharing UI between web apps and mobile/desktop apps. You can now use a Razor Class Library (RCL) to build your UI and app logic once and use it in a Blazor Web app and in a Mobile Blazor Bindings app. This release also includes many other improvements, such as support for Shell with Blazor <code>@page</code> routing, SkiaSharp for rich graphics, gesture recognizers, and a whole lot more!</p>
<p>You can build one UI using Blazor Web and host it in a Blazor Server or Blazor Web Assembly app and also in a Mobile Blazor Bindings hybrid app to target Android, iOS, macOS, and Windows:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-5.png"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-1.png" alt="Image cat tracker options" width="640" height="544" class="aligncenter size-large wp-image-24286"></a></p>
<p>These are the major new features in the 0.5 Preview 5 release:</p>
<ul>
<li>Build your UI in a Razor Class Library (RCL) and share the same UI between web app and native app, including static assets such as CSS and images (community contribution from <a href="https://twitter.com/JwSpuij">Jan-Willem Spuij</a>)</li>
<li>Support for Shell with Routing, including the Razor <code>@page</code> directive (community contribution from <a href="https://twitter.com/lachlanwgordon">Lachlan Gordon</a></li>
<li>Support for SkiaSharp graphics (community contribution from <a href="https://twitter.com/lachlanwgordon">Lachlan Gordon</a></li>
<li>Gesture recognizers (tap, swipe, etc.)</li>
<li>Dual-screen device support</li>
<li>Added FontImageSource, DatePicker, TimePicker</li>
<li>Simplified Grid layout syntax</li>
<li>Update to Xamarin.Forms 4.8</li>
<li><a href="https://docs.microsoft.com/mobile-blazor-bindings/contribute/nightly-builds">Nightly package feed</a></li>
<li><a href="https://github.com/MicrosoftDocs/mobile-blazor-bindings">OSS docs on GitHub</a></li>
<li>And several bug fixes and other small improvements</li>
<li>The full list of closed issues is here: https://github.com/xamarin/MobileBlazorB...osed=1</li>
</ul>
<h2 id="get-started">Get started</h2>
<p>To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 5, <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 SDK</a>, have Visual Studio with the Mobile development with .NET (Xamarin.Forms) and ASP.NET and web development workloads installed, and then run the following command:</p>
<pre><code class="shell">dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.5.50-preview
</code></pre>
<p>And then create your first project by running this command:</p>
<pre><code class="shell">dotnet new blazorhybrid -o MyHybridApp
</code></pre>
<p>Note: For additional information on required software, please check the <a href="https://docs.microsoft.com/mobile-blazor-bindings/get-started">Getting Started</a> article.</p>
<p>Now open it in Visual Studio and run it on Android, iOS, Windows, or macOS. That’s it! You can find additional docs and tutorials on <a href="https://docs.microsoft.com/mobile-blazor-bindings/">https://docs.microsoft.com/mobile-blazor-bindings/</a>. We have a new tutorial for building a Razor Class Library and including it in a Blazor Server app as well as targeting Android, iOS, macOS, and Windows platforms.</p>
<h2 id="upgrade-an-existing-project">Upgrade an existing project</h2>
<p>To update an existing Mobile Blazor Bindings project please refer to the <a href="https://docs.microsoft.com/mobile-blazor-bindings/migrate/preview4-to-preview5">Migrate Mobile Blazor Bindings From Preview 4 to Preview 5 topic</a> for full details.</p>
<h2 id="razor-class-library-support">Razor Class Library support</h2>
<p>Razor Class Libraries are a feature of Razor that enable you to package part of your application’s UI and logic into a reusable library. This library can then be reused in multiple web applications. Now in Mobile Blazor Bindings you can use the same library in a Blazor Hybrid application as part of a mobile or desktop app. The web content is hosted in a Web View, just like any hybrid app content, and it can interact with any native parts of the application, and the reverse is true as well. Previous versions included limited support for RCLs, and this version adds improved support for them, particularly support for serving static assets such as CSS and images, as well as support for <code>JSInterop</code> for interop between JavaScript and .NET code.</p>
<h2 id="shell-navigation">Shell navigation</h2>
<p>To build a great native experience for your app you can use the Shell control that comes from Xamarin.Forms. Starting with Preview 5 you can author native Blazor pages with the <code>@page "/search/{query}"</code> syntax and integrate them with the Shell’s navigation (such as the Back button) and navigate to them using the new <code>NavigationManager.NavigateToAsync($"/search/{query}")</code> API. Pages can use the navigation manager by injecting it from the DI container as in <code>@inject ShellNavigationManager NavigationManager</code>.</p>
<h2 id="skiasharp-graphics">SkiaSharp graphics</h2>
<p>SkiaSharp is a popular cross-platform graphics library based on Google’s Skia graphics library. In Preview 5 you can directly use SkiaSharp’s Canvas APIs to render rich high-performance graphics directly in your Mobile Blazor Bindings app.</p>
<p>Here’s what a simple canvas might look like:</p>
<pre><code class="xml"><ContentView> <StackLayout Padding="20"> <SKCanvasView OnPaintSurface="PaintSurface"/> </StackLayout>
</ContentView> @code
{ void PaintSurface(SKPaintSurfaceEventArgs e) { var canvas = e.Surface.Canvas; canvas.Clear(SKColors.Green); var paint = new SKPaint { Color = SKColors.SkyBlue, }; canvas.DrawLine(0, 0, 200, 200, paint); }
}
</code></pre>
<p>And here’s what a more complex canvas might render as:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-9.png"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/unified-blazor-ui-in-the-mobile-blazor-bindings-preview-5-2.png" alt="SkiaSharp rendering a graph in Mobile Blazor Bindings on iOS" width="148" height="300" class="aligncenter size-medium wp-image-24288"></a></p>
<h2 id="more-information">More information</h2>
<h2 id="thank-you-to-contributors">Thank you to contributors</h2>
<p>This release had several major contributions from community contributors:</p>
<ul>
<li><a href="https://twitter.com/JwSpuij">Jan-Willem Spuij</a> added support for Razor Class Libraries with static assets. He stayed up late (his time) on calls with me several times and I appreciate his hard work!</li>
<li><a href="https://twitter.com/lachlanwgordon">Lachlan Gordon</a> added support for Shell navigation and SkiaSharp. His patience in playing time-zone ping-pong (Australia vs. USA) is most appreciated and resulted in high quality contributions!</li>
</ul>
<p>Thanks you to Jan-Willem, Lachlan, and everyone else who contributed to this release!</p>
<h2 id="whats-next-let-us-know-what-you-want">What’s next? Let us know what you want!</h2>
<p>This project relies on your feedback to help shape the future of Blazor for native and hybrid scenarios. Please share your thoughts on this blog post or at the <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a> so we can keep the discussion going.</p>
</div>
https://www.sickgaming.net/blog/2020/10/...preview-5/