+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: C#, Visual Basic, & .Net Frameworks (https://www.sickgaming.net/forum-79.html)
+--- Thread: Announcing Experimental Mobile Blazor Bindings May update (/thread-95484.html)
Announcing Experimental Mobile Blazor Bindings May update - xSicKxBot - 06-05-2020
Announcing Experimental Mobile Blazor Bindings May update
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/05/announcing-experimental-mobile-blazor-bindings-may-update.png" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/05/announcing-experimental-mobile-blazor-bindings-may-update.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">
<p>May 26th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>It’s been a few months so it’s time for another update of Experimental Mobile Blazor Bindings! This release brings several bug fixes in the areas of CSS styling support, adding XML doc comments to common APIs, and several syntax improvements to common controls.</p>
<p>Here are the major changes in this release:</p>
<ul>
<li>Update to latest native mobile component versions in Xamarin.Forms 4.5 and add doc comments <a href="https://github.com/xamarin/MobileBlazorBindings/issues/96">#96</a>, <a href="https://github.com/xamarin/MobileBlazorBindings/issues/110">#110</a>, <a href="https://github.com/xamarin/MobileBlazorBindings/issues/111">#111</a></li>
<li>Improve Label and Button syntax <a href="https://github.com/xamarin/MobileBlazorBindings/issues/87">#87</a>, <a href="https://github.com/xamarin/MobileBlazorBindings/issues/27">#27</a></li>
<li>Fix CSS support for iOS apps <a href="https://github.com/xamarin/MobileBlazorBindings/issues/100">#109</a></li>
<li>Breaking change: Use space-separated CSS classes instead of comma-separated <a href="https://github.com/xamarin/MobileBlazorBindings/issues/100">#100</a></li>
</ul>
<h2>Get started</h2>
<p>To get started with Experimental Mobile Blazor Bindings preview 3, <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 SDK</a> and then run the following command:</p>
<pre><code class="shell">dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.3.26-preview
</code></pre>
<p>And then create your first project by running this command:</p>
<pre><code class="shell">dotnet new mobileblazorbindings -o MyApp
</code></pre>
<p>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>.</p>
<h2>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/preview2-to-preview3">Migrate Mobile Blazor Bindings From Preview 2 to Preview 3 topic</a> for full details.</p>
<h2>Updated components and docs</h2>
<p>Because most of the components in Mobile Blazor Bindings are based on Xamarin.Forms native controls, the components have been updated to Xamarin.Forms 4.5. For example, properties such as <code>Image.IsAnimationPlaying</code> and <code>Stepper.StepperPosition</code> are now available. The doc comments that are seen in IntelliSense have also been imported so that you get useful help while coding:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/05/announcing-experimental-mobile-blazor-bindings-may-update-1.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/05/announcing-experimental-mobile-blazor-bindings-may-update-1.png" alt="Mobile Blazor Bindings IntelliSense docs tooltip" width="640" height="267" class="aligncenter size-large wp-image-23645"></a></p>
<h2>Improve Label and Button syntax</h2>
<p>Because one of the key motivators for building Mobile Blazor Bindings was to have patterns that were more familiar to web developers, the syntax for Label and Button components has been simplified and improved.</p>
<p>In previous versions setting the text for a Label’s Span’s Text or a Button’s Text had to be done via a property setter:</p>
<pre><code class="xml"><Button Text="Click me" ... />
...
<Button Text="@("Buy " + @items.Count + " items")" ... />
</code></pre>
<p>Starting with Preview 3 you can use this simplified syntax that is more similar to web patterns:</p>
<pre><code class="xml"><Button ...>Click me</Button>
...
<Button ...>Buy @items.Count items</Button>
</code></pre>
<p>This change applies to <code>Button.Text</code> and <code>Span.Text</code>.</p>
<p>Speaking of <code>Span.Text</code>, a Label with complex formatting used to have many intermediate tags:</p>
<pre><code class="xml"><Label FontSize="12"> <FormattedText> <FormattedString> <Spans> <Span Text="This text is large... " FontSize="50" /> <Span Text="and this is plain... " /> <Span Text="and this is green!" TextColor="Color.Green" /> </Spans> </FormattedString> </FormattedText>
</Label>
</code></pre>
<p>And starting with Preview 3, the intermediate tags have all been removed:</p>
<pre><code class="xml"><Label FontSize="12"> <Span FontSize="50">This text is large... </Span> <Span>and this is plain... </Span> <Span TextColor="Color.Green">and this is green!</Span>
</Label>
</code></pre>
<h2>CSS improvements</h2>
<p>CSS is a great way to style your application while keeping it separate from the layout and behavior. Check out the <a href="https://docs.microsoft.com/mobile-blazor-bindings/ui/css-styles">CSS Styles</a> topic for more information on how to use CSS in your Mobile Blazor Bindings apps.</p>
<p>There are three CSS-related improvements in this release:</p>
<ol>
<li>The minimum version of Xamarin.Forms is now 4.5, which fixes most CSS issues, such as the ability to use almost all CSS selectors.</li>
<li>A small breaking change was made to use spaces as separators instead of commas when specifying multiple class names (this matches web behavior). See issue <a href="https://github.com/xamarin/MobileBlazorBindings/issues/100">#100</a> for more information.</li>
<li>A bug fix was made to ensure CSS is loaded properly on iOS devices.</li>
</ol>
<h2>More information:</h2>
<p>For more information please check out:</p>
<h2>Thank you to community blog posts!</h2>
<p>If you’d like to learn more, please check out these blog posts from community members:</p>
<p>Thank you!</p>
<h2>What’s next? Let us know what you want!</h2>
<p>We’re listening to your feedback, which has been both plentiful and helpful! We’re also fixing bugs and adding new features. And you may have seen last week’s announcement for <a href="https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/">.NET Multi-platform App UI (.NET MAUI)</a>. As an experiment, what we find with Mobile Blazor Bindings will feed directly into the Blazor aspects of .NET MAUI so please share with us your thoughts on using Blazor with .NET MAUI on <a href="https://github.com/xamarin/MobileBlazorBindings">this project’s repo</a> or on <a href="https://github.com/dotnet/maui">.NET MAUI’s GitHub repo</a>.</p>
<p>This project will continue to take shape in large part due to your feedback, so please let us know your thoughts at the <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a>.</p>
<p>P.S.: My apologies for the delay in this update. The realities of work-from-home (and stay-at-home parenting) meant that progress was extremely limited. I thank everyone for their patience, understanding, and support. You can always stay up-to-date by going to the GitHub repo and using the latest builds, or reach me on Twitter <a href="https://twitter.com/original_ejl">@original_ejl</a>.</p>
</div>
https://www.sickgaming.net/blog/2020/05/26/announcing-experimental-mobile-blazor-bindings-may-update/