02-15-2020, 01:14 PM
Announcing Experimental Mobile Blazor Bindings February update
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-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/02/announcing-experimental-mobile-blazor-bindings-february-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>February 10th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>I’m delighted to share an update of Experimental Mobile Blazor Bindings with several new features and fixes. On January 14th we <a href="https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/">announced the first experimental release</a> of Mobile Blazor Bindings, which enables developers to use familiar web programming patterns to build native mobile apps using C# and .NET for iOS and Android.</p>
<p>Here’s what’s new in this release:</p>
<ul>
<li>New BoxView, CheckBox, ImageButton, ProgressBar, and Slider components</li>
<li>Xamarin.Essentials is included in the project template</li>
<li>Several properties, events, and other APIs were added to existing components</li>
<li>Made it easier to get from a Blazor component reference to the Xamarin.Forms control</li>
<li>Several bug fixes, including iOS startup</li>
</ul>
<h2>Get started</h2>
<p>To get started with Experimental Mobile Blazor Bindings preview 2, <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.2.42-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 https://docs.microsoft.com/mobile-blazor-bindings/.</p>
<h2>Upgrade an existing project</h2>
<p>To update an existing Mobile Blazor Bindings Preview 1 project to Preview 2 you’ll need to update the Mobile Blazor Bindings NuGet packages to 0.2.42-preview. In each project file (<code>.csproj</code>) update the <code>Microsoft.MobileBlazorBindings</code> package reference’s <code>Version</code> attribute to <code>0.2.42-preview</code>.</p>
<p>Refer to the <a href="https://docs.microsoft.com/mobile-blazor-bindings/migrate/preview1-to-preview2">Migrate Mobile Blazor Bindings From Preview 1 to Preview 2 topic</a> for full details.</p>
<h2>New components</h2>
<p>New BoxView, CheckBox, ImageButton, ProgressBar, and Slider components have been added. A picture is worth a thousand words, so here are the new components in action:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-update-1.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-update-1.png" alt="New components in Mobile Blazor Bindings preview 2" width="640" height="741" class="aligncenter size-large wp-image-23186"></a></p>
<p>And instead of a thousand words, here’s the code for that UI page:</p>
<pre><code class="xml"><Frame CornerRadius="10" BackgroundColor="Color.LightBlue"> <StackLayout> <Label Text="How much progress have you made?" /> <Slider @bind-Value="progress" /> <Label Text="Your impact:" /> <ProgressBar Progress="EffectiveProgress" /> <StackLayout Orientation="StackOrientation.Horizontal"> <CheckBox @bind-IsChecked="isTwoXProgress" VerticalOptions="LayoutOptions.Center" /> <Label Text="Use 2x impact?" VerticalOptions="LayoutOptions.Center" /> </StackLayout> <BoxView HeightRequest="20" CornerRadius="5" Color="Color.Purple" /> <StackLayout Orientation="StackOrientation.Horizontal" VerticalOptions="LayoutOptions.Center"> <Label Text="Instant completion" VerticalOptions="LayoutOptions.Center" /> <ImageButton Source="@(new FileImageSource { File="CompleteButton.png" })" HeightRequest="64" WidthRequest="64" OnClick="CompleteProgress" VerticalOptions="LayoutOptions.Center" BorderColor="Color.SaddleBrown" BorderWidth="3" /> </StackLayout> </StackLayout> </Frame> @code
{ double progress; bool isTwoXProgress; double EffectiveProgress => isTwoXProgress ? 2d * progress : progress; void CompleteProgress() { progress = 1d; }
}
</code></pre>
<h2>Xamarin.Essentials is included in the project template</h2>
<p>Xamarin.Essentials provides developers with cross-platform APIs for their mobile applications. With these APIs you can make cross-platform calls to get geolocation info, get device status and capabilities, access the clipboard, and much more.</p>
<p>Here’s how to get battery status and location information:</p>
<pre><code class="xml"><StackLayout> <StackLayout Orientation="StackOrientation.Horizontal"> <ProgressBar Progress="Battery.ChargeLevel" HeightRequest="20" HorizontalOptions="LayoutOptions.FillAndExpand" /> <Label Text="@($"{Battery.ChargeLevel.ToString("P")}")" /> </StackLayout> <Label Text="@($"? state: {Battery.State.ToString()}")" /> <Label Text="@($"? source: {Battery.PowerSource.ToString()}")" /> <Button Text="Where am I?" OnClick="@WhereAmI" />
</StackLayout> @code
{ async Task WhereAmI() { var location = await Geolocation.GetLocationAsync(new GeolocationRequest(GeolocationAccuracy.Medium)); var locationMessage = $"Lat: {location.Latitude}, Long: {location.Longitude}, Alt: {location.Altitude}"; await Application.Current.MainPage.DisplayAlert("Found me!", locationMessage, "OK"); }
}
</code></pre>
<p>More information:</p>
<h2>Several properties, events, and other APIs were added to existing components</h2>
<p>The set of properties available on the default components in Mobile Blazor Bindings now match the Xamarin.Forms UI controls more closely.</p>
<p>For example:</p>
<ul>
<li>Button events were added: OnPress, OnRelease</li>
<li>Button properties were added: FontSize, ImageSource, Padding, and many more</li>
<li>Label properties were added: MaxLines, Padding, and many more</li>
<li>MenuItem property was added: IsEnabled</li>
<li>NavigableElement property was added: class</li>
<li>And many more!</li>
</ul>
<h2>Made it easier to get from a Blazor component reference to the Xamarin.Forms control</h2>
<p>While most UI work is done directly with the Blazor components, some UI functionality is performed by accessing the Xamarin.Forms control. For example, Xamarin.Forms controls have rich animation capabilities that can be accessed via the control itself, such as rotation, fading, scaling, and translation.</p>
<p>To access the Xamarin.Forms element you need to:</p>
<ol>
<li>Define a field of the type of the Blazor component. For example: <code>Microsoft.MobileBlazorBindings.Elements.Label counterLabel;</code></li>
<li>Associate the field with a reference to the Blazor component. For example: <code><label @ref="counterLabel" …></label></code></li>
<li>Access the native control via the <code>NativeControl</code> property. For example: <code>await counterLabel.NativeControl.RelRotateTo(360);</code></li>
</ol>
<p>Here’s a full example of how to do a rotation animation every time a button is clicked:</p>
<pre><code class="xml"><StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center"> <Button Text="Increment" OnClick="IncrementCount" /> <Label @ref="counterLabel" Text="@("The button was clicked " + count + " times")" FontAttributes="FontAttributes.Bold" VerticalTextAlignment="TextAlignment.Center" /> </StackLayout> @code
{ Microsoft.MobileBlazorBindings.Elements.Label counterLabel; int count; async Task IncrementCount() { count++; var degreesToRotate = ((double)(60 * count)); await counterLabel.NativeControl.RelRotateTo(degreesToRotate); }
}
</code></pre>
<p>Learn more in the <a href="https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/animation/">Xamarin.Forms animation topic</a>.</p>
<h2>Bug fixes</h2>
<p>This release incorporates several bug fixes, including fixing an iOS startup issue. You can see the full list of fixes in <a href="https://github.com/xamarin/MobileBlazorBindings/milestone/2?closed=1">this GitHub query</a>.</p>
<h2>In case you missed it</h2>
<p>In case you’ve missed some content on Mobile Blazor Bindings, please check out these recent happenings:</p>
<h2>Thank you to community contributors!</h2>
<p>I also want to extend a huge thank you to the community members who came over to the <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a> and <a href="https://github.com/xamarin/MobileBlazorBindings/issues?utf8=%E2%9C%93&q=is%3Aissue+-author%3AEilon">logged issues</a> and <a href="https://github.com/xamarin/MobileBlazorBindings/pulls?utf8=%E2%9C%93&q=is%3Apr+-author%3AEilon">sent some wonderful pull requests</a> (several of which are merged and in this release).</p>
<p>This release includes these community code contributions:</p>
<ol>
<li>Added AutomationId in Element <a href="https://github.com/xamarin/MobileBlazorBindings/pull/48">#48</a> by <a href="https://github.com/Kahbazi">Kahbazi</a></li>
<li>Fix src work if NETCore3.0 not installed <a href="https://github.com/xamarin/MobileBlazorBindings/pull/55">#55</a> by <a href="https://github.com/0x414c49">0x414c49</a></li>
<li>Multi-direction support for Visual Element (RTL, LTR) <a href="https://github.com/xamarin/MobileBlazorBindings/pull/59">#59</a> by <a href="https://github.com/0x414c49">0x414c49</a></li>
</ol>
<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. Improved CSS support and inline text are two things we’d love to make available soon.</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> or fill out the <a href="https://www.surveymonkey.com/r/X82XVTZ">feedback survey</a>.</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-update.png" width="96" height="96" alt="Eilon Lipton" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2020/02/...ry-update/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-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/02/announcing-experimental-mobile-blazor-bindings-february-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>February 10th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>I’m delighted to share an update of Experimental Mobile Blazor Bindings with several new features and fixes. On January 14th we <a href="https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/">announced the first experimental release</a> of Mobile Blazor Bindings, which enables developers to use familiar web programming patterns to build native mobile apps using C# and .NET for iOS and Android.</p>
<p>Here’s what’s new in this release:</p>
<ul>
<li>New BoxView, CheckBox, ImageButton, ProgressBar, and Slider components</li>
<li>Xamarin.Essentials is included in the project template</li>
<li>Several properties, events, and other APIs were added to existing components</li>
<li>Made it easier to get from a Blazor component reference to the Xamarin.Forms control</li>
<li>Several bug fixes, including iOS startup</li>
</ul>
<h2>Get started</h2>
<p>To get started with Experimental Mobile Blazor Bindings preview 2, <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.2.42-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 https://docs.microsoft.com/mobile-blazor-bindings/.</p>
<h2>Upgrade an existing project</h2>
<p>To update an existing Mobile Blazor Bindings Preview 1 project to Preview 2 you’ll need to update the Mobile Blazor Bindings NuGet packages to 0.2.42-preview. In each project file (<code>.csproj</code>) update the <code>Microsoft.MobileBlazorBindings</code> package reference’s <code>Version</code> attribute to <code>0.2.42-preview</code>.</p>
<p>Refer to the <a href="https://docs.microsoft.com/mobile-blazor-bindings/migrate/preview1-to-preview2">Migrate Mobile Blazor Bindings From Preview 1 to Preview 2 topic</a> for full details.</p>
<h2>New components</h2>
<p>New BoxView, CheckBox, ImageButton, ProgressBar, and Slider components have been added. A picture is worth a thousand words, so here are the new components in action:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-update-1.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-update-1.png" alt="New components in Mobile Blazor Bindings preview 2" width="640" height="741" class="aligncenter size-large wp-image-23186"></a></p>
<p>And instead of a thousand words, here’s the code for that UI page:</p>
<pre><code class="xml"><Frame CornerRadius="10" BackgroundColor="Color.LightBlue"> <StackLayout> <Label Text="How much progress have you made?" /> <Slider @bind-Value="progress" /> <Label Text="Your impact:" /> <ProgressBar Progress="EffectiveProgress" /> <StackLayout Orientation="StackOrientation.Horizontal"> <CheckBox @bind-IsChecked="isTwoXProgress" VerticalOptions="LayoutOptions.Center" /> <Label Text="Use 2x impact?" VerticalOptions="LayoutOptions.Center" /> </StackLayout> <BoxView HeightRequest="20" CornerRadius="5" Color="Color.Purple" /> <StackLayout Orientation="StackOrientation.Horizontal" VerticalOptions="LayoutOptions.Center"> <Label Text="Instant completion" VerticalOptions="LayoutOptions.Center" /> <ImageButton Source="@(new FileImageSource { File="CompleteButton.png" })" HeightRequest="64" WidthRequest="64" OnClick="CompleteProgress" VerticalOptions="LayoutOptions.Center" BorderColor="Color.SaddleBrown" BorderWidth="3" /> </StackLayout> </StackLayout> </Frame> @code
{ double progress; bool isTwoXProgress; double EffectiveProgress => isTwoXProgress ? 2d * progress : progress; void CompleteProgress() { progress = 1d; }
}
</code></pre>
<h2>Xamarin.Essentials is included in the project template</h2>
<p>Xamarin.Essentials provides developers with cross-platform APIs for their mobile applications. With these APIs you can make cross-platform calls to get geolocation info, get device status and capabilities, access the clipboard, and much more.</p>
<p>Here’s how to get battery status and location information:</p>
<pre><code class="xml"><StackLayout> <StackLayout Orientation="StackOrientation.Horizontal"> <ProgressBar Progress="Battery.ChargeLevel" HeightRequest="20" HorizontalOptions="LayoutOptions.FillAndExpand" /> <Label Text="@($"{Battery.ChargeLevel.ToString("P")}")" /> </StackLayout> <Label Text="@($"? state: {Battery.State.ToString()}")" /> <Label Text="@($"? source: {Battery.PowerSource.ToString()}")" /> <Button Text="Where am I?" OnClick="@WhereAmI" />
</StackLayout> @code
{ async Task WhereAmI() { var location = await Geolocation.GetLocationAsync(new GeolocationRequest(GeolocationAccuracy.Medium)); var locationMessage = $"Lat: {location.Latitude}, Long: {location.Longitude}, Alt: {location.Altitude}"; await Application.Current.MainPage.DisplayAlert("Found me!", locationMessage, "OK"); }
}
</code></pre>
<p>More information:</p>
<h2>Several properties, events, and other APIs were added to existing components</h2>
<p>The set of properties available on the default components in Mobile Blazor Bindings now match the Xamarin.Forms UI controls more closely.</p>
<p>For example:</p>
<ul>
<li>Button events were added: OnPress, OnRelease</li>
<li>Button properties were added: FontSize, ImageSource, Padding, and many more</li>
<li>Label properties were added: MaxLines, Padding, and many more</li>
<li>MenuItem property was added: IsEnabled</li>
<li>NavigableElement property was added: class</li>
<li>And many more!</li>
</ul>
<h2>Made it easier to get from a Blazor component reference to the Xamarin.Forms control</h2>
<p>While most UI work is done directly with the Blazor components, some UI functionality is performed by accessing the Xamarin.Forms control. For example, Xamarin.Forms controls have rich animation capabilities that can be accessed via the control itself, such as rotation, fading, scaling, and translation.</p>
<p>To access the Xamarin.Forms element you need to:</p>
<ol>
<li>Define a field of the type of the Blazor component. For example: <code>Microsoft.MobileBlazorBindings.Elements.Label counterLabel;</code></li>
<li>Associate the field with a reference to the Blazor component. For example: <code><label @ref="counterLabel" …></label></code></li>
<li>Access the native control via the <code>NativeControl</code> property. For example: <code>await counterLabel.NativeControl.RelRotateTo(360);</code></li>
</ol>
<p>Here’s a full example of how to do a rotation animation every time a button is clicked:</p>
<pre><code class="xml"><StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center"> <Button Text="Increment" OnClick="IncrementCount" /> <Label @ref="counterLabel" Text="@("The button was clicked " + count + " times")" FontAttributes="FontAttributes.Bold" VerticalTextAlignment="TextAlignment.Center" /> </StackLayout> @code
{ Microsoft.MobileBlazorBindings.Elements.Label counterLabel; int count; async Task IncrementCount() { count++; var degreesToRotate = ((double)(60 * count)); await counterLabel.NativeControl.RelRotateTo(degreesToRotate); }
}
</code></pre>
<p>Learn more in the <a href="https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/animation/">Xamarin.Forms animation topic</a>.</p>
<h2>Bug fixes</h2>
<p>This release incorporates several bug fixes, including fixing an iOS startup issue. You can see the full list of fixes in <a href="https://github.com/xamarin/MobileBlazorBindings/milestone/2?closed=1">this GitHub query</a>.</p>
<h2>In case you missed it</h2>
<p>In case you’ve missed some content on Mobile Blazor Bindings, please check out these recent happenings:</p>
<h2>Thank you to community contributors!</h2>
<p>I also want to extend a huge thank you to the community members who came over to the <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a> and <a href="https://github.com/xamarin/MobileBlazorBindings/issues?utf8=%E2%9C%93&q=is%3Aissue+-author%3AEilon">logged issues</a> and <a href="https://github.com/xamarin/MobileBlazorBindings/pulls?utf8=%E2%9C%93&q=is%3Apr+-author%3AEilon">sent some wonderful pull requests</a> (several of which are merged and in this release).</p>
<p>This release includes these community code contributions:</p>
<ol>
<li>Added AutomationId in Element <a href="https://github.com/xamarin/MobileBlazorBindings/pull/48">#48</a> by <a href="https://github.com/Kahbazi">Kahbazi</a></li>
<li>Fix src work if NETCore3.0 not installed <a href="https://github.com/xamarin/MobileBlazorBindings/pull/55">#55</a> by <a href="https://github.com/0x414c49">0x414c49</a></li>
<li>Multi-direction support for Visual Element (RTL, LTR) <a href="https://github.com/xamarin/MobileBlazorBindings/pull/59">#59</a> by <a href="https://github.com/0x414c49">0x414c49</a></li>
</ol>
<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. Improved CSS support and inline text are two things we’d love to make available soon.</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> or fill out the <a href="https://www.surveymonkey.com/r/X82XVTZ">feedback survey</a>.</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/announcing-experimental-mobile-blazor-bindings-february-update.png" width="96" height="96" alt="Eilon Lipton" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2020/02/...ry-update/